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:

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '2300073',
formId: '5ed000c-987d-4a113-b3r9-00034000ad00',

// replace the above portalId and formId with the values specific to your Hubspot form

onFormSubmit: function($form) {
var data = {}
$form.serializeArray().forEach(function(el) {
data[el.name] = el.value
})
ChiliPiper.submit('account', 'router', {
title: 'Thanks! What time works best for a quick call?',
titleStyle: 'Roboto 22px #EA5938',
map: true,
lead: {
FirstName: data.firstname,
LastName: data.lastname,
Email: data.email,
Company: data.company,
Phone: data.phone
},
})
},
})
</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. 

Add additional fields to the code

In the example code above we are referencing the following fields:

  FirstName: data.firstname, 
  LastName: data.lastname, 
  Email: data.email, 
  Company: data.company

It is only necessary to reference the essential fields here: First Name, Last Name, Email, and any other fields needed for routing. If you have Chili Piper ON to create leads in your Salesforce instance, then you may choose to map all of your form fields.

Form fields are mapped using Salesforce Lead Object API names, so to map additional fields you will want to reference the Lead name of the field as it appears in Salesforce with the exact capitalization and spacing, such as "FirstName" to the API name of the field as it appears in the form. You can find the field API name by inspecting the form using this process and looking for the string following the "name=" string in the code. 

Let's say for example we want to add this Company Size field in this form to our mapping: 

The Lead API name of this field in our Salesforce instance is: Company_Size__c and the field API name upon inspecting it is shown to be company_size_1

Our code will now look like:

FirstName: data.firstname, 
LastName: data.lastname, 
Email: data.email, 
Company: data.company,
Company_Size__c: data.company_size_1

Don't forget to add a comma in-between new lines!

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 are 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.