Customizing the Web CallBack Form
Web CallBack allows you to provide your own look and feel by overriding our form. To do this you will create a file in /etc/schmooze/wcb.html using the following example code.
<style type="text/css">
#frame {
background-image: url('/admin/modules/webcallback/assets/images/c2c-1.png');
background-repeat: no-repeat;
background-size: 200px;
height: 65px;
cursor: pointer;
cursor: hand;
}
#webcallbackinput {
position: relative;
left: 66px;
top: 30px;
width: 125px;
}
</style>
<div id="frame">
<input type="text" name="num" placeholder="enter number here" id="webcallbackinput" value="">
<input type="hidden" id="dest" value="http://test.company/wcb.php">
<input type="hidden" id="i" value="1">
</div>
<div id="link">
Powered by: <a href="http://www.schmoozecom.com" target="_blank">www.schmoozecom.com</a>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#frame').click(function(){
//ensure we have a value before posting
if ($('#webcallbackinput').val()) {
var valid_msg = 'Insert a message to be displayed to the user';
var invalid_msg = 'Insert a message to be display to the user on failure';
var but = $(this);
$.ajax({
url: $('#dest').val(),
type: 'post',
data: {p: $('#webcallbackinput').val(), i: $('#i').val()},
cache: false,
success: function(data, b, c) {
data = $.parseJSON(data);
switch (data.Response) {
case 'Error':
switch (data.Message) {
case 'Originate failed':
alert(invalid_msg);
break;
default:
alert(data.Message);
break;
}
break;
case 'Success':
alert(valid_msg);
break;
default:
break;
}
},
error: function(a, b, c) {
alert(invalid_msg);
}
})
}
})
});
</script> |
In order for the form to function correctly, you need to set dest to the location of the wcb script on your FreePBX server.
<input type="hidden" id="dest" value="http://test.company/wcb.php"> |
You also need to tell us the webcallback id in the id input field:
<input type="hidden" id="i" value="1"> |
You can also set the invalid and valid messages that display to the user by replacing the following: