20

Unbounce

You can connect forms to your Customer.io workspace to automatically add people and trigger campaigns when they submit forms on your Unbounce site. This makes it easy to capture and respond to leads.

How it works

Unbounce is a website builder that lets you create websites and add forms to your site. This integration lets you identifyThe Customer.io operation that adds or updates a person. When you identify a person, Customer.io either adds a person if they don’t exist in your workspace, or updates them if they do. Before you identify someone (by their email address or an ID), you can track them anonymously., update, and trigger events for people who submit your forms on your Unbounce site.

This integration does not work with forms in Unbounce popups or sticky bars.

When someone submits a form, we’ll automatically identifyThe Customer.io operation that adds or updates a person. When you identify a person, Customer.io either adds a person if they don’t exist in your workspace, or updates them if they do. Before you identify someone (by their email address or an ID), you can track them anonymously. them and update their attributes. We also collect the submission as an event that you can use to trigger campaigns and respond to people who submit your form.

To connect your form to Customer.io:

1. Scan your form: Link us to a page containing your form, so we can read the form fields and map them to attributesA key-value pair that you associate with a person or an object—like a person’s name, the date they were created in your workspace, or a company’s billing date etc. Use attributes to target people and personalize messages. Attributes are analogous to traits in Data Pipelines. in Customer.io. You’ll need to scan each form you want to connect to Customer.io.
2. Install the custom forms JavaScript snippet: This is a different snippet than our other JavaScript integrations; you only need to install the snippet once.
3. Test your implementation: Submit your form with a test profile—a profile that doesn’t represent a real person—to make sure that your fields map correctly before you send real submissions.

1. Scan your form

You’ll give us the URL of a page containing your form. We’ll scan the page and map the form fields to attributesA key-value pair that you associate with a person or an object—like a person’s name, the date they were created in your workspace, or a company’s billing date etc. Use attributes to target people and personalize messages. Attributes are analogous to traits in Data Pipelines. in Customer.io. While we scan your form to map fields to attributes, this process doesn’t capture form submissions. You’ll need to install the custom forms JavaScript snippet to complete the setup process.

1. Go to Integrations > Directory and select the Forms integration.
2. Select Custom and click Connect form.
3. Enter the URL of your form (or a page containing your form) and click Scan for Forms.
4. Select the form(s) you want to connect to your workspace and click Choose Form. If your page contains multiple forms, you can select each form and set a Name. The Name is how you’ll select forms in the UI.
5. Map Form Fields to Attributes and click Set Up Form.

   By default, we map the names of each field directly to an attribute. Click to prevent Customer.io from capturing a field. Take care when mapping fields; attribute names and values are case sensitive. If you segment or trigger campaigns based on attribute names and values, you want to make sure that you assign attributes and values correctly.

   

   
6. (Optional) Re-map fields to attributes. We automatically map the name attribute of fields to attributes in Customer.io. But you might change mappings to better match the format of attributes in your workspace. For example, if a field name comes through as first_name but you camel-case your attributes, you might change it to firstName.

Now, if you haven’t already, install the custom forms JavaScript snippet. Go to the Settings tab to find the snippet.

2. Add the custom forms JavaScript snippet to your site

You can add the JavaScript snippet at the domain level or page level, but you should not add it in both places, or you’ll receive duplicate submissions for each form. We also don’t support forms in Unbounce popups or sticky bars.

The custom forms JavaScript snippet is not the same as our other JavaScript snippets. Even if you’ve used one of our other JavaScript integrations, you must install the Custom forms JavaScript snippet to take advantage of this integration.

To find and install this snippet:

1. Go to the Settings tab of your Forms integration. If you’re not already on the Forms integration, go to Integrations > Connections and select your Forms integration.
2. Click JS Snippet, select the credentials you want to use for your forms integration, and click Copy. Because this snippet is different from our other JavaScript integrations, you might want to create a new set of credentials specifically for your forms!

   

   
3. Go to Unbounce and add the snippet to your site. You can add the snippet at the domain level or page level, but you should only add it in one place or you’ll receive duplicate submissions for each form.
   • Domain level: paste the script under Settings > Script Manager.
   • Page level: on the page containing your form, click Javascripts at the bottom of the page and insert the custom forms JavaScript snippet.

Now you can take advantage of form submissions to trigger campaigns, personalize messages, and more. See Use form data in Customer.io for more information.