APIBridge for Elementor: Documentation

What it does

An API is a web address that gives you data, for example today's weather, a product list or a currency rate. The data usually comes in a format called JSON.

APIBridge fetches that data on your server and lets you place it anywhere on your page using Elementor widgets. You do three things:

• Save the API address once, as a connection.
• Drag an APIBridge widget onto your page.
• Pick which piece of data the widget should show.

Your visitors never see the API address or your API key. Everything is requested by your own server.

What you need

• WordPress 6.0 or newer, and PHP 7.4 or newer.
• The Elementor plugin. The free version is enough. You do not need Elementor Pro.
• The address (URL) of the API you want to use. Its own documentation page usually tells you this, plus whether you need a key.

Quick start

This takes about five minutes. You will connect an API and show one value from it.

1. Install and activate In WordPress go to Plugins → Add New, search for APIBridge for Elementor, then click Install Now and Activate. If you have the plugin as a zip file, use Upload Plugin instead.
2. Add a connection Open APIBridge → API Connections and click Add New. Give it a name and paste the API address. Details are in Every field explained.
3. Test it Click Test Connection. You will see every piece of data the API returns. If you see data, the connection works. Click Save connection.
4. Add a widget Edit a page with Elementor. In the widget panel, open the APIBridge group and drag API Headline onto the page.
5. Choose the data In the widget, pick your connection, then pick a field with Pick from live data (or type its path). The value appears right away. Click Publish.

Create a connection

A connection tells APIBridge where your data comes from. You create it once and can then use it in as many widgets as you like. There is no limit on how many connections you can add.

Go to APIBridge → API Connections and click Add New. The form has these parts, from top to bottom:

1. Basics: name, address and method.
2. Authentication headers: an API key, if the API needs one.
3. Does this API need input from your visitor?
4. Caching: how long to remember results.

Every field explained

1. Basics

2. Authentication headers (optional)

Many APIs ask for a key or token. Click Add header and fill in two boxes:

The value is stored encrypted and is never shown again after you save. To change it, type the new value over the saved one. Use Remove to delete a header.

3. Does this API need input from your visitor?

Choose the option that fits.

If you chose No input needed, one more question appears:

If you chose Input required, you will see these fields instead:

4. Caching

When you are done, click Save connection.

Test Connection

At the bottom of the form, Test Connection sends a real request using the settings above. You do not need to save first.

• If the connection needs visitor input, type an example into Sample value for the test first.
• You will see every field the API returns, so you know exactly what to choose in your widgets.
• Click Copy path next to any field, then paste it into a widget.

JSON field path

A path tells a widget which piece of the data to show. You write it with dots, from the outside in. In most cases you do not need to type it: use Pick from live data in the widget, or Copy path on the Test Connection screen.

Here is an example of data from an API. Each coloured piece matches one path in the table below it.

{
  "title": "Pocket Guide to Lucknow",
  "user": {
    "name": "Asha",
    "address": { "city": "Lucknow" }
  },
  "items": [
    { "name": "Chikankari" },
    { "name": "Awadhi biryani" }
  ]
}

Three rules to remember

• Go one level at a time and put a dot between the names: user.address.city.
• For a list, use the item number. Counting starts at 0, so the first item is items.0, the second is items.1.
• If a name itself contains a dot, write a backslash before that dot: site\.name.

The widgets

After you activate the plugin, Elementor shows a group called APIBridge in its widget panel. Every widget works the same way: choose a connection, then choose the field (path) to show. The display widgets also let you set your own text for while the data loads, for when a value is empty, and for when loading fails.

With APIBridge Pro you also get Counter, Accordion, Tabs, Table, Card Grid and Timeline. See APIBridge Pro.

API Trigger: let visitors ask for data

Use API Trigger when the visitor decides what to look up, for example "type a city and see its weather". It shows an input field and a button.

1. Create a connection and choose Input required (see the fields).
2. Add the API Trigger widget and pick that connection.
3. Add other APIBridge widgets on the same page and pick the same connection. When the visitor searches, all of them update at once, without reloading the page.

In the widget you can change the label, the placeholder text, the button text and the messages shown while loading, when the input is wrong, and when there are too many requests. There is also a message for screen readers that tells blind visitors when the results are ready.

For a connection that loads on page view, you can switch on Show a button for "load on page view" connections so visitors can refresh the data by hand.

Logs

Open APIBridge → Logs to see requests that went wrong. This is the first place to look when a widget shows nothing.

• Each entry shows the connection, the time, the status and how long the request took. Open an entry for the error details.
• Use the search box and the status filter to find entries quickly.
• Delete all log entries clears the list.

By default only failed requests are logged. API keys, header values and what visitors type are never written to the log.

Settings

Open APIBridge → Settings. The defaults suit most sites.

In the three limit fields, 0 turns that limit off. This is not recommended.

APIBridge Pro Pro

APIBridge Pro is a separate add-on. The free plugin is not a trial and keeps working as long as you like. Pro adds more:

• Advanced widgets: Counter, Accordion, Tabs, Table, Card Grid and Timeline, built from your API data.
• Dynamic Tags: use any API field inside Elementor's own widgets, with the same field picker.
• Error e-mail notifications: get an e-mail when an API request fails.
• Priority e-mail support, and future Pro features at no extra cost.

Install and activate Pro

1. Download the APIBridge Pro plugin from your account on lasu.in.
2. In WordPress go to Plugins → Add New → Upload Plugin, then install and activate it.
3. Open the License screen under APIBridge and enter your license key.

Pro needs the free APIBridge for Elementor plugin to be installed and active. If it is missing, Pro will not activate and tells you why. For the same reason, the free plugin cannot be deleted while Pro is installed. Delete Pro first.

Dynamic Tags

In any Elementor widget, click the small database icon next to a field (the Dynamic button) and look for the APIBridge tags:

Choose a connection and a field, just as in the APIBridge widgets.

Error e-mail notifications

Go to APIBridge → Settings and find Error e-mail notifications.

1. Switch on Send an e-mail when an API request fails.
2. Enter the address in Send to.
3. Choose How often: Right away, or One summary per day (about 8:00, only if something failed).
4. Click Save, then Send test e-mail.

Each e-mail names the connection, the time, the exact reason and the page where it happened. The same problem on the same connection is e-mailed at most once every 15 minutes, and never more than 20 e-mails per hour. Successful requests never send e-mails.

Fixing problems

The widget says "please select an API connection"

Open the widget settings and choose a connection in the Connection box. If the list is empty, you have not created a connection yet. Use the Create one link.

The widget says "please enter the JSON field path"

Pick a field with Pick from live data, or paste a path you copied with Copy path on the Test Connection screen.

Test Connection works, but my widget shows nothing

The path is probably not exact. Check capital letters, check that you used the item number for lists (items.0.name), and copy the path again with Copy path. Also check that the widget uses the same connection you tested.

The data on my page looks old

The connection is probably caching results. Edit the connection and set Remember successful results for to a shorter time, or to Do not cache.

I see "Too many requests"

A visitor sent requests too fast, or the limits in Settings are set very low. Raise the limits a little, or increase Wait between submissions only if you see abuse.

The connection form says my saved header values can no longer be read

This happens when your site's security keys (in wp-config.php) change, for example after a migration. Enter the header values again and save.

The test works but the API says my key is wrong

Check the header name and the value spelling. Many APIs want the value as Bearer your-token, others want only the key. Your API documentation shows the exact form.

I do not get error e-mails

First, check that the license is active and the switch is on. Then click Send test e-mail. If you see a note about plain PHP mail, or no e-mail arrives, install an SMTP plugin such as WP Mail SMTP. Also look in the spam folder.

Where can I see what went wrong?

Open APIBridge → Logs and open the entry for the failed request. It shows a clear reason. To record successful requests too, switch What to log to Everything for a while.

Security and privacy

• Requests come from your server. Visitors never see your API address, headers or keys.
• Keys are encrypted when saved, and are never displayed again.
• Input is checked. What a visitor types is validated against the value type you chose before anything is sent.
• Limits protect you. Per-visitor and per-connection limits stop bots and accidental floods.
• Logs stay clean. Keys, header values and visitor input are never written to the log.
• Nothing is sent to the author unless you agree. Anonymous usage data is off until you switch it on.