Implement Concierge with your Pardot Form: Full Page Redirect

When using Standard Pardot Forms that are embedded as an iframe and trying to integrate Chili Piper, we run into two problems:

1. Field names that are random strings of numbers and are not easily read by humans
2. The Concierge scheduler attempts to load within the iframe itself, which can sometimes be the incorrect directions

To circumnavigate these two issues and make Chili Piper function seamlessly with a Pardot form, we instead automatically redirect the page after the form is submitted to a new page and execute our javascript there. This allows us to run Chili Piper using query string parameters.

This article will cover how to successfully implement Chili Piper with Pardot forms embedded in an iframe:

• Create a page to run Chili Piper on
• Add custom code to your Pardot form settings
  • Look and Feel - Below Form Code
  • Completion Actions - Thank You Code
• Add ChiliPiper.getQuery()

Create a page to run Chili Piper on

Create an intermittent "thank you" page to run Chili Piper on. This thank you page does not need any content or copy, but can include please wait while the calendar loads language if you prefer, as there may be up to one or two seconds of loading time. 

Once you have this page created, open it up in a new tab as you will need the URL for Step 2.

Add custom code to your Pardot form settings

Look and Feel - Below Form Code

In Pardot navigate to your form, under "Look and Feel" open the "Below Form" Source code, and add the script below 

<script>
document.querySelector('input[type="submit"]').addEventListener('click', () => {
const inputs = document.querySelector('form').querySelectorAll('input')
const select = document.querySelector('form').querySelectorAll('select')
let data = {};
inputs.forEach(el => {
data[el.name] = el.value
})
select.forEach(el => {
data[el.name] = el.options[el.selectedIndex].innerHTML
})
localStorage.setItem('chilipiper', JSON.stringify(data))
})
</script>

// Stores the form values to localStorage
// Saves the <select> inputs to localStorage based on their display names, not their system names since they are random strings of values

As shown here:

Hit Confirm & Save

Completion Actions - Thank You Code

In the Completion Actions of the form settings, navigate to Thank You Code  and add the following:

<script>
var cpData = JSON.parse(localStorage.getItem('chilipiper'))
window.parent.location.href = "https://URL/?FirstName=" + cpData['213062_103884pi_213062_103884'] + 
"&LastName=" + cpData['213062_103886pi_213062_103886'] + 
"&Email=" + cpData['213062_103888pi_213062_103888'] +
"&Custom_Field__c=" + cpData['213062_103888pi_213062_103890'];
</script>

// Retrieves each variable from localStorage by their system name and converts it to the variable name we want to call it 

As shown here:

Line 3 of this script includes the location of where your thank you page URL from the first step will need to go:

window.parent.location.href = "https://URL/?FirstName="

While on this step, you will also want to confirm that your form's redirect is not enabled:

This code may require additional customization that's dependent on the form fields you use for routing. At a minimum: First Name, Last Name, and Email are required and the configuration shown can be used as-is. In addition to these three fields, the only other required fields are those being used in your Queues for routing purposes.

You will want to add a line for each field you wish to add to this code. You can copy and paste the following and update it with the respective field information:

+ "&Custom_Field__c=" + cpData['213062_103888pi_213062_103890'];

Where cpData['213062_103888pi_213062_103890'] is the field name from Pardot found by inspecting the field API name and the string in quotes following the ampersand and "&Custom_Field__c=" is the Salesforce Lead object name of the field we are referring to - this is the new variable name for this field and we will follow the mapping instructions here to map your form in Chili Piper using the Salesforce Lead Object structure.

Add ChiliPiper.getQuery() to your thank you page

Set up Chili Piper on your thank you page