Hướng dẫn dùng callpage JavaScript

// toggle verbose mode via API 
callpage['api.toggleVerbose', true];

//app.callpage.io?__cpVerbose=true

Click to open CallPage window

callpage['api.widget.open'];

callpage['api.widget.close'];

callpage['api.scoring.toggle', toggle];

callpage['api.scoring.setVariable', 6];


callpage['api.scoring.setVariable', 'hello'];

callpage['api.setDepartment', departmentId];

callpage['api.setDepartment', 123];

callpage['api.widget.call', params, callback];

// event when the call is ordered. Use callback to get callRequestId
callpage['api.widget.call', {tel: '+48570123123'}, function[response] {

    var callRequestId = response? response.id : null;

    // it means that we successfully ordered a call and have its ID
    if [callRequestId] {
        console.log["Unique call ID: " + callRequestId];
    }
    else {
        // put here any logic if call was unsuccessful [e.g. no managers available, or after hours]
    }
}];

callpage['api.widget.call-or-schedule', params, callback];

// event when the call is ordered. Use callback to get callRequestId
callpage['api.widget.call-or-schedule', {tel: '+48570123123'}, function[response] {

    var callRequestId = response? response.id : null;

    // it means that we successfully ordered a call and have its ID
    if [callRequestId] {
        console.log["Unique call ID: " + callRequestId];
    }
    else {
        // put here any logic if call was unsuccessful
    }
}];

callpage['api.button.autoshow'];

callpage['api.button.show'];

callpage['api.button.hide'];

callpage['api.hint.show'];

callpage['api.hint.hide'];

callpage['api.eyecatcher.show'];

callpage['api.eyecatcher.hide'];

callpage['api.countdown.start', selector, onStart, onEnd];

    29
    99

callpage[
    'api.countdown.start',
    // element selector
    '#countdown',
    // on start callback
    function[] {
        // code when countdown starts
    },
    // on end callback
    function[] {
        // code when countdown ends
    }
];

Callbacks

Callbacks let you bind a custom JavaScript function to an event. For example, your function can be invoked every time the widget is opened. It's a great way to extend custom functionality and deeply integrate your site with CallPage.

onReady

event.onReady

callpage['event.onReady', function[] {
    // your code here
}];

Code included inside event.onReady will only run once the widget is loaded and all resources available.

event.onWidgetLoaded

callpage['event.onWidgetLoaded', function[] {
    // your code here
}];

Event onWidgetLoaded fires when widget is loaded properly and available.

event.onWidgetExit

callpage['event.onWidgetExit', function[] {
    // your code here
}];

Event onWidgetExit fires when widget is disabled and can not be loaded.

event.onWidgetOpened

callpage['event.onWidgetOpened', function[] {
    // your code here
}];

Event onWidgetOpened fires when popup window is opened.

event.onWidgetClosed

callpage['event.onWidgetClosed', function[] {
    // your code here
}];

Event onWidgetClose fires when popup window is closed.

onButtonShowed

event.onButtonShowed

callpage['event.onButtonShowed', function[] {
    // your code here
}];

Event onButtonShowed fires when CallPage button is shown.

onCallCreated

event.onCallCreated

callpage['event.onCallCreated', function[call] {
    // get call ID
    var callId = call.id;

    if [call.scheduled_at] {
        // it means that call is "scheduled", created using option "Call me later"
    }

    // your code here
}];

Event onCallCreated fires when visitor ordered a call [scheduled or real-time]

onCallRealTime

event.onCallRealTime

callpage['event.onCallRealTime', function[call] {
    // get call ID
    var callId = call.id;

    // your code here
}];

Event onCallRealTime fires when visitor ordered a real-time call

onCallScheduled

event.onCallScheduled

callpage['event.onCallCreated', function[call] {
    // get call ID
    var callId = call.id;

    // scheduled timestamp
    if [call.scheduled_at] {
    }

    // your code here
}];

Event onCallScheduled fires when visitor ordered a scheduled call

onCallInProgress

event.onCallInProgress

callpage['event.onCallInProgress', function[call] {
    // get call ID
    var callId = call.id;

    // your code here
}];

Event onCallInProgress fires when call status changes to IN-PROGRESS. It means that visitor picked up the phone.

onCallCompleted

event.onCallCompleted

callpage['event.onCallCompleted', function[call] {
    // get call ID
    var callId = call.id;

    // your code here
}];

Event onCallCompleted fires when call status changes to COMPLETED. It means that the call was successfully finished.

Statistics API

Statistics API allows you to grab some useful information about visitor, widget, status, etc.

getCallId

stats.getCallId

callpage['event.onReady', function[] {
    // get callId
    var callId = callpage['stats.getCallId'];
    console.log[callId];
}];

Returns the unique identificator for the current attempt.

The callId is remembered even when the call ends until the page is refreshed. Returns null if callId is unknown [e.g. call has not yet started].

getManagers

stats.getManagers

callpage['event.onReady', function[] {
    // get managers
    var managers = callpage['stats.getManagers'];
    console.log[managers];
}];

Example output:

[
    {
        "id":28,
        "name":"Admin",
        "avatar":"url-to-avatar",
        "departments":[
            {
                "id": 1,
                "name": "Owner"
            }
        ]
    },
    {
        "id":29,
        "name":"Manager",
        "avatar":"url-to-avatar",
        "departments":[
            {
                "id": 1,
                "name": "Sales"
            }
        ]
    }
]

Returns array of managers which belongs to this widget.

getVisitorId

stats.getVisitorId

callpage['event.onReady', function[] {
    // get unique visitor ID
    var visitorId = callpage['stats.getVisitorId'];
    console.log[visitorId];
}];

Returns the unique identificator of the current visitor.

hasAvailableManagers

stats.hasAvailableManagers

callpage['event.onReady', function[] {
    var hasAvailableManagers = callpage['stats.hasAvailableManagers'];
    // your code here
}];

Returns true if there is at least one available manager who is able to pick up the phone right now.

Tracking code

Tracking code

    var __cp = {
        // your encrypted widget ID, could be find in dashboard
        id: "YOUR-ENCRYPTED-WIDGET-ID",
        version: '1.1'
    };

    // async loader
    [function[window, document] {
        var loader = function[] {
            var cp = document.createElement['script']; cp.type = 'text/javascript'; cp.async = true;
            cp.src = "//api.callpage.io+themes+widget+build+js+callpage=js".replace[/[+]/g,'/'].replace[/[=]/g,'.'];
            var s = document.getElementsByTagName['script'][0]; s.parentNode.insertBefore[cp, s];
        };

        window.addEventListener ? window.addEventListener["load", loader, false] : window.attachEvent["onload", loader];

        // prevent from 2 code instances on site
        if [window.callpage] {
            alert['You could have only 1 CallPage code on your website!'];
        } else {

            // queue of API calls
            window.callpage = function[method] {
                if [method == '__getQueue'] {
                    return this.methods;
                }
                else if [method] {
                    if [typeof window.callpage.execute === 'function'] {
                        window.callpage.execute.apply[this, arguments];
                    }
                    else {
                        [this.methods = this.methods || []].push[{
                            arguments: arguments
                        }];
                    }
                }
            };

            // autoshow button
            callpage['api.button.autoshow'];
        }
    }][window, document];

Insert tracking code right before closing tag

CallPage tracking code is available in the CallPage app.

You can customize the tracking code to send additional information about your visitors to CallPages applications.

CallPage code snippets

CallPage embed into form with countdown timer

Check JSFiddle

Custom CSS

You can spice up your chat window using custom CSS styles and pre-defined SCSS mixins which will simplify your life. Here are some examples of possible customizations and instructions on how to achieve them.

Learn SASS / SCSS

Learn SCSS

How it works

• Use Inspect element to find selector which should be styled. It's very important to use correct selector.
• All rules will be set to !important after compilation
• All rules will be automatically minified after compilation
• All rules will be prepended with selector #cp-widget after compilation to prevent overriding website styles

Responsive / mobile websites

Mobiles and small tablets.

@include media-breakpoint-down[tablet] {
    // these rules will be applied for mobiles and small tablets.

    #callpage .cp-call__heading {
        // your styles
    }
}

Tablets and desktops.

@include media-breakpoint-up[tablet] {
    // these rules will be applied for tablets and desktops.

    #callpage .cp-call__heading {
        // your styles
    }
}

CallPage allows you easily define rules only for certain devices. Currently there is only tablet breakpoint.

Theming

@mixin main-color[
  $color,
  $divider-amount: 6%,
  $background-active-amount: 6%,
  $background-secondary-amount: 10%,
  $background-tooltip-amount: 8%
]

// Set lightblue as widget theme.
@include main-color[lightblue];


// Sets 'lightblue' as background color of the elements and 
// make the color of agreement tooltip 12% DARKER than given 'ligthblue' color.
@include main-color[lightblue, $background-active-amount: 12%];


// Set 'lightblue' color as widget theme.
@include main-color[lightblue];
// If you want to replace auto-generated color of selected tab
// with your own color.
@include background-active-color[tomato];

There are two widget themes which you can choose in the dashboard: light and dark ones. But if they are not enough for you, use main-color mixin which creates theme based on given $color. This mixin tries "intelligently" detect colors for:

• Background of widget, button tooltip, agreement tooltip, contact type tabs and etc.
• Borders, lines and dividers
• Fonts. Text color will be light if user-defined themed color is dark and vise versa.

You can easily control "intelligent" behavior by using optional arguments described below.

main-color uses under the hood other mixins: background-color, text-color, divider-color.

Background color

@mixin background-color[
  $color,
  $active-amount: 6%,
  $secondary-amount: 10%,
  $tooltip-amount: 8%
]

// Sets 'lightblue' as background color of the elements.
@include background-color[ligthblue];

// Sets 'lightblue' as background color of the elements and 
// make the color of agreement tooltip 10% DARKER than given 'ligthblue' color.
@include background-color[ligthblue, $tooltip-amount: 10%];

// Sets 'black' as background color of the elements and 
// make the color of agreement tooltip 10% LIGHTER than given 'black' color.
@include background-color[black, $tooltip-amount: 10%];

Sets custom background color of the elements: widget, selected contact type tab, button tooltip, agreement tooltip and so on.

Sometimes we want to highlight certain state of element. For example when contact type tab is selected. That's why we need diffrent variations of background color. Fortunately you don't have to worry about all those colors because background-color mixin does it under the hood. All you need to do is just specify $color variable. There are also optional arguments which allow you to configure generating of colors.

Depending on which color user provides mixin will generate lighter or darker colors. Let's say you provide dark color, then the color of the selected tab will be light. And vice versa.

background-color uses under the hood other mixins: background-active-color, background-secondary-color.

Background color of active elements

@mixin background-color[$color]

@include background-active-color[ligthblue];

Sets background color for active elements: selected contact type.

Secondary background color

@mixin background-secondary-color[$color]

// Sets 'lightblue' as background color of the certain elements.
@include background-secondary-color[ligthblue];

Sets background color for elements such as: circle of countdown timer and inactive start in star rating.

Divider color

@mixin divider-color[$color]

@include divider-color[tomato];

Sets color for elements such as: tabs dividers, input border, border of button tooltip, link underline ans so on.

This mixin uses under the hood button-tooltip-border-color.

@mixin button-tooltip-border-color[$color]

@include button-tooltip-border-color[tomato];

Sets the border color of button tooltip. Tooltip is the component which appears over widget button. It's used for one click to call feature and showing info about active call if the widget is closed.

Text color

@mixin text-color[$color]

@include text-color[black];

Sets color for titles, paragraphs, close icon etc.

Callpage widget uses different colors for main text and secondary text. Fortunatelly, you don't have to worry about colors variations. You need only pass the $color of the main text and text-color mixin will create other colors for you. The color of the secondary text is generated in the way the one to be less noticeable than the main text.

If the generated color of secondary text doesn't match your needs, you can directly call small-secondary-text mixin to set desired color.

This mixin uses under the hood small-secondary-text-color.

Small text color

@mixin small-secondary-text-color[$color]

@include small-secondary-text-color[black];

Sets color for elements such as agreement short text or count of social shares.

Brand button customization

@mixin text-color { ...your styles }

@include brand-button {
  letter-spacing: 1px;
  font-size: 16px;
}

Applies styles for the brand button.