The snippet from this article can be used for HubSpot Embedded Forms or Calls-to-Action (CTAs). For Pop-up forms, check this article instead.
In this article, we will cover the three steps required to implement this code:
- Customize the API for your form
- Adding the Snippet to your Page
- Disable Redirect
- Configure your Form Mapping in Chili Piper
- Generate your Snippet
1. Customize the API for your form
You will want to first copy and paste this code into a text or code editor, as there are a few changes you will need to make.
Add the following code to the advanced script footer of your landing page with the form:
<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>
var cpTenantDomain = "account_domain"; // replace with your subdomain
var cpRouterName = "router_name"; // replace with the router's name
var cpHSDataFormIDs = []; // if needed, add the data-form-id or keep empty to accept all forms.
window.addEventListener("message", function (event) {
if (["hsFormCallback", "hsCallsToActionCallback"].includes(event.data.type) && ["onFormSubmitted", "onCallToActionFormSubmitted"].includes(event.data.eventName)) {
if (cpHSDataFormIDs.length > 0 && !cpHSDataFormIDs.includes(event.data.id.toString())) return;
var lead=event.data.data.submissionValues;
for (var key in lead) {if (Array.isArray(lead[key])) {lead[key] = lead[key].join(";");}}
ChiliPiper.submit(cpTenantDomain, cpRouterName, {map: true, lead: lead});
}
});
</script>
1.1. Finding the Account Domain and Router Name
The account_domain and router_name are in your Chili Piper Router settings. You can confirm these are correct by navigating to "Embed for your form and Javascript for your Inbound Concierge" in your Router settings.
The first string, "calendar," is your account name, and the second string, "prod-testing-router," is your router name - you will want to copy this exactly when creating the API code.
1.2. Finding the HubSpot FormID
If you have multiple forms on your landing page and want Chili Piper triggered only for these forms, you must specify these HubSpot FormIDs in the snippet.
1.2.1. HubSpot Form
In HubSpot, navigate to Marketing > Forms. After clicking on the form, you should be able to find it in the browser's URL. You can also click the "Embed" button at the top right and find it in the pop-up that will open afterward.
1.2.2. HubSpot Calls-to-Action (CTAs)
In HubSpot, navigate to Marketing > CTAs. After clicking on the form, you should be able to find it in the browser's URL:
1.2.3. How to use the Form IDs
Knowing the Form ID, you can use it to set a value for the script's variable cpHSDataFormIDs:
var cpHSDataFormIDs = ["416a5cd2-1cd3-4e69-ad95-d14a0a2eff64"]
If you want to execute the same script for more than one HubSpot Form, you can include all IDs as a comma-separated list:
var cpHSDataFormIDs = ["416a5cd2-1cd3-4e69-ad95-d14a0a2eff64", "158587965749"]
2. Adding the Snippet to your Page
Once these two components are updated, you will want to add this code below the form on the page or in the footer.
If you use a HubSpot website/landing page, the place you add this code is the same in both HubSpot's legacy and beta versions. Settings -> Advanced (options) -> Footer HTML
3. Disable Redirect
To ensure that Chili Piper loads when the form is submitted, you should disable any complete page redirects in HubSpot. Chili Piper can add a redirect after booking within the Inbound Router settings.
You may need to disable the redirect on both the form and the landing page separately. Disabling it in one place may not disable it in both.
3.1. Landing Page
Click the form on the landing page to adjust the content.
3.2. Form Editor
Adjust the redirect from the "options" menu within the form editor
4. Configure your Form Mapping in Chili Piper
The Javascript API provides more control over how data is submitted upon form submission. When using the API, we have submitted the values using the Salesforce Lead Object structure, so this is how the fields will need to be mapped.
Process #2 in this help article outlines how to set up the correct mapping when using the API and actively passing values through the code.
5. Generate your Snippet
If you'd like to generate the snippet for your implementation with HubSpot Forms, you can do it below:
Add your domain and router name: