If using a web form that's built on Instapage you can use the webhook integration to pass a lead into Flow XO and then into your FLG account. This tutorial will walk you through the process of sending a webhook from Instapage into Flow XO and then how to pass that back into your FLG account.
Before you start you will need the following:
- A Flow XO account (you can sign up for free here).
- A Lead Group for the leads to be submitted to.
- An Access Key with permission for leads to be created (In FLG go to Settings > Configurations > Access Keys).
Step 1) Create your flow
Sign into your Flow XO account and create a new flow by clicking on the 'New' button near the top right corner.
From the template list, select 'Blank Flow'
Select the trigger for 'Receive a Webhook'
On the screen you'll be shown a box that has a URL. Just copy that for now and leave this page open then head over to your Instapage account.
Step 2) Setup the Integration on Instapage
Whilst viewing your Instapage, click on 'Settings' near the top right corner.
Select 'Integrations' from the list
From the integrations list select 'Webhook'
A screen will appear for 'Webhook Integration'. In the field for 'Webhook endpoint URL' you need to enter the URL from the Flow that you created earlier on Flow XO.
Once you add the URL click on the continue button.
You will be asked to enter an authorization key but this isn't needed. Just hit continue again.
For the HTTP method leave it set as 'Send by POST' and hit continue.
On the next section you will see the field names. On the left side is your Instapage field and on the right is the name that will be sent on the webhook. For Flow XO we'll need to remove any spaces that are present in the field names. For example, 'First Name' needs to be changed to 'FirstName'. Remove any spaces from the field names and then click on continue.
Another optional page will appear. If you want the data to be available in the webhook then click on continue. If you don't need it then just select 'Skip this step'.
You can then click on the finish button.
Now that has been setup you will need to trigger the webhook from your Instapage. Just fill out your web form and submit it.
This should trigger the webhook back on Flow XO. You'll know for sure if the webhook screen you opened earlier marks as complete:
Click 'Next' and then 'Save'.
Step 3) Setup your Flow
3.1) Split the first & last name in Flow XO
Instapage generally has a single field to capture the name.
In FLG a lead needs to be created with both a first and last name. As an easy solution you can use the full name as the 'first name' and then placeholder text like "Unknown" as the last name. If you want to do this or capture both first and last name as separate fields on your web form then skip ahead to step 3.2 below.
On Flow XO, click to add a new action by clicking on the + symbol:
Scroll down and select 'More Services'
Select the 'Text (String) service
Set the action as 'Split Text'
For the 'Text' input box click on the XO icon at the far right side. This will bring up a list of outputs. You want to select 'Fullname' from the list. (Note that if you changed the field name earlier then this may be named something different).
In the box for 'Separator' type in "[space]" without the quotation marks.
Click 'Next' and then 'Save'.
3.2) Add the lead into FLG
Add a new action by clicking on the + symbol:
Scroll down and select 'More Services'
Select FLG from the list
Set the action as 'Add a Lead'
Scroll down and select 'More Services'
Select FLG from the list
Set the action as 'Add a Lead'
You'll be shown a screen that walks you through connecting your FLG account. Just follow those steps and then click on 'Next' once you're ready.
You will then be shown a screen that has all of the fields available for adding a lead into FLG.
Scroll down until you reach 'First Name'. At a minimum, both first and last name need to be added. The steps for this will vary depending on whether you skipped step 3.1.
If you skipped 3.1)
Click on the 'XO' icon to the right side of the box for 'First Name' and select 'Fullname'(Note that if you have the first name available instead then you want to select that. If you changed the field name earlier then this may also be named something different).
If you have the last name available then repeat the same step for 'Last Name' but choose the last name output instead. Otherwise, enter "Unknown" into the 'Last Name' field.
If you didn't skip 3.1)
Click on the 'XO' icon to the right side of the box for 'First Name' and select 'Text 1' which is listed under 'Split Text'
Repeat this process for 'Last Name' but choose 'Text 2' instead.
For both methods:
You can now add any other fields that you want to include from the web form into the lead. Custom fields are listed further down and relate to the additional fields setup on your Lead Group. For example, Field Label 1 on a Lead Group will be Data1 in the list on Flow XO.
At a minimum you will also need to specify a Lead Group to save the leads to. You may also want to specify the contact permissions if you plan on using any automated emails or texts.
Once you have all of your fields mapped up you can click on 'Next' and then 'Save'.
If you skipped 3.1)
Your Flow is ready to be switched on. Just click on the 'Off' button near the top right corner. You should see it switch green and say 'On'.
And that's it; any new leads sent through your Instapage form should land in your FLG account.
If you didn't skip 3.1)
Since the user on your form might not provide a first & last name on your form you want to make sure that this is handled before passing the lead into FLG. Flow XO has a Filters feature so this can be handled by setting up another action.
On your 'Add a Lead' action that you setup earlier, click to add a Filter.
For the filter, use the XO icon to select 'Text 2' from the list. The condition then needs to be set to 'Is not empty'
Once that's set click on 'Save'.
This filter means that the action will only run if the user provided a last name.
Back on your Flow you now want to copy the 'Add a Lead' action. To do this, click on the three horizontal dots just above the edit button and select 'Duplicate'
You will then see the duplicated action. This needs changing slightly so click on the 'Edit' button.
Scroll down to the Last Name field and where you have '{{split_text.string2}}' remove it and type in "Unknown" without the quotation marks.
You can then save the action.
Now the Filter needs to be changed over so click on the Filter button.
Set the Filter as {{split_text.string2}} Is empty
You can then save the filter.
And that's it! You now have the Flow ready to handle two scenarios. If the web form user sends in a first and last name then the first action will run, if they just send a first name then the second action will run and set the last name as 'Unknown'.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article