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
Example 1
This example is for illustrative purposes only, as you would likely want to capture this event data in another helpful way rather 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 we will send messages for and where they will appear in the workflow.
| booked |
A success message was sent before running our booking workflow, so we have the assignee and time slot but not the eventId nor the confirmation that the transaction went through. Here, you can capture the "routeId". |
| booking-confirmed | Second booking confirmed screen at the end of the booking workflow. This message will include the meeting information and eventId |
| availability-loaded | When the available slots of the calendar are loaded. Useful in conjunction with no free slots when no slots are available. |
| rescheduled | When a meeting reschedule workflow is started. |
| prospect_cancel | When the prospect cancels a meeting via public cancel URL |
| no-free-slots | If the calendar loads, but no rep is available on the queue. No slots will be available. Useful in conjunction with the availability-loaded event. |
|
close |
Prospect didn't take any action and clicked "X" when presented with multiple options. |
|
phone-selected |
Prospect selected the "phone" option. |
|
meeting-selected |
Prospect selected the "meeting" option. |
|
video-selected |
Prospect selected the "video" option. |
|
phoneClose |
Broadcast when a phone call has been completed/ended |
|
timeslot-selected |
Shows which timeslot and timezone were selected during the booking process. It also shows the meeting's duration. Example: {"action":"timeslot-selected","args":{"time":"2023-08-24T12:30:00.000Z","timezone":"America/Chicago","duration":30}} |
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!
<script>
window.addEventListener("message", captureEvent, false);
function captureEvent({data}) {
if(typeof (data) === 'object'){
const action = Object.keys(data)[0];
if (action == "no-action-choice"){// pop up our discount code
}
}
}
</script>