Bubble

​

Install the plugin

Go to the Loops plugin and select your app from the “Install in an application…” dropdown.

Alternatively, go to the Plugins page in your Bubble admin, click “Add plugins” in the top right, and search for “Loops”.

​

Set up the plugin

To use the plugin you will need to add a Loops API key into Bubble.

First, go to your Loops API settings page and copy an API key. You may need to create a key first.

Then go to the the Plugins page in Bubble, select the Loops plugin and paste your API key into the “API key” field, prepended with the word “Bearer” and a space.

​

Using the plugin actions

To use the plugin actions in a workflow, select “Plugins” in the menu and you will see the options show up (prefaced with “Loops - ”).

Here’s a simple example of using the Bubble plugin to add all new users to your Loops audience.

After your sign up action, add a new “Loops - Create a contact” action.

In the form, add your user email into the “Email” field and user ID into the “User ID” field.

And that’s it!

​

Actions

The plugin contains actions that replicate what’s possible with the Loops API.

​

Create a contact

The Create a contact action will create new contacts in Loops using the email address and user ID that you send from Bubble.

If you want to “create or update” users, use the Update a contact action instead.

You need to provide both email and user ID values, otherwise the underlying API request from Bubble will fail.

The Create a contact with name action lets you also send a first and last name to Loops.

API documentation

​

Find a contact

The Find contact by email action will find a Loops contact based on the provided email address. This can be used to see if one of your user already exists in your Loops audience.

Similarly the Find contact by user ID action will find a contact by their ID.

API documentation

​

Update a contact

This action will update the email address of a Loops contact who has the provided user ID.

This action can also be used to “update or create” contacts. If a contact doesn’t already exist with the provided email or user ID, a contact will be created.

API documentation

​

Delete a contact

The actions Delete a contact by email and Delete a contact bu user ID will delete a contact from Loops.

This is useful for when a user closes their account in your application and therefore you no longer want to email them from Loops.

API documentation

​

Send an event

The send event actions can be used to trigger Loops from your application. For example, you may have a welcome loop which sends an email drip campaign to new users.

For the Send an event action, you need to provide an “Event name” value and the user’s ID or email address.

API documentation

​

Send transactional email

Transactional emails are one-time emails like password resets sent by apps to users based on an action.

To send transactional emails, you will first need to create the email in Loops.

Once you have written the email and added data variables, you can click Next to see the example payload for the API.

Note the names of the dataVariables (which you added in the email) because you need these in Bubble.

Once you create the action in Bubble, you will see the three fields in the form.

Here is an example API payload for the Loops API:

{
  "transactionalId": "clomzp89u635xl30px7wrl0ri",
  "email": "[email protected]",
  "dataVariables": {
    "lastLoggedIn": "20240214T10:01:29Z",
    "plan": "Pro",
  }
}

To get the same effect in Bubble, we need to enter the following into the “Data variables” field:

"lastLoggedIn": "20240214T10:01:29Z", "plan": "Pro"

To add user data into this field, place your cursor and select Insert dynamic data (see image above).

API documentation