Setting up Concierge with HubSpot Forms

In this article, we will cover the steps required to implement Chili Piper with HubSpot Forms

Table of Contents

• HubSpot Setup
• Chili Piper Setup
• Test and Deploy your Snippet

HubSpot Setup

First, we will share some steps that need to be done on HubSpot's side to ensure a smooth integration with Chili Piper.

1. Disable Redirect

To ensure that Chili Piper loads when the form is submitted, disable any complete page redirects in HubSpot; otherwise, the redirect might be triggered first, and prospects will not see calendar slots to book a meeting.

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

1. In the left-hand menu, navigate to Content > Landing Pages
   
   
   
2. Click the landing page you want to edit
   
   
3. Click the form, and a menu will launch on the left. Scroll down until you find Thank you. Set as below, using the Display an inline thank you message option.
   

HubSpot Forms Editor

1. Navigate to Marketing > Forms in HubSpot's left-hand menu:
   
   
   
2. Hover the mouse on the form you want to update, and click Edit:
   
   
3. Select the Thank you message option in the Options tab.
4. Click update in the top-right once done.

2. Finding the HubSpot FormID

HubSpot Embedded Form

If you have multiple forms on your landing page and want Chili Piper triggered only for these forms, you must specify these HubSpot FormIDs in the snippet. If this is not your case, this step can be skipped.

1. Navigate to Marketing > Forms.
   
   
   
2. After clicking on the form, you should be able to find it in the browser's URL. You can also click the "Embed" button at the top right and see it in the pop-up that will open afterward.
   

HubSpot Calls-to-Action (CTAs)

1. In HubSpot, navigate to Marketing > CTAs in the left-hand menu:
   
   
   
2. After clicking on the form, you should be able to find it in the browser's URL:

Chili Piper Setup

Now, it's time to move to Chili Piper to finish the setup in-app and get ready to receive meetings!

1. Set up your Data Fields

Data Fields are reusable properties used throughout the Chili Piper's Demand Conversion Platform platform. They allow you to capture visitor data against a data type structure and sync it to mapped CRM fields.

Check this article to learn how to set up your Data Fields. If you have already done it, proceed to the next step.

2. Map your Webform

We must map all relevant form fields in the Concierge Router's Trigger. This step is required to ensure Chili Piper can collect the data submitted by your prospects and use them in your Routing Rules.

1.  In the left-hand menu, under Concierge, click Routers
   
   
   
2. Open the Router you want to embed and click the Trigger. If you do not have a Router yet, click the Create Concierge Router button in the top-right and the Trigger will open immediately.
   
   
3. Enable the Webform is submitted option in the Trigger
   
   
   
4. Now, we need to ensure all relevant form fields are mapped in the Trigger. Take benefit of the Find Form button to auto-map your form fields and save some time!
   
   We recommend checking this article for a more detailed view of form mapping.

3. Copy your JavaScript Snippet

Once your form mapping is ready, it's time to collect the JavaScript snippet we will use to embed Chili Piper on your landing page.

1. On the Router's page header, click Embed
   
   
   
2. Click Show next to On a Website
   
   
3. Select HubSpot in the Form Type dropdown
   
   
   
4. If you have multiple forms on your landing page, you will likely want Chili Piper triggered only for these forms. If that's not your case, skip to step #5. If that's the case, paste the HubSpot FormID collected previously in the FormIDs field.
   
   
   
5. Click Copy in the Code Snippet box to copy your Snippet. The variables (domain and router names, and formIDs - if applicable) are already applied to the Snippet.
   

Test and Deploy your Snippet

Before moving to production, we always recommend testing in a Staging/Testing environment to ensure everything works as expected.

1. In the left-hand menu, navigate to Content > Landing Pages
   
   
   
2. Click the landing page you want to edit
   
   
3. Add your Snippet to your testing landing page in Settings -> Advanced (options) -> Footer HTML
   
4. Once your tests are completed successfully, you can follow the same steps above to include the Snippet in your Production landing page.