Actions are a core feature of Embeddables, allowing you to run custom JS code when some kind of event occurs.

Actions are initiated by Triggers, which are events that occur in the Embeddable. For example, a Trigger might be when a user clicks a button, or when a page is loaded.

Actions have access to the User Data JSON object, a series of helper functions like setUserData and triggerAction, and extra context about what triggered the Action.

1

Create a custom code Action

  • Go to the Logic sidebar and click on the Actions tab.
  • Click + Add New Action.
  • Give it a name like “Send Data to Klaviyo”.
  • Hit Add.
2

Write your custom code

  • Add whatever custom JS you like inside the output() function.
  • The first argument of output() is the User Data, and the other arguments are described here.
  • The code will execute on the frontend, in the main window environment, so has access to window functions and variables.

​
Action execution environment

Actions are executed client-side, in the main window environment.

This means that they have access to the main window’s functions and variables, such as window.location, document, and localStorage.

This can have useful benefits, such as:

  1. The ability to manipulate the DOM
  2. Access to read and write to localStorage
  3. Accessing frontend functionality that you might want to expose to the Embeddable, e.g. window.logInToApp().

Be careful to avoid exposing secure information such as API Secrets in Actions.

One workaround for this (which can also solve CORS issues) is to use the Embeddables Proxy API - ask Embeddables for more information on this.

Learn more about Custom Code

Read more about writing Custom Code in Embeddables, including all the available arguments passed in to the function.

​
Example Actions

​
Send Data to Backend

Here’s an example of an Action that sends a subset of User Data to a backend.

// All Actions must contain a function called output()
function output(userData) {
  // Create an object with the data we want to send
  const dataToSend = {
    email: userData.email,
    name: userData.name,
    favorite_color: userData.favorite_color,
  };

  // Send this data to the backend
  fetch('https://your-backend-url.com/', {
    method: 'POST',
    body: JSON.stringify(dataToSend),
  });
}

​
Common use-cases

How To: Send Data to Klaviyo

Setting up an Action with custom code that sends user data to Klaviyo’s API

How To: Send Data to Telegra MD

Setting up an Action with custom code that sends user data to Telegram’s API

How To: Send Data to Tellescope

Setting up an Action with custom code that sends user data to Tellescope’s API

How To: Handle Partial Data Capture

Storing incomplete user answers, even when they haven’t yet completed the entire funnel.

How To: Retrieve User Data on Different Device

Resuming a user’s progress after remarketing to them by email or SMS

How To: Add External Scripts

Two ways to add external scripts or style libraries toyour Embeddable

How To: Run custom code on Embeddable Load

Running JS code on first load, e.g. to run a function or add an event listener

Was this page helpful?

Suggest editsRaise issue