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:

PBX GUI

Customizing the Web CallBack Form

Return to Documentation Home I Return to Sangoma Support