Examples of Custom Behavior

Trigger ServiceBell from Buttons

Custom dial trigger

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");
});

Require permission before initializing

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>

Handling missed calls

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";
});

Show expanded widget, hide on collapse

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");
});

Listen for initialization or error

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);
  });
});