Overview
With the Concierge Inbound Router, we offer two solutions to help convert your inbound leads into booked meetings:
- Embedded Snippet: Just insert it in your form and post-form pages. Everything will work the same as before except that your qualified prospects will be prompted to book a meeting with the correct calendar at the right time.
- JS API: Call Chili Piper from your JavaScript code to fully control the workflow.
- REST API. Server to Server. Most Advanced - Used primarily for InApp use-cases or in cases where including third-party scripts is not possible. Please get in touch with your Customer Success Manager or Chili Piper Support for more documentation around this method.
Getting Started
- Make sure you create your Inbound Router in our admin. Directions on how to create your first inbound router here
- You have to make sure your Salesforce settings are correct (you need a “Default Booker” with write access to create your leads in Salesforce).
- Make sure you add the queues that specify rules for booking (e.g., mid-size companies get routed to the mid-size account executive team on a round-robin basis).
- At the bottom of the router, you will find the code you need to embed per below.
Embedded Snippet
Chili Piper embedded snippet collects data from forms in the background via the DOM.
The code to insert is:
<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>ChiliPiper.scheduling("byte2bite", "inbound-router")</script>
where
ChiliPiper.scheduling(subdomain, router, options)
subdomain = sub domain of account
router = id of form scheduler
options = additional options (see below)
Javascript API
Insert marketing.js
to your webpage.
Instead of passively using ChiliPiper.scheduling
, have your javascript code call our ChiliPiper.submit function:
<script>ChiliPiper.submit("domain", "inbound-router")</script>
<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
Calling ChiliPiper.submit
will trigger the following actions:
- Collect form data if there is a form in the page (including hidden values) and/or receive key-value data as parameters in the Options object (they will be merged if you’re using both).
- Call Chili Piper API endpoint.
- Optionally (based on Concierge settings), the Lead/Contact will be created in Salesforce or updated if it exists, with the form values, including hidden value.
- The Router’s logic will be executed (based on Queues) and return the booking calendar link.
- The booking calendar is displayed in an iFrame in a lightbox
- Once the slot is selected and the meeting is booked, you can choose among three options: 1) provide us with redirection settings, the user will be redirected or 2) use the onSuccess parameter, onSuccess callback will be executed or 3) nothing, the user can just close the box.
To pass on parameters, use the Salesforce Lead object’s data structure – you can find it at Workbench or Salesforce Developers. More details on the lead: {[Object]} option below.
Options
const options = {
skipFormFallbackUponAccountDQ: boolean,
formId: string,
query: string,
debug: boolean,
map: boolean,
domain: string,
router: string,
title: string,
titleStyle: string,
lead: {[Object]},
onSuccess: function,
onError: function,
onClose: function,
onRouted: function,
domElement: string,
closeOnOutside: boolean,
dynamicRedirectLink: string,
mobileRedirectLink: string,
locale: language_code,
webHook: URL,
disableRelation: boolean,
skipOwnershipLogic: boolean,
ownerId: SFDC_UserId,
event: {[Object]},
}
<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.
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 incorrectly (or not at all) to Salesforce.
webHook: URL
To return the data upon booking to a specific location via webhook, and also to inform you of reschedules, re-assignment or cancellations, we need a webhook. We suggest that 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>The post when the webhook fires will be of the following format:
ChiliPiper.submit("account-name", "example-router", {
webHook: "https://hooks.zapier.com/hooks/catch/1127216/o1f1jpf/"
})</script>
{
"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 webapp. 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
Useful for when you want to embed the calendar within a page or when you want the modal window to load within a specific element of your site (ie: 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 within 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" 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", {
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 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", { onError: someFunction() })</script>
onClose: function
This will call a function when a lead is submitted and is displayed 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 a lead's submission has been received by Chili Piper 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>
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 set the option closeOnOutside: true, this will allow the Chili Piper booking module to be "closed" when then lead clicks outside of the booking frame. Any redirect settings for those who don't book or the onClose: function will be triggered when the lead clicks outside of the module. For conversion purposes for preventing accidental closures, we recommend against enabling this option 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>
<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>
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>
locale: language_code
Here are all the supported languages and respective locale codes to use when passing this parameter to us.
Ex:
<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>ChiliPiper.scheduling("account-name", "router-name", {
locale: "de_DE" })
</script>
The example above would force the calendar to render in German, regardless of the users' browser settings, per the { locale: "de_DE" }
option.
event: {[Object]}
Like our REST API, you can pass custom field values through to the Event object using the following format. Useful if you want to not only map fields to a Lead/Contact, but also to an Event during the booking process.
<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>ChiliPiper.submit("account-name", "router-name", {
event: { your_custom_field__c: "12345" }
})
</script>
Unlike our REST API, the event object sits nested within the options object.
To set the options outside of the main script tag:
const options = { onSuccess: function(data){ // ... }, } ChiliPiper.submit("byte2bite", "inbound-router", options)