Form Booker Snippet and API

Overview

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. Currently, this solution works with Marketo, Oracle Eloqua & Unbounce. We’re also working on Pardot & Hubspot.
  2. JS API: Call Chili Piper from your JavaScript code, for full control of the workflow.

Getting Started

  • Make sure you create your Form Booker 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 Form Booker 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,      onSuccess: function,      onError: function,      onClose: function,      onRouted: function,   closeOnOutside: boolean,      dynamicRedirectLink: string,    mobileRedirectLink: string }
dynamicRedirectLink: string
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 you can pass us dynamic variables such as the lead ID
Ex: dynamicRedirectLink: "https://www.chilipiper.com"
mobileRedirectLink: string
This will only redirect for Safari and mobile browsers (and some old IE browsers). It will redirect both on success and on premature exits. For other browsers, the behavior selected in our app settings will apply.

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

Example

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

Still need help? Contact Us Contact Us