This method works using a raw HTML form or embedding the HubSpot form in an <iframe>. For Pop-Up Form, refer to this article instead.
In this article, we will cover the three steps required to implement this code:
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 lead = {};
window.addEventListener("message", function (event) {
if (event.data.type === "hsFormCallback") {
if (event.data.eventName === "onFormSubmit") {
for (var key in event.data.data) {
if (Array.isArray(event.data.data[key].value)) {event.data.data[key].value = event.data.data[key].value.toString().replaceAll(",",";");}
lead[event.data.data[key].name] = event.data.data[key].value;
}
if(Object.keys(lead).length <= 1){lead = event.data.data;}
} else if (event.data.eventName === "onFormSubmitted") {
ChiliPiper.submit(cpTenantDomain, cpRouterName, {map:true,lead:lead});
}
}
});
</script>
The account domain and router name can be found in your Chili Piper Router. You can confirm you have these correct by navigating to Embed for your form. 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.
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 are using 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
Disable Redirect
To ensure that Chili Piper loads when the form is submitted, you will want to 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.
Landing Page
Click the form on the landing page to adjust the content.
Form Editor
Adjust the redirect from the "options" menu within the form editor
Configure your Form Mapping in Chili Piper
The Javascript API provides more control over how data is submitted upon form submit. When using the API, we have submitted the values using 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.