Concierge Snippet and API

Overview

With the Concierge Inbound Router, we offer two solutions to help convert your inbound leads into booked meetings:

1. 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 right calendar at the right time. 
2. JS API: Call Chili Piper from your JavaScript code, for full control of the workflow.
3. REST API. Server to Server. Most Advanced - Used primarily for InApp use-cases. Please contact support@chilipiper.com 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

Javascript API

Insert  marketing.js to your webpage.

Instead of passively using  ChiliPiper.scheduling , have your javascript code call our ChiliPiper.submit function:

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

Calling ChiliPiper.submit will trigger the following actions:

1. 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).
2. Call Chili Piper API endpoint.
   1. 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.
   2. The Router’s logic will be executed (based on Queues) and return the booking calendar link.
3. The booking calendar is displayed in an iFrame in a lightbox
4. Once the slot is selected and the meeting is booked, you can choose among 3 options: 1) provide us with redirection settings, the user will be redirected or 2) use the onComplete parameter, onComplete call back 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.

... validation & navigation & etc ...  
ChiliPiper.submit(subdomain, router, options = {})  
ChiliPiper.submit("byte2bite", "inbound-router") 
// Chili Piper collects data from the first form on the page 

ChiliPiper.submit("byte2bite", "inbound-router", { onSuccess: [Function] })
ChiliPiper.submit("byte2bite", "inbound-router", { formId: "perkboxForm" }) 
// Collects data from Specific Form ID 
ChiliPiper.submit("byte2bite", "inbound-router", { lead: [Object] }) 
// Submit custom Lead to Chili Piper  
ex. lead: should have Salesforce Lead structure   
{  FirstName: "John",   LastName: "Smith",  ... }

onSuccess is a callback function with signature.

function chiliPiperSuccess(details) { … } where details is an object that contains information about event and rescheduling link.

Options

const options = {      handleSubmit: boolean,      formId: string,      debug: boolean,      map: boolean,      domain: string,      router: string,      title: string,      titleStyle: string,  lead: {[Object]}    onSuccess: function,      onError: function,      onClose: function,      onRouted: function,   closeOnOutside: boolean,      dynamicRedirectLink: string,    mobileRedirectLink: string, injectRootCss: boolean, locale: language_code, webHook: URL }

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

<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 	  } 	},
	

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

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

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

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

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

<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>

<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>

injectRootCss: boolean

If you set injectRootCss: true as an option, then this allows you to add styling to the loading of the Chili Piper calendar. This will allow you to inject styling for the following page elements with your inApp Chili Piper preferences.  .chilipiper-popup-window; .fabe-book-loading; .routing-loader; .routing-loader-body; .routing-loader-body span;

Learn more about custom CSS. 

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

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. 

To set the options outside of the main script tag:

const options = {      onSuccess: function(data){          // ...      }, } ChiliPiper.submit("byte2bite", "inbound-router", options)