Using the ChiliPiper.submit or ChiliPiper.deploy function in your Chili Piper Javascript Snippet provides callback methods. There are a lot of possibilities you can do with the callback methods based on the status of the popup and booking.
Below are some of the callback methods that can be used in the Chili Piper snippet.
onSuccess: function
This will call a function after a successful booking has completed.
A common use-case would be if you want some action to trigger after completion such as initiating a tracking pixel or pushing data to an analytics script.
You don't need to handle redirects with onSuccess as those are managed within the router's flow UI, however advanced use-cases for redirecting could be performed here as well.
<script id="chilipiper-concierge" src="https://fire.chilipiper.com/concierge-js/cjs/concierge.js" crossorigin="anonymous" type="text/javascript"></script>
<script>
ChiliPiper.deploy("account-name", "example-router", {
onSuccess: ()=>{
// perform some code action here such as tracking a successful conversion
}
})
</script>
onError: function
This will call a function when an error occurs during the submission, resulting in the prospect not being able to get routed through a path, and thus no calendar is displayed.
This typically happens if there are errors in the rules logic, an issue with the CRM data, a router is disabled, or any other general router issue.
This function could be used to handle these unfortunate conditions such as capturing data for logging or to show a customized experience to the end-user, knowing they didn't see a calendar.
You don't need to handle redirects with onError as those are managed within the router's flow UI, however advanced use-cases for redirecting could be performed here as well.
<script id="chilipiper-concierge" src="https://fire.chilipiper.com/concierge-js/cjs/concierge.js" crossorigin="anonymous" type="text/javascript"></script>
<script>
ChiliPiper.deploy(“account-name”, “example-router”, {
onError: ()=>{
// Perform some action such as logging the error
}
})
</script>
onClose: function
This function triggers once the modal is closed at any point after the lead submission is successfully routed, thus not completing the booking.
A sample use-case may be if you want to trigger a call to action (CTA) when they close out and don't complete the booking.
<script id="chilipiper-concierge" src="https://fire.chilipiper.com/concierge-js/cjs/concierge.js" crossorigin="anonymous" type="text/javascript"></script>
<script>
ChiliPiper.deploy(“account-name”, “example-router”, {
onClose: ()=>{
//Log successful submission however closed the calendar
}
})
</script>
closePopup: function
This function can be used to actively close the popup modal, ending the scheduling / routing, effectively resetting the router's state.
If you intend to launch Chili Piper's Concierge again after the modal has been closed, this method needs to be called at least once to reset the router state. Concierge cannot otherwise be called repeatedly on the same page.
<script id="chilipiper-concierge" src="https://fire.chilipiper.com/concierge-js/cjs/concierge.js" crossorigin="anonymous" type="text/javascript"></script>
<script>
function someOtherAction(){
// Perform some other actions or wait for conditions then, close Chili Piper to reset it
ChiliPiper.closePopup();
}
</script>
onRouted: function
This will call a function when Chili Piper has received a lead's submission and a routing attempt has been made, whether successful or not. This will occur before the onSuccess, onError, onClose, or onBeforeSubmit functions are executed to indicate routing has begun.
<script id="chilipiper-concierge" src="https://fire.chilipiper.com/concierge-js/cjs/concierge.js" crossorigin="anonymous" type="text/javascript"></script>
<script>
ChiliPiper.deploy(“account-name”, “example-router”, {
onRouted: ()=>{
//Log successful routing after submission, the booking process has begun
}
})
</script>
onBeforeSubmit: function(object)
This function can be used to manipulate the lead data before the data is transmitted to Chili Piper, and before a successful submission occurs.
The most common use-case would be to pass data field information to the router for routing or tracking purposes that may not otherwise appear on a web form.
The object format should be JSON and can be used to either overwrite or append lead data.
Appending lead data
In this example, we have an email and FirstName, but are adding / appending a LastName value
<script id="chilipiper-concierge" src="https://fire.chilipiper.com/concierge-js/cjs/concierge.js" crossorigin="anonymous" type="text/javascript"></script>
<script>
const initialLead = { email: 'a@a.com', FirstName: 'John' };
ChiliPiper.submit(“account-name”, “example-router”, {
lead: initialLead,
onBeforeSubmit: (sentLead)=>{
return {
...sentLead, // adding this object via spread-operator is essential for appending
LastName: 'Doe',
};
}
})
</script>
Overwriting lead data
In this example, we have an email and FirstName, but this will overwrite so that only an email (of a different value) will exist. The firstname value will be deleted entirely.
<script id="chilipiper-concierge" src="https://fire.chilipiper.com/concierge-js/cjs/concierge.js" crossorigin="anonymous" type="text/javascript"></script>
<script>
const initialLead = { email: 'a@a.com', FirstName: 'John' };
ChiliPiper.submit(“account-name”, “example-router”, {
lead: initialLead,
onBeforeSubmit: (sentLead)=>{
return {
email: "email@domain.com"
};
}
})
</script>
Requesting and Setting lead data from a server or third-party service
The function can use async / await, which means you can request and append / overwrite the lead data from some other source.
Common use-cases may include fetching region data based on IP address, or doing some kind of security check, or even doing some form of basic enrichment.
In this example, we have our email, FirstName, and are now also adding a "user_info" value from some third-party service script.
<script id="chilipiper-concierge" src="https://fire.chilipiper.com/concierge-js/cjs/concierge.js" crossorigin="anonymous" type="text/javascript"></script>
<script>
const initialLead = { email: 'a@a.com', FirstName: 'John' };
ChiliPiper.submit(“account-name”, “example-router”, {
lead: initialLead,
onBeforeSubmit: async (sentLead)=>{
const userData = await someThirdParty(sentLead.email)
if(!userData) return sentLead;
return {
...sentLead,
user_info: userData
};
}
})
</script>
Comments
0 comments
Article is closed for comments.