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 fr om 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).
Sign into your Flow XO account and create a new flow by clicking on the 'New' button near the top right corner.
26c2b8bf53f545026dea6ab0d9642ba5png
From the template list, sel ect 'Blank Flow'
eeaf2df11f3d2e68dafe29f869d18582png
Sel ect the trigger for 'Receive a Webhook'
78968ae79263e9bc7d6a639413180319png
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.
Image: https://flg360.uservoice.com/assets/209095351/Insta_0.png
Step 2) Setup the Integration on Instapage
Whilst viewing your Instapage, click on 'Settings' near the top right corner.
Image: https://flg360.uservoice.com/assets/209091319/Insta_1.png
Select 'Integrations' fr om the list
Image: https://flg360.uservoice.com/assets/209095150/Insta_2.png
From the integrations list sel ect 'Webhook'
Image: https://flg360.uservoice.com/assets/209095168/Insta_3.png
A screen will appear for 'Webhook Integration'. In the field for 'Webhook endpoint URL' you need to enter the URL fr om the Flow that you created earlier on Flow XO.
Image: https://flg360.uservoice.com/assets/209095309/Insta_4.png
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.
Image: https://flg360.uservoice.com/assets/209095693/Insta_5.png
For the HTTP method leave it set as 'Send by POST' and hit continue.
Image: https://flg360.uservoice.com/assets/209095729/Insta_6.png
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 fr om the field names and then click on continue.
Image: https://flg360.uservoice.com/assets/209097739/Insta_7.png
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 sel ect 'Skip this step'.
Image: https://flg360.uservoice.com/assets/209096137/Insta_8.png
You can then click on the finish button.
Image: https://flg360.uservoice.com/assets/209096152/Insta_9.png
Now that has been setup you will need to trigger the webhook fr om your Instapage. Just fill out your web form and submit it.
Image: https://flg360.uservoice.com/assets/209096254/Insta_10.png
This should trigger the webhook back on Flow XO. You'll know for sure if the webhook screen you opened earlier marks as complete:
dfd2fb64ab80f03aaa790082688e6615png
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:
f6200f8503679619729ec0dce8595720png
Scroll down and sel ect 'More Services'
f887f650065ce8adffe3db677ce45f74png
Select the 'Text (String) service
Image: https://flg360.uservoice.com/assets/209097241/Insta_12.png
Set the action as 'Split Text'
Image: https://flg360.uservoice.com/assets/209097262/Insta_13.png
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' fr om the list. (Note that if you changed the field name earlier then this may be named something different).
Image: https://flg360.uservoice.com/assets/209099353/Insta_14.png
In the box for 'Separator' type in "[space]" without the quotation marks.
Image: https://flg360.uservoice.com/assets/209100088/Insta_15.png
Click 'Next' and then 'Save'.
3.2) Add the lead into FLG
Add a new action by clicking on the + symbol:
f6200f8503679619729ec0dce8595720png
Scroll down and sel ect 'More Services'
f887f650065ce8adffe3db677ce45f74png
Select FLG fr om the list
4868522d6d4dfe80af715d15570063b5png
Set the action as 'Add a Lead'
Image: https://flg360.uservoice.com/assets/209096443/Insta_11.png
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.
e41fb40d6ee84db4c9191beb5d47f4fapng
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 sel ect '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).
Image: https://flg360.uservoice.com/assets/209102368/Insta_16.png
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.
Image: https://flg360.uservoice.com/assets/209102452/Insta_17.png
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'
Image: https://flg360.uservoice.com/assets/209102572/Insta_18.png
Repeat this process for 'Last Name' but choose 'Text 2' instead.
Image: https://flg360.uservoice.com/assets/209102611/Insta_19.png
For both methods:
You can now add any other fields that you want to include fr om 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.
Image: https://flg360.uservoice.com/assets/209102827/Insta_20.png
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'.
Image: https://flg360.uservoice.com/assets/209103127/Insta_21.png
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.
Image: https://flg360.uservoice.com/assets/209103328/Insta_22.png
For the filter, use the XO icon to sel ect 'Text 2' fr om the list. The condition then needs to be set to 'Is not empty'
Image: https://flg360.uservoice.com/assets/209103673/Insta_23.png
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'
Image: https://flg360.uservoice.com/assets/209103817/Insta_24.png
You will then see the duplicated action. This needs changing slightly so click on the 'Edit' button.
Image: https://flg360.uservoice.com/assets/209169241/Insta_25.png
Scroll down to the Last Name field and wh ere you have '{{split_text.string2}}' remove it and type in "Unknown" without the quotation marks.
Image: https://flg360.uservoice.com/assets/209169259/Insta_26.png
You can then save the action.
Now the Filter needs to be changed over so click on the Filter button.
Image: https://flg360.uservoice.com/assets/209169283/Insta_27.png
Set the Filter as {{split_text.string2}} Is empty
Image: https://flg360.uservoice.com/assets/209169298/Insta_28.png
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'.