Using the Javascript API with Hubspot

If the Hubspot form you are using is in an <iframe> (rather than raw HTML), then you will want to use the Javascript API as outlined below, rather than our javascript snippet. 

How do I know if my Hubspot form is using raw HTML or an iFrame?

Go to your Hubspot form → Edit → "Style & preview"

If your toggle for "Set as raw HTML form" is DISABLED, then you are in the right spot and continue with this article.

 In this article we will cover the three steps required to implement this code:

• Customize the API for your form
• Configure your Form Mapping in Chili Piper

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 footer of your landing page with the form -->
<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>
const cpTenantDomain = "[[cp_domain]]"; // REPLACE and remove square brackets
const cpRouterName = "[[cp_router]]"; // REPLACE and remove square brackets
//
// No changes needed from this point
//
// Listen for form submitted message
window.addEventListener("message", (event) => {
if (event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmit") {
var lead = event.data.data.reduce((obj, item) => Object.assign(obj, { [item.name]: item.value }), {});
console.log(lead);
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 this code below the form on the page or in the footer.

In order to ensure that Chili Piper loads when the form is submitted, you will want to disable any full page redirects in HubSpot. Chili Piper has the ability to add a redirect after booking within the Inbound Router settings. 

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 in more detail how to set up the correct mapping when using the API and actively passing values through the code.