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
• Add additional fields to the code
• 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:

<!-- Replace your current hubspot embed form code with the below, replacing the portalId and formId from your account -->
<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
const hsPortalID = "[[hs_portal_id]]"; // REPLACE
const hsFormID = "[[hs_form_id]]"; // REPLACE
const cpTenantDomain = "[[cp_domain]]"; // REPLACE
const cpRouterName = "[[cp_router]]"; // REPLACE
//
// No changes needed from this point
//
function handlerSubmit(elements) {
var leadObj = {};
// Validate required form input values
for (var i = 0, element; (element = elements[i++]); ) {
if (leadObj[element.name]) {
leadObj[element.name] = leadObj[element.name] + ";" + element.value;
} else {
leadObj[element.name] = element.value;
}
}
return leadObj;
}
hbspt.forms.create({
portalId: hsPortalID,
formId: hsFormID,
onFormSubmit: function ($form) {
var data = handlerSubmit($form.serializeArray());
console.log(data);
ChiliPiper.submit(cpTenantDomain, cpRouterName, {
map: true,
lead: data,
});
},
});
</script>

The portalId and formId highlighted in red can be found within your existing Hubspot form, you will want to copy these exactly as they currently appear in your form settings and place the values inside the quotes.

The portalId will be the same across all of your forms, and the formId will be specific to the form you are integrating with Chili Piper.

The account 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 replace your existing Hubspot form code entirely with this new code. Your existing code references hbspt.forms.create and the formIds in the same way the above one does - if you leave them both in you might notice a duplicate of your form on the page. 

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.