Integrating Your Service With Unbounce Using Webhook
While we already have direct integrations with MailChimp, AWeber, and Constant Contact, we understand that there are hundreds of other lead management services out there (CRMs, EMS's, etc) that we haven't yet tackled. If you are keen to provide an Unbounce integration for your customers without waiting on us, read on for an overview of how this is possible using our real-time WebHook notifications.
How Does the Unbounce WebHook work?
You can find out all the nitty gritty details about what a WebHook is over here, but the general idea is this: If an Unbounce customer is doing lead capture with a form on their Unbounce landing page, Unbounce will fire a notification to a URL of your choice everytime the form is submitted. We'll include all of the values that were submitted in the form, as well as some details about what page and variant the lead was captured on.
How Can We Use This to Integrate Our Service?
If your service relies on capturing leads as they are generated, all you'll need to do is write a bit of code to parse our WebHook notification (see what the output looks like here) and provide that functionality at a URL endpoint that your customers can use in our WebHook settings.
Examples of Webhook
Let's say you have a CRM tool called acmeCRM and you'd like Unbounce users to be able to push their leads to their acmeCRM account, as they are captured. Here are the steps we would suggest you follow these steps:
- You'll want to start by having your development team write the code to parse our WebHook post object (we provide both json and xml formats of the data).
- Your customer (and Unbounce customer) will need a place in acmeCRM to find the URL that they should use for the Unbounce webhook. Where you provide that is up to you obviously (a "settings" screen, "integrations screen", maybe?), but you'll want to provide a unique URL for each user so that you'll know who's account to associate the lead with when you receive a notification. Embedding a public-facing user or account ID in the URL would work. For example:
- Instruct your users to copy this URL and paste it in the WebHook integration dialog for their Unbounce page. That screen should look like this:
- That's it! As long as your script is properly parsing our WebHook post, your users should start seeing their Unbounce leads in your app.
What About Integrating for More Than Just Lead Capture?
We are in the early stages of developing an API that will allow further integration outside of just lead capture. As that develops, we will be sure to update this thread with relevant details.
In addition to serving our built in form confirmation dialog, sending users to an external thank–you page, or serving a browser confirmation pop-up, Unbounce gives you the option to post your from data to an external URL.
Integrating Your Service With Unbounce Using "Post form data to a URL"
Similar to a webhook, the "Post form data to a URL" confirmation option lets you send your form submissions via the POST method to a pre-defined external URL. Unlike a webhook (which sends data via xml and json), the "Post form data to a URL" function sends a POST request with a message body that contains the form information as a data set that contains control name/control value pairs (i.e. first_name=Unbouncefirstname.lastname@example.org).
Functionality of the "Post form data to URL" Option
The "Post form data to a URL" option makes it easier to integrate certain external systems with Unbounce. The most common use for the feature is to post directly to a system that is set-up to accept application/x-www-form-urlencoded encoded form data via POST.
Use cases for "Post form data to URL"
If you have an external application that can accept application/x-www-form-urlencoded encoded form data via POST, using "Post form data to URL" may still require some custom coding, but should be easier than building a custom handler and a webhook.
Step 1: Setting Your External URL
Open up the Page Builder and click on your form to bring up its properties in the right hand panel. Then, under Form Confirmation set the Confirmation to "Post form data to URL" then enter your URL in the box provided.
Step 2: Configuring a Thank-You Page Redirect
When you post your form data to an external URL, your end user will also be taken directly to that URL. Because of this, any external system that accepts form data via POST should also have a way to set a redirection URL. Once a redirection URL is set, when someone submits your Unbounce form, the user and the form submission will be sent to your POST URL and then redirected to that thank-you page.
Setting your thank-you page redirect will vary depending on what external application you're using, but most should either have a place to simply enter the URL on their end or instructions on how to configure your POST URL to set the redirect.
Step 3: Customizing Form Field Names
Some platforms will accept form data via POST, but require that the form field names are formatted in a certain way. By default, your form field names will be generated based on your form labels, but if you're posting your form data to an application that requires specific field names, you can set them manually in the form editor.
So, for example, if the name field on your form is labeled "Your Name", but your posting your form data to an application that requires "customername", you can change the default by:
- Opening up the Form Editor in the Unbounce Page Builder
- Clicking on the field you need to change
- Unchecking "Auto-generate From Field Label"
- And entering "customername"