Rep.ai can be invoked by most HTML elements by adding an onclick attribute.
<button onclick="RepAI('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() {RepAI("dial");});
Require permission before initializing
You can take the RepAI("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 RepAI 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 RepAI API.
!function(w,d){function e(e,n){w.RepAI.q=w.RepAI.q||[],w.RepAI.q.push([e,n])}if(!w.RepAI){var t=function(n){for(var t=arguments.length,i=new Array(t>1?t-1:0),r=1;r<t;r++)i[r-1]=arguments[r];e(n,i)};["init","identify","dial","alert","bookMeeting","hide","show","expand","collapse","connect","disconnect"].forEach((function(i){t[i]=function(){for(var t=arguments.length,i=new Array(t),r=0;r<t;r++)i[r]=arguments[r];e(n,i)}})),w.RepAI=t}var s=d.createElement("script");s.id="rep-ai-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 () {
RepAI("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:
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 RepAI methods and events.
// Show & expand the widget.RepAI("show");RepAI("expand");// If the visitor closes it after expanding, hide it completely.window.addEventListener("sb:collapse", () => {RepAI("hide");});
Listen for initialization or error
If Rep.ai 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.constbutton=document.getElementById("call-button");button.addEventListener("click", () => {button.disabled =true;RepAI("init","CLIENT_KEY_HERE");RepAI("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); });});