Skip to main content

Setting up Concierge with HubSpot Pop-Up Forms

Deyves Senger
  • Updated

This method can integrate a HubSpot Pop-Up form with Chili Piper. For Embedded Form, please refer to this article instead.

 

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

Customizing the Chili Code to add to your page

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>
var cpTenantDomain = "account_domain";
var cpRouterName = "router_name";
var formGuid = "HubSpot_Form_id";
window.addEventListener("message", function(event) {
  if (event.data.conversionId) {
    var lead = {};
    var fields = document.querySelectorAll('form[data-form-id="' + formGuid + '"] input,select');
    for (var i = 0; i < fields.length; i++) {
      lead[fields[i].name] = fields[i].value;
    }
    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.

 

Screen_Shot_2020-11-04_at_1.30.23_PM.png

 

The HubSpot_Form_id can be found on HubSpot by navigating to Marketing > Lead Capture > Forms then we need to find the target pop-up form that will be used and click on it.

After that, we can grab the HubSpot_Form_id from the URL as shown below (in this example, the Form Id is "ae2b6d7d-c4fe-4723-938a-e746ba87c597"):

 

 

Once these three components are updated, we can add the code to the page.

 

Implementing a HubSpot Pop-Up form and a regular HubSpot form on the same page

If you already have a HubSpot form on the same page and want to enable the HubSpot Pop-Up forms as well, the following code can be used that incorporates both implementations:

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>
var cpTenantDomain = "account_domain";
var cpRouterName = "router_name"; //tenant and router
var lead = {};
var formGuid = "HubSpot_Form_id"; //popup formID

window.addEventListener("message", function (event) {
  // code for HS PopUp Form
  if (event.data.conversionId) {
    var fields = document.querySelectorAll('form[data-form-id="' + formGuid + '"] input,select');
    for (var i = 0; i < fields.length; i++) {
      lead[fields[i].name] = fields[i].value;
    }
    ChiliPiper.submit(cpTenantDomain, cpRouterName, {
      map: true,
      lead: lead
    });
    // code for HS Embedded Form
  } else if (event.data.type === "hsFormCallback") {
    if (event.data.eventName === "onFormSubmit") {
      lead = {};
      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().replace(",", ";");
        }
        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>

Configure your Form Mapping in Chili Piper

Process #1 in this help article outlines how to set up the correct mapping to ensure we pass the right values through the code.

 

Generate Your Snippet

If you'd like to generate your snippet based on the options provided above, you can do it below:

Add your domain name and router name:

 

 

Related articles