Call Support button

You can easily create one click buttons on your website that allows customers to contact your support center. You need only a few lines of code:

supportbtn.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<script src="/luci-static/resources/adapter.js"></script>
<script src="/luci-static/resources/wrtc_kit.js"></script>
</head><body>
 
<script type="text/javascript">
var ringAudio = new Audio();
ringAudio.src = "/luci-static/resources/cbi/ringing.mp3";
 
wrtc.init = function() {
	wrtc.app = "InGate Inline Client 1.0.0";
};
 
wrtc.onConnecting = function(call) {
	document.getElementById('hangup').style.display = "inline";
};
 
wrtc.onDenied = wrtc.onHungUp = wrtc.onGotHungUp = function(call) {
	document.getElementById('hangup').style.display = "none";
};
 
wrtc.onRinging = function(call) {
	ringAudio.play();
};
</script>
 
<!-- insert on your webpage: -->
<img id="suppbtn" src="/luci-static/resources/cbi/callsupport.gif" style="cursor:hand;" onclick='wrtc.call("support@company.com")'>
<img id="hangup" src="/luci-static/resources/cbi/hangup.png" style="display:none;cursor:hand;height:30px" onclick="wrtc.hangup()">
</body>

ringAudio is an audio object used to play a ringback signal to the user so that she can hear her call is being made.

suppbtn is the support button that you can place on your website. Usually a button like this:

hangup is the hang up button that appears once customer has called support, so that she can hang up the call after it is finished. Usually a button like this:

wrtc.init is an obligatory initialization function for webrtc that you can use for initializations. In this simple example just the app name is set.

wrtc.onConnecting is called once user has clicked on the Call Support button. We use this function to display the hangup button.

wrtc.onDenied, wrtc.onHungUp and wrtc.onGotHungUp are three different ways the call can end: either support denies to answer the call, or the call is made and after it finishes either the customer or the support center hangs up. In all three cases the hung up button should be hidden again.

wrtc.onRinging is called once customer has clicked on the Call Support button and the phone starts ringing at the support center. It is good to have an audio feedback of the remote ring signal so the customer knows her call has made it to the support center and (hopefully) someone will pick it up soon.

wrtc.call is the main function that makes the actual call once customer clicks on the Call Support button. You must replace "support@company.com" with your own support's SIP address.

wrtc.hangup is the function used to end a call.

If you want an extremely basic implementation then you only need wrtc.init and wrtc.call. The rest of the code is there only to give the customer a better experience with a ring tone and a hang up button.

wrtc_kit Javascript tutorial