Do you want to load Chili Piper automatically on a redirect or thank you page? Sometimes, your form provider requires this kind of redirect, or you're pulling the values from some other marketing system dynamically.
In most cases you will want to do this with Chili Piper's "getQuery" function. For more on that, see this article as its setup and design is much easier to maintain.
The below use-case is unique to if you want to provide additional values to Concierge after the page has already been redirected, or if you want to do some other conditional logic as to which router to display, etc.
For all other examples, we would strongly recommend going back and trying getQuery first.
Example
Let's say you have a thank you page, such as:
https://www.chilipiper.com/thank-you
Upon submitting the form, the user is redirected to that page, but with query parameters added:
https://www.chilipiper.com/thank-you/?Email=test@test.com&FirstName=Frank&LastName=Zappa
* "Email" is required as a parameter for this to work.
Even though it's the same page as before, the fact that you've added URL parameters to the page will cause Chili Piper to wake up and load up a calendar to book!
Not only that, but Chili Piper will use these values in your form mapping and can automatically update the Lead / Contact in Salesforce with these values, so you don't have to.
The values don't need to be in SFDC Lead format, but you will need to make sure the names of the parameters match what you have mapped in Chili Piper for this router.
The code
Insert this code somewhere in the thank you or redirect page.
This code will only run Chili Piper when query strings are added to the URL.
Replace "Domain" and "Router" with those found in your inbound router settings:
The domain and router are the only things you'll want to copy over - we're replacing the rest with this:
<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>
const tenantDomain = "DOMAIN"; // replace
const routerName = "ROUTER"; // replace
var leadValues = {};
var uri = decodeURIComponent(
window.location.href.split("?").length > 1 ? window.location.href.split("?")[1].replace(/\+/g, " ") : ""
);
var urlParams = new URLSearchParams(uri);
var entries = urlParams.entries();
var valid = false;
for (pair of entries) {
if (pair[0].toLowerCase().includes("Email")) {
valid = true;
}
leadValues[pair[0]] = pair[1];
}
if (valid) {
ChiliPiper.submit(tenantDomain, routerName, {
map: true,
lead: leadValues,
});
console.log(leadValues);
}
</script>
As noted before, you would likely use this code if you are adding additional values to the lead object after it has been routed to the redirect page. If you are doing that, be sure to add them to the "leadValues" array!
Note: "Email" parameter in the URL is a required field for all submissions! This will need to be included for the query to work. It can be adjusted in the code above if you have another field name in use.
If you want Chili Piper to create the Lead / Contact, you will also need to ensure you are including any required SF fields such as LastName, or this may also fail.