Using a Webhook

Olivia McCormack

Last Updated April 06, 2023 00:37

Unbounce's WebHook integration lets you send submissions from your form to any custom page or script you like.

This article will explain how to link your custom WebHook to an Unbounce landing page.

What's a Webhook?

A Webhook is just a push notification from our server to yours. The Form Submit Webhook lets you set up a push notification to your server every time someone submits a form on one of your Unbounce pages.

Note

We have no visibility into or control over your Webhook setup. If you are concerned with GDPR compliance, consider using Setting Up 'Integrations Powered by Zapier' instead of using a Webhook.

What Can You Do With a Webhook?

Webhooks make it easier to integrate two systems. The most common use for our Form Submit Webhook is to feed leads into your CRM. But there are lots of other things you could do as well, such as sending yourself an email or plotting addresses on Google Earth.

What Do You Need?

The very nature of a Webhook assumes that you have some ability to write code (or bribe a friend or colleague who does). You will require a server that can accept a POST request (like what you’d get from a form submission). You will also need to write a script that accepts the JSON or XML (Unbounce sends both), sends back a 200 response to the webhook, and then does something in response. If writing code from scratch seems intimidating, you may want to see if Unbounce's Zapier integrations can connect Unbounce to your 3rd party service for you.

Pro Tip:

You can use these setup steps to integrate your popups and sticky bars with your webhook. See Setting up Integrations With Popups and Sticky Bars to learn more.

Step 1: Write code to accept your form data

Whenever a page visitor of yours completes a form submission on your page, Unbounce will send the following data to your selected Webhook URL:

Parameter	Description
Unbounce form field IDs	The existing fields you have in the Unbounce form (such as to capture email addresses, names, phone numbers, etc.) that you're mapping over to the Webhook. For example, if you have a field to capture a visitor's full name, and the field ID is "full_name", it will appear in the Webhook response as "full_name".
ip_address	The visitor's IP address.
page_uuid	The identifier Unbounce uses to identify your page uniquely. Eventually, you’ll be able to use this with our API to manipulate and get information about your page. This is a 36-character UUID, for example, "a2838d98-4cf4-11df-a3fd-00163e372d58".
page_name	The name you gave your page, for example, "My Amazing Landing Page."
page_url	The URL of the page that contains your form.
variant	This identifies the page variant that the visitor saw when they landed on your page. The first variant is "a ", the next, "b", and so on. If you have more than 26 variants, the sequence will continue with "aa", "ab," etc.
date_submitted	The day of the lead capture, in the following format: YEAR-MM-DD.
time_submitted (in UTC)	The exact time of the lead capture in the UTC timezone. For example, "08:12 PM UTC". At this time, UTC is the default timezone and cannot be changed.

Here is an example of the request, in both JSON and XML formats:

data.json

{
  "full_name": ["Steve Jobs"],
  "email_address": ["steve@apple.com"],
  "earnings": ["More than you can possibly imagine"],
  "what_would_you_like_our_product_to_do?": ["Dice", "Julienne Fries"],
  "how_did_you_hear_about_us?": ["Can't Remember"],
  "ip_address": ["123.45.678.9"],
  "page_uuid": ["a2838d98-4cf4-11df-a3fd-00163e372d58"],
  "variant": ["a"],
  "time_submitted": ["08:12 PM UTC"],
  "date_submitted": ["2022-01-31"],
  "page_url": ["https://my.codingbootcamp.com"],
  "page_name": ["Coding Bootcamp Promo Spring Campaign"]
}

data.xml

<?xml version='1.0'?>
<form_data>
  <full_name>Steve Jobs</full_name>
  <email_address>steve@apple.com</email_address>
  <earnings>More than you can possibly imagine</earnings>
  <what_would_you_like_our_product_to_do?>
    <entry>Dice</entry>
    <entry>Julienne Fries</entry>
  </what_would_you_like_our_product_to_do?>
  <how_did_you_hear_about_us?>Can't Remember</how_did_you_hear_about_us?>
  <ip_address>123.45.768.9</ip_address>
  <time_submitted>08:12 PM UTC</time_submitted> 
  <page_uuid>a2838d98-4cf4-11df-a3fd-00163e372d58</page_uuid> 
  <page_name>Coding Bootcamp Promo Spring Campaign</page_name>
  <page_url>https://my.codingbootcamp.com</page_url>
  <date_submitted>2022-01-31</date_submitted>
  <variant>a</variant>
</form_data>

* Be sure to return a 200 response to ensure our webhook sees the post as successful.

Unbounce will send data in JSON and XML (data.JSON & data.XML) only. Please ensure that the code written for this Webhook is set up to receive these specific data formats.

Modifying HTTP Headers

At this time, modifying or changing the header with Webhook POST requests of landing pages is outside the capacity & scope of the Unbounce app. You can, however, alter the request body by editing your form fields.

Step 2: Configure Your Webhook

Now that you've written code to accept your form data, you can configure your webhook.

In the Page Overview screen, select the Integrations tab, then the Webhooks tab.
On the right-hand side of the page, click +Add Webhook.
Enter the URL you'd like your data to be posted to.
Configure your Field Mapping and click Save Changes.
Wait for a few moments while we add your webhook.
If the webhook is added successfully, you'll see a dialog box confirming the successful addition of your webhook. Click Done to close the dialog box.
If you see an error, click “View Details” to resolve the issue.
Verify that the URL is correct and if so, click “Resubmit” to re-send the URL.
You're all set!

Testing Your Webhook

Whenever you add a new webhook, it's always a good practice to make a test submission to confirm your lead data is being sent successfully.

Visit the live version of your landing page and make a test form submission.
Go to the Leads tab in your Unbounce page overview.
In the Leads tab, click on your most recent lead. A panel will appear on the right-hand side of the page.
Under Integration Details, you should see a green checkmark next to your webhook. The green arrow indicates that your data has been sent through the webhook successfully.
Clicking on the integration status will reveal more information about the data that was sent. This data can come in handy if you ever need to troubleshoot integration errors.

Managing Multiple Webhooks

You can now create, configure, and manage more than one Webhook in Unbounce. This means any leads captured on your Unbounce page can be sent off to multiple custom integrations (including Zapier!).

Note:

As of January 2017, you can copy over Webhooks along with their field mapping when duplicating a page.

URL Parameter Replacement

There's also a handy feature you can use to do some simple customization of the URL you're posting to. You can pass data from your form into parameters in the URL the webhook posts to. This is useful for doing simple mapping of form field names to field names expected by the target script.

Let's say you had a form with a "name" field in it, and you wanted to pass this along as a "customer_name" field. You could specify your webhook's "URL for POST" as follows:

myamazingcompany.com/?customer_name=(name)

When a form is submitted, we'll replace the "(name)" token with the name field's value from the form. You can add as many parameters as you like; just be aware that some servers limit how long the query string can be.

Sample PHP Script

Security

Our webhooks will be posted to your servers using known IP addresses (either 54.241.34.25 or 50.19.99.184). You can optionally update your firewall rules to limit posts to your servers from these addresses.

Glossary

WebHook: a push notification from our server to yours.

Form Submit WebHook: lets you set up a push notification to your server every time someone submits a form on one of your Unbounce pages.

The most common use of WebHook: to feed leads into your CRM.

PostBin URL: a place to temporarily send your form data