Examples of Custom Behavior
Trigger ServiceBell from Buttons
ServiceBell can be invoked by most HTML elements by adding an
onclick attribute.<button onclick="ServiceBell('dial')">Need live help?</button>
Or you can listen for the
click event in JavaScript.var button = document.getElementById('my-button');
button.addEventListener("click", function() {
ServiceBell("dial");
});
You can take the
ServiceBell("init") snippet and call it at any point, including after the user has agreed to a permission (e.g. by clicking "accept" in a modal or banner.) However, you still must keep the long part of the snippet that looks like !function... first, in order to load the ServiceBell API.Here's an example using a jQuery dialog, but it would work with any JavaScript framework.
<div id="dialog-confirm" title="Receive calls?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>
Would you like to opt-in to receiving calls from our team during your session?</p>
</div>
<script>
// Inject the ServiceBell API.
!function(w,d){function e(e,i){w.ServiceBell.q=w.ServiceBell.q||[],w.ServiceBell.q.push([e,i])}if(!w.ServiceBell){const i=function(i,...n){e(i,n)};["init","identify","dial","alert","bookMeeting","hide","show","expand","collapse","connect","disconnect"].forEach((function(n){i[n]=function(...i){e(n,i)}})),w.ServiceBell=i}var s=d.createElement("script");s.id="service-bell-script",s.src="https://cdn.servicebell.com/main.js",s.async=1;var i=d.getElementsByTagName("script")[0];i.parentNode.insertBefore(s,i)}(window,document);
// Pop open jQuery dialog to confirm they're OK with being called.
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
Accept: function () {
ServiceBell("init", "YOUR_CLIENT_KEY_HERE");
$(this).dialog("close");
},
Decline: function () {
$(this).dialog("close");
},
},
});
});
</script>
If you want to trigger custom behavior after a visitor tries dialing but nobody answers their request, you can listen to the
sb:dialmiss event.Here's an example that directs the visitor to the contact page if they're missed:
window.addEventListener("sb:dialmiss", function() {
window.location.href = "/contact-us";
});
If you want to keep the widget hidden most of the time, but expand it to let the user decide if they want to call or book a meeting (depending on availability) without immediately dialing, you can do that with a combination of
ServiceBell methods and events.// Show & expand the widget.
ServiceBell("show");
ServiceBell("expand");
// If the visitor closes it after expanding, hide it completely.
window.addEventListener("sb:collapse", () => {
ServiceBell("hide");
});
If ServiceBell is initialized and triggered as a core part of your user flow, you may want to handle the UX of a user encountering an error with widget initialization.
// On clicking a button, initialize the widget and dial.
const button = document.getElementById("call-button");
button.addEventListener("click", () => {
button.disabled = true;
ServiceBell("init", "CLIENT_KEY_HERE");
ServiceBell("dial");
// Widget initialized correctly.
window.addEventListener("sb:initialized", () => {
button.disabled = false;
});
// Widget encountered a critical error.
window.addEventListener("sb:error", (ev) => {
button.disabled = false;
alert("Failed to start a call! Please contact support.");
console.log("What happened?!", ev.detail);
});
});
Last modified 1yr ago