When you build a page in 10 Minute Funnels, sometimes you might want to send your lead data or payment data to a CRM or payment gateway. There are two ways to do that in 10 Minute Funnels.
Pre-built Third-party Integration
One way to do this is to choose one of the pre-built third-party integrations and payment gateways that we have provided for you.
Webhook Trigger
If you have a CRM or payment gateway that is not part of the third-party integrations we support, another option is to use a webhook.
A webhook allows you to send your data immediately to a destination of your choice.
Once you set this up, when someone triggers the webhook (e.g. they clicked the button), it will send all of the data that the visitor entered in the form to the destination or third-party application of your choice.
To set up the webhook trigger, follow these steps:
Step 1 - Add Form or Form Field element(s) to your page.
Step 2 - Select the page element that you want to use to trigger the webhook.
Example: Button
Step 3 - On the settings, select the action, “trigger a webhook.”
Open the settings of the element (double click the element), scroll down to the button [element] actions, then select the action, “trigger a webhook.”
Step 4 - Add the webhook URL and select the type of request method.
In general, GET requests are used to retrieve information. POST requests are used to create data.
If you're not sure which request method to choose (post or get), this information is usually on the documentation provided by the authors of the webhook URL or API documentation, or you can contact their support team.
Step 5 - Select the next action you want to happen after the webhook has been triggered.
The list of actions includes entering a custom URL or going to another page in the campaign (e.g. Go to the Thank You page).
Step 6 (optional) - Toggle on "Forward Params" option.
This option is available whenever you link one page to another.
When toggled on, all URL parameters will be passed to the destination URL.
For example, when url.com/page?param1¶m2 is clicked, it will route to destination.com?param1¶m2
It will also pass along the response from the webhook.
ADVANCED WEBHOOK SETTINGS
How to add Custom Hardcoded Values
If you want to further customize the data to be sent to your third-party application or destination, the "Advanced" section allows you to send additional hardcoded values using the JavaScript Object Notation (JSON) format.
After doing the steps above, follow these steps to set this up:
Step 1 - Below the [Element] Actions, Trigger a Webhook, scroll down to "Advanced."
Step 2 - Click Send Extra Data (JSON).
Step 3 - Select Body Values or Header Values, then click the [+] icon.
The Header Value represents the meta-data associated with the API request and response.
Example:
x-api-key: "J8MX90GCM18470skzP"
The Body Values can be any valid JSON object.
Example:
{
"firstName" : "Kyle",
"email" : "username@email.com",
"product_name" : "MH001"
}
Step 4 - Enter a key name, then click the check icon.
Step 5 - Click the edit icon and enter the value.
Replace the word, "Null," then click the check icon.
How to Customize User Data by Changing the Form Field Name
Another way to customize the data that is sent to your third-party application is to customize the name of the form fields.
In some third-party applications, there are specific naming requirements that they have for "form fields."
To change the name of a form field that is part of a Form [Builder] element, follow these steps:
Step 1 - Add a Form element.
Step 2 - Double click the element then select a form field on the settings.
Example: Email
Step 3 - Click the three-dot icon.
Step 4 - Select "Set the Form Item Name."
Step 5 - Enter the correct name on the "Name" field on the Text Field Settings.
Example:
First Name: first_name
Email Address: email
Credit Card Number: credit_card_number
To change the names of the Form Field element, follow these steps:
Step 1 - Add a Form Field element.
Step 2 - Double click the element then select a field type on the settings.
Example: Email
Step 3 - Click the three-dot icon.
Step 4 - Select "Set the Form Item Name."
Step 5 - Enter the correct name on the "Name" field on the Text Field Settings.
Example:
First Name: first_name
Email Address: email
Credit Card Number: credit_card_number