About Concierge Snippet and JS API

Demand Conversion Platform Users

This article is dedicated to users who haven't been upgraded to the Demand Conversion Platform yet or were/are former Legacy users. 

If you only had or have been upgraded to the Demand Conversion Platform instance in Chili Piper, check this article instead!

Use this when you have multiple form elements within 1 page to prevent the Chili Piper snippet from firing upon submitting the wrong form. If you add this option, your snippet will ONLY execute when the form you specify is submitted. 

For example, you wouldn't necessarily want Chili Piper to load when a customer submits a search bar query or newsletter sign-up.

<script>ChiliPiper.submit("account-name", "example-router", {
formId: "form_Id" })</script>

 

query: string

For advanced use cases, when the formId isn't generated on the page until load time or when the id is variable/dynamic. In these cases, we can query for any element that matches a string we provide instead.
Formatted as query: 'Element[attribute{^/*}="string"]'
^ = "starts with"
* = "contains"

query: 'form[id^="abc"]' - The Id starts with the characters you define
query: 'form[id*="abc"]' - The Id Contains the characters you define

Note: When a query is used, the formId option does not need to be included. 

As an extended example, this will trigger Concierge for all <form> elements, with a class name of "hubspot":

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>ChiliPiper.submit("domain", "inbound-router", { query: 'form[class*="hubspot"]' } )</script>

map: boolean

If this is set to map: true we will rely on the form mapping within Chili Piper to ensure your form values are associated with the proper Lead / Contact object. This is the default value on most forms.

If this is set map: false we will assume you are submitting values in the Salesforce Lead Object format. Custom field names will not be supported and may be mapped to Salesforce incorrectly (or not at all).

webHook: URL

To return the data upon booking to a specific location via webhook and inform you of reschedules, re-assignment, or cancellations, we need a webhook. We suggest you pass the URL for the webhook in each request. That way, you can change it at any time. So you will add a parameter in the Booking Request. Works with ChiliPiper.submit(), ChiliPiper.scheduling(), ChiliPiper.getQuery(), and ChiliPiper.showCalendar(). 

Example:

<script>
ChiliPiper.submit("account-name", "example-router", {
webHook: "https://hooks.zapier.com/hooks/catch/1127216/o1f1jpf/"
})</script>

The post when the webhook fires will be of the following format:

{
"routeId: "5a7c654a2b52873a2ce5df57",
"eventId": "5b2124533a906b5f0bff32ad",
"assigneeId": "00D1N000001S8LUUA0",
"actionType":"reassign",
"slot": { "start": 1536355315, "end": 1536356315 }
}

lead: {[Object]}

Helpful for running Chili Piper via a button click or within your web app. Pass parameters directly to ChiliPiper.submit() - This only works when using ChiliPiper.submit() and does not work with ChiliPiper.scheduling(). 

<script>ChiliPiper.submit("account-name", "example-router", {map:true,
lead: {
FirstName: "Test",
LastName: "Test",
Email: "test@test.com"}
})</script>

domElement: string

Valuable when you want to embed the calendar within a page or the modal window to load within a specific element of your site (i.e.: inline div) rather than as a popup.

domElement value can be either a selector (id, class, etc.) or a direct reference to the dom node. It will work in either case.

domElement: "#main",

More information on this setup can be found in this article.

onSuccess: function

This will call a function after a successful booking. A time-specific redirect can be defined within the Router UI under "Router Redirect," this option is not always required and is used with more custom form integrations. 

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>ChiliPiper.submit("account-name", "example-router", {
onSuccess: someFunction() })</script>

onError: function

This will call a function when a lead is submitted but does not match any queue rules and cannot be routed. Thus no calendar is displayed. This is usually when someone is disqualified from booking. A redirect can be specified within the Router UI under "Router Redirect," this option is not always required and is used with more custom form integrations. 

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>ChiliPiper.submit("account-name", "example-router", { onError: someFunction() })</script>

onClose: function

This will call a function when a lead is submitted and displays the option to book (meaning the lead has qualified for a meeting) but exits the booking module.  A redirect can be specific within the Router UI under "Router Redirect," so this option is not always required and is used with more custom form integrations. 

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>ChiliPiper.submit("account-name", "example-router", {
onClose: someFunction() })</script>

onRouted: function

This will call a function when Chili Piper has received a lead's submission and a routing attempt has been made, whether successful or not. This will occur before the onSuccess, onError, or onClose functions are executed to indicate routing has begun.

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>ChiliPiper.submit("account-name", "example-router", {
onRouted: someFunction() })</script>

More on these Callback methods can be found in this article with sample use cases. 

 

closeOnOutside: boolean

This is a DOM listener option. By default, it is set to false, and clicking the "X" within the booking module will close the calendar UI. When you select the option closeOnOutside: true, this will allow the Chili Piper booking module to be "closed" when the lead clicks outside the booking frame. Any redirect settings for those who don't book or the onClose: function will be triggered when the lead clicks outside the module. We recommend against enabling this option for conversion purposes to prevent accidental closures unless there is a specific reason. 

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>ChiliPiper.submit("account-name", "example-router", {
closeOnOutside: true })</script>

This will overwrite all redirect options for all browsers and redirect to that URL, both on success and if the user exits before booking. The URL can be anything so that you can pass us dynamic variables such as the lead ID

Ex: dynamicRedirectLink: "https://www.chilipiper.com"

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>ChiliPiper.submit("account-name", "example-router", {
dynamicRedirectLink: "https://www.chilipiper.com" })</script>

This will only redirect mobile browsers (and some old IE browsers). It will redirect both on success and premature exits. For other browsers, the behavior selected in our app settings will apply.

Ex: mobileRedirectLink: "https://www.chilipiper.com"

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>ChiliPiper.submit("account-name", "example-router", {
mobileRedirectLink: "https://www.chilipiper.com" })
</script>

This allows you to force a specific language in which you would like to serve the Chili Piper calendar for the respective page/user. 

Requirements: You must have the language enabled in your Global Master Admin Language settings. 

If set true, it supports enhanced Account-Level disqualification when the record doesn't yet exist in Salesforce.

When we match a domain to an Account, and the Account-based rules fail, we will prevent the "fallback" that would otherwise proceed to evaluate the rules as Lead-based and disqualify the prospect.