Capturing Javascript Messaging in Browser

Who can use this feature?

Our JS client code broadcasts custom events to your browser when Chili Piper is loaded within a page. These messages can be captured via an event listener or used with analytics apps to track when these actions occur.

• How to set up the Event Listener
• Action Messages
  • Concierge and Chat
  • ChiliCal - Scheduling Links
  • Chat Only
• Use-cases

How to set up the Event Listener

Example 1

This example is provided for illustrative purposes only, as you would likely want to capture this event data in a more helpful way than presenting it to the console log. Note that the data is presented in JSON format below.

<script>
window.addEventListener("message", (event)=>{
   console.log("event.data " + JSON.stringify(event.data))
}, false);
</script>

The above example would output something like this to the dev Console, depending on the message/event (see below-supported events).

event.data {"action":"availability-loaded"}

Example 2

Consider printing out all of the actions as they happen during the booking flow:

window.addEventListener("message", (event)=>{
   console.log(event.data['action']);
}, false);

With this in mind, you can see how you could obtain the value of event.data['action'] which will be one of the action messages listed below.

You could run additional scripts based on the value you receive, such as tracking an event when a meeting is "booked" versus "availability-loaded" to determine conversion rates.

Action Messages

The following is a list of currently supported actions for which we will send messages, along with their corresponding workflow locations.

Concierge and Chat

Note that for Chat, these events will only be visible if a meeting is booked during your Chat Journey. Chat has other exclusive events, which are mentioned a little bit further below.

ChiliCal - Scheduling Links

Chat Only

Example of a "booked" event:

{ routeId: "5a7c654a2b52873a2ce5df57" }

Example of a "booking-confirmed" event:

{
"routeId": "5a7c654a2b52873a2ce5df57",
"eventId": "5b2124533a906b5f0bff32ad",
"assigneeId": "0051N000001S8LUUA0",
"slot": { "start": 1536355315, "end": 1536356315 }
}

Note: If the prospect closes the window before the second message is passed, you will not get the event data, but it could be retrieved with the routeId when a webhook is implemented

This cannot be used for reassignments as they are not done with an online calendar. Instead, we would capture these with a webhook as well. 

Use-cases

Tracking

One of the primary use cases for these messages is that you can track, with great granularity, the booking flow. This can help you view when customers drop off the booking flow or track how many convert.

Tracking pixels, or analytics apps from Google, Meta (Facebook), etc., will be able to capture these actions to empower your data.

For an example of how you can accomplish this with Google Analytics, view this article here. 

Custom actions

Let's say you want a user to redirect to a specific page if they are presented with no free slots (e.g.: redirect them to a catch-all calendar). You may want to send them to a page to re-convert them if they take no action after x seconds. 

You can create a custom function to send the user to a different page by watching for the specific action types.

It's not limited to redirects, though! You can also engage them with a chat widget, or pop up a promotional discount based on the action they take - this is up to you!

Examples:

Execute any action when the prospect closes the modal without picking a time slot:

<script>
window.addEventListener("message", captureEvent, false);
function captureEvent(event) {
   if(typeof (event.data) === 'object'){
     const action = event.data.action;
     if (action == "no-action-choice"){
          // pop up our discount code
     }
   }
}
</script>

Execute any action when the prospect is disqualified:

<script>
window.addEventListener("message", function(event) {
    if (event.data.action == "prospect-disqualified") {
        // execute your code here
    }
});
</script>