Example
Below is an example HTML file.
Example HTML
<!DOCTYPE html>
<html>
<head>
<title>AloTech WebRTC Softphone</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://talkgadget.google.com/talkgadget/channel.js"></script>
</head>
<body>
<div class="container">
<h1>AloTech WebRTC Softphone</h1>
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default" id="agent-status-available">Available</button>
<button class="btn btn-default" id="agent-status-acw">ACW</button>
<button class="btn btn-default" id="agent-status-shortbreak">Short Break</button>
<button class="btn btn-default" id="agent-status-lunch">Lunch</button>
<button class="btn btn-default" id="agent-status-training">Training</button>
<button class="btn btn-default" id="agent-status-meeting">Meeting</button>
<button class="btn btn-default" id="agent-status-logoff">Logout</button>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="height:15px"></div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">
<input type="text" class="form-control" id="PhoneNumber" placeholder="Enter phone number">
</div>
</div>
<div class="row">
<div class="col-xs-12" style="height:5px"></div>
</div>
<div class="row">
<div class="col-xs-12">
<select class="form-control" id="agent-softphone-accountcode">
<option></option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="height:5px"></div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-default" id="agent-softphone-dial" title="Dial">Dial</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" id="agent-softphone-hangup" title="Hangup">Hangup</button>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="height:5px"></div>
</div>
<div class="row">
<div class="col-xs-6">
<button class="btn btn-default" id="agent-softphone-answer" title="Answer">Answer
</button>
</div>
<div class="col-xs-6">
<button class="btn btn-default" id="agent-softphone-hold" title="Hold">Hold</button>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="height:5px"></div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-block btn-default" id="agent-softphone-transfer" title="Transfer">
Transfer
</button>
</div>
<div class="col-xs-12">
<button class="btn btn-block btn-default" id="agent-softphone-transfer2ivr"
title="Transfer2IVR"
onClick="transfer2ivr_click('ahBzfnRlbGVmb25pLWlseWFzchYLEglBdHRlbmRhbnQYgICAgJ_VkAsMogEadGVsZWZvbmktaWx5YXMuYXBwc3BvdC5jb20');">
Transfer2IVR
</button>
</div>
<div class="col-xs-12">
<button class="btn btn-block btn-default" id="agent-softphone-transfer2alias"
title="Transfer2Alias"
onClick="transfer2alias_click('1101');">Transfer2Alias
</button>
</div>
<div class="col-xs-12">
<button class="btn btn-block btn-default" id="agent-softphone-transfer2queue"
title="Transfer2Queue"
onClick="transfer2queue_click('ahBzfnRlbGVmb25pLWlseWFzchILEgVRdWV1ZRiAgICAzYfgCAyiARp0ZWxlZm9uaS1pbHlhcy5hcHBzcG90LmNvbQ');">
Transfer2Queue
</button>
</div>
<div class="col-xs-12">
<button class="btn btn-block btn-default" id="agent-softphone-click2listencall"
title="Click2ListenCall"
onClick="ListenCall(null);">Click2ListenCall
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="height:5px"></div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-default" id="agent-softphone-one">1</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" id="agent-softphone-two">2</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" id="agent-softphone-three">3</button>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="height:5px"></div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-default" id="agent-softphone-four">4</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" id="agent-softphone-five">5</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" id="agent-softphone-six">6</button>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="height:5px"></div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-default" id="agent-softphone-seven">7</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" id="agent-softphone-eight">8</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" id="agent-softphone-nine">9</button>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="height:5px"></div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-default" id="agent-softphone-star">*</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" id="agent-softphone-zero">0</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" id="agent-softphone-sharp">#</button>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="height:5px"></div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-block btn-default" id="agent-softphone-mute">Mute</button>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="height:5px"></div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-block btn-default" id="line1" onclick="CallSetActive( Line1 )">Line
1
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="height:5px"></div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-block btn-default" id="line2" onclick="CallSetActive( Line2 )">Line
2
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div id="apiLog">-- Api Log --</div>
</div>
</div>
</div>
<script src="/static/js/jssip/3-0-4/jssip.min.js"></script>
<script src="/static/webrtc/v1/webrtc.js"></script>
<script type="text/javascript">
$(document).ready(function () {
AWJS.init({
hostname: '{{ hostname }}',
session: '{{ session }}',
inputPhoneNumber: '#PhoneNumber',
onLogout: function (response) {
if (response.success)
alert('Success!');
}
});
AWJS.start();
});
</script>
</body>
</html>