Using Chili Piper's Javascript API instead of Snippet in Marketo

Chili Piper's Javascript API

When there are multiple <form> tags on the page HTML, Chili Piper's javascript executes twice when it should only be happening once.  If you need both, we will need to integrate our Javascript API directly into your Marketo form.

Javascript API will call Chili Piper from your JavaScript code, for full control of the workflow.

Instructions

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

Example

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

Still need help? Contact Us Contact Us