Skip to main content

Chili Piper + Gravity Forms - Running Concierge Fire on the same page as the Form

Oladele Ogunade
  • Updated

Who can use this feature?

Available on Concierge
Available to Admins Workspace Managers
Billing Center Get a Demo

This integration is unique to Gravity Forms. To follow this guide, you must have the Gravity Forms plugin installed on your WordPress site.

In this article, we will cover how to run Chili Piper on the same page as the form.

⚠️ If you haven't been upgraded to the Demand Conversion Platform yet, you may want to check this article instead.

Table of Contents

Pre-Setup Notes

Before we start, just so you know, if you use Pardot Form Handlers, you will not need to change your Gravity Form, but the Chili Piper configuration will be within your Pardot Form Handler configuration. Please see this article for more details!

If you use a method that redirects to a thank you page to run Chili Piper, as opposed to running Chili Piper on the same page as the form, you should check this article instead.

How Does This Method Work?

Gravity Forms will not redirect to a thank you page for booking, and the full experience will happen on the same page as the form by adding the Chili Piper snippet into two different spots:

  • The parent page or the page on which the form is being loaded. 
  • The Gravity Forms "Confirmations" section.

We recommend setting up a test form and page first before deploying in a live environment.

Also, you must have the Gravity Forms plugin installed on your WordPress site.

Setup Instructions

1. Map form in Chili Piper and get Code snippet

Go to Concierge Router in Chili Piper and "Open" the router configured for your web form. Click on the Trigger "Webform is submitted" and ensure the Form Field Name matches your webform field names. See this article for more on mapping.

Once your form mapping is done, the next step is to get the code snippet to be used in Gravity form and on the parent page where the form will be loaded.

Click on the "Embed" section within the router flow builder. 

  • Click "On a Website" and select "GravityForms" from the Form Type dropdown. Then, select the option "Without a Redirect Page" from the Location dropdown. A code snippet like the screenshot below should be generated. The snippet has two scripts, which we have labeled 1 and 2. 
    • 1. To be added to the parent page or the page on which the gravity form is being loaded.
    • 2. To be added in Gravity Forms' "Confirmations" section.

Copy the code!


 

2. Add Chili Piper script to the page where Gravity Form is being loaded

As mentioned in the section above, we need to add the script labeled "1" in the above screenshot to the parent page or the page where your gravity form is being loaded. This script is for loading our concierge.js library and looks like the code below:

<script src="https://domain.chilipiper.com/concierge-js/cjs/concierge.js" crossorigin="anonymous" type="text/javascript"></script>

It should look something like the below:

Note that it doesn't necessarily matter where you add this code to the page, just somewhere on the page. Adding this part of the code via Google Tag Manager, if you prefer, is also acceptable. 

 

3. Add Chili Piper script to Gravity Forms Confirmations section

Within Gravity Forms:

  1. Go to the Form → Settings → Confirmations

  2. Edit the "Default Confirmation" within Gravity Forms

  3. Here we add the other part of the Chili Piper snippet labeled "2" in the previous section. This other part looks like the code below:
    <!-- Add the following code to the confirmations section. Remember to replace the field values according to the GravityForms data -->
    <script>
    typeof ChiliPiper !== 'undefined' && ChiliPiper.deploy("domain", "router", {
    "formType": "GravityFormsOnFormPage",
    "lead": {
    "FirstName": "REPLACE",
    "LastName": "REPLACE",
    "Email": "REPLACE"
    }
    })
    </script>
    Check that selected "Confirmation Type" is Text and Disable auto-formatting


  4. In the Confirmation section in Gravity Form, insert the respective merge tags and add in any other key-value pairs of form values that need to be submitted to Chili Piper for routing purposes.
    • When adding other form values, such as Company, Phone, Country, Title, etc to pass along to Chili Piper, 
      • Do not add any spaces in your key-value pairs. 
      • Remember to add a Comma when adding additional fields.

        Instead, remove any spaces or add an underscore, like so:

 

Save Confirmation in Gravity.

 

Save changes made to your parent page and test by submitting the form. 

Related articles