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

This integration is unique for Gravity forms. You must have the Gravity Forms plugin installed on your WordPress site to follow this guide. This new method will only be used you are simply using only Gravity Forms + Chili Piper. 

Note: If you use Pardot Form Handlers, you will not need to change your Gravity Form but the configuration for Chili Piper will be done within your Pardot Form Handler Configuration. Please see this article. The prior linked article uses a method that redirect to a thank you page to run Chili Piper, as opposed to running Chili Piper on the same page as the form. 

How this method works

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 Javascript into 2 different spots:

1) To Gravity Forms' "Confirmations" section.
2) The marketing.js library code will need to be added to the parent page, or the page that the form is being loaded onto. 

Step-by-Step Instructions - we recommend starting with a test form and page first before deploying in a live environment

1. Go to Settings → Confirmations

2. You will want to edit and use the "Default Confirmation" within Gravity Forms

3. Paste the Chili Piper code below as Text & Disable auto-formatting

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>
function q(a){return function(){ChiliPiper[a].q=(ChiliPiper[a].q||[]).concat([arguments])}}window.ChiliPiper=window.ChiliPiper||"submit scheduling showCalendar submit widget bookMeeting".split(" ").reduce(function(a,b){a[b]=q(b);return a},{});
ChiliPiper.submit("DOMAIN", "ROUTER", { 
map: true,
lead:
{
FirstName: "REPLACE",
LastName: "REPLACE",
Email: "REPLACE",
}
})
</script>

Important Notes:

• Replace "DOMAIN" with your Chili Piper account domain and "ROUTER" with a router name.
  • You can find those in the Router Settings - Embed for your 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 added any spaces in your key value pairs. 
  • Do not forget to add a Comma when adding additional fields

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

The value in which you define these key value pairs is arbitrary and you can define as you see fit, given we will simply map to however you define it in your Chili Piper form mapping via the form you have mapped against your Router within Chili Piper, like so:

4. Lastly, you will need to add the following Chili Piper script for loading our marketing.js library to the parent page where your gravity form is being loaded from. 

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript" async></script>

Like so:

*it doesn't necessarily matter where you add this code into the page, just somewhere on the page. Adding this part of the code via Google Tag Manager if you prefer is acceptable as well. 

5. Publish the changes and test by submitting the form. 

You should expect to see the calendar load after the form is submitted and the form data that you are passing to us showing in the "Reports" section of Chili Piper under "Prospect History" by hovering over the name and email of the record in the Reports, like so:

If you have any trouble setting this up or would like us to review your configuration, please contact your Customer Success Manager or email support@chilipiper.com, ideally supplying us a link to your testing page for us to take a look!