This guide helps you set up an API connection to Loops from your Bubble app.

In this example, we will create an integration that allows you to sync Bubble users to your Loops audience.

We have created an official plugin for Bubble, which contains actions for all Loops API calls. However, it is limited to what it can do by how Bubble works.
THis tutorial helps if you need more control or flexibility over the data that is sent to Loops.

​
Install the API Connector plugin

In Bubble, you need to first install the API Connector Plugin. This plugin is what makes the API calls to Loops.

Go to Plugins and click + Add plugins.

Search for “API Connector” and click Install.

​
Add a Loops API connection

Now you have the plugin installed, you can add an API connection.

Click Add another API. In the form that appears, enter “Loops” into the API Name field (Bubble uses this field to group API calls together in the interface).

Make sure the Key name value is “Authorization” (this is the default).

In the Authentication field, select “Private key in header”.

In Loops, go to your API Settings page and copy an API key (you can create a new key if you like).

Back in Bubble, in the Key value field, write the word Bearer, then a space character, then paste your API key, so it looks something like Bearer YourApiKey.

​
Add an API call to sync users to Loops

Now you can create an API call using the connection you just created. Click Add another call at the bottom of the gray box.

In the Name field, write something like “Sync users”.

In the Use as field, select “Action”. The Data type field should be “JSON” (this is the default).

In the dropdown where it says “GET”, select “POST”, and in the subsequent field, paste the following endpoint URL:

https://app.loops.so/api/v1/contacts/update

Now all that’s left is to set up the request body, which is the data that’s sent to Loops. This will depend on what kind of data points you want to send.

In this example, we will add a custom contact property called “Plan name” (which we already added in Loops).

Due to how Bubble handles empty values, make sure to only add properties to this request body that will always contain a value. Otherwise, Bubble will send "null" as the value instead of an empty value, which will mean, for example, your contact’s first name will become null.

To make the request, we have to include an email address (which is required to create new contacts in Loops). Then we’ll also add a “User ID” value (which will maintain a distinct connection between a user in Bubble to their contact record in Loops) plus the “Plan name” property. Due to the data in my example application, I know all three of these fields will always have a value.

In the Body field, paste this:

{
  "email": "<Email>",
  "userId": "<User_ID>",
  "planName": "<Plan_name>"
}

If you then click anywhere outside the Body field, you’ll see two sets of fields appear below it, one for each of the three custom variables (Email, User_ID and Plan_name) we added to the body data.

Uncheck the Private checkbox for each of these variables, otherwise they won’t show up in the Bubble interface when you come to use this API call.

The final step is to initialize the call, which will show Bubble that the API call works.

To do this, enter some example values in each of the Value fields, then click Initialize call (this will send real data to Loops).

If it works, you’ll see a success message and a confirmation of the returned values from Loops. Click Save to complete setting up the API call.

If the request is not successful, you should see a message telling you what went wrong.

When you’re done, remember to delete the test data you just added in the Value fields.

​
Add the action to your Workflow

The final step is using your API call inside your application.

To do this, go to Workflows in your Bubble account and create a workflow for when you want to send a user to Loops.

In this example, I want to sync users to Loops whenever they log in (they could also be synced after other events, like if their email address changes).

To do this, click Click here to add an event… and select “General > User is logged in”.

Click Click here to add an action…, hover over Plugins and select the action you created by the name you gave it (naming is organized by “API name - API call name”).

This will show a popover containing the fields you added in the previous step, allowing you to insert your data in Bubble into the API call.

Click into a field and then Insert dynamic data, then select the data you want to send to Loops. (In my example I searched for “Current User” and then selected 's email, 's unique ID and 's plan to fill out the three fields.)

Now when the selected event happens, Bubble will make an API call to Loops!

To verify everything is set up correctly, log in to your Bubble app (to trigger the event) and then check the Audience page in Loops to see if your user account appears.

​
Other examples

There are lots of different ways you can use Bubble’s API Connector to send data to Loops:

  • Create a newsletter subscription form and send all submitted email addresses to Loops.
  • Sync contacts whenever a user’s email address is changed in Bubble.
  • Trigger an event in Loops for all new sign ups using the Send event endpoint, to enter new users into a welcome email sequence.
  • Periodically sync contact properties to Loops so you can send personalized emails.

​
Learn more

Bubble plugin

Manage contacts and send emails with our Bubble plugin.

Loops API

View all of our API endpoints.

Contact properties

Learn more about custom contact properties.