Configuration

Learn how can you use live call javascript code snippet and its parameters

Toky live call button works adding a Javascript snippet to your web sites and if you have programming knowledge you can customize it using its parameters and methods.

👍

Recommended

You can generate this basic widget code using the Call Widget Generator

Basic call widget sample

This is the basic code for Toky's call widget, in this case, we simply need the boot method and add the parameters.

🚧

Important

The value [[TOKY_USERNAME]] must be replaced by your own user name. You can get your user name following the steps in this article

(function(p) {
    var s = document.createElement('script');
    s.src = 'https://call-widget.toky.co/toky-call-widget';
    s.onload = function() {
        Toky("boot", p);
    };
    document.head.appendChild(s);
})({
    "$username": "[[TOKY_USERNAME]]",
    "$show_option": true,
    "$position": "left",
    "$text": "Call us for free"
})

Widget parameters

Attribute

Type

Default Value

Description

$username
required

string

Handle of the company used to bring all the information related to it and data for connection. You can see how to find yours in this article

$show_option

boolean

false

When true, it shows a dropdown with telephone menu options.

$option

string

"0"

Set a default telephone menu option

$position

string

“right”

It allows to set the side where the widget will be positioned. Possible values: right, left

$text

string

""

Text used to display on the call button, if the text is empty, only the round button will be displayed.

$auto_open

boolean

false

When true, it will display the default modal widget.

$color

string

“green”

Set the button colors. Possible values: white, blue, green

Custom colors with the following following pattern:
“#backgroundHex,#fontHex,#hoverHex”

Example:
“#ffffff,#080a0a,#00aabb”

$launcher_selector

string

“”

CSS selector of an element you decide to use to execute the widget show event. You can use the element ID "#custom-launcher" or also the CSS class ".custom-launcher"

$lang

string

“en”

Define the language to be used in the widget. This executes the greeting audios defined for the language. Possible values: en, es,pt

$radius

string

"50"

Set the border radius of the button

Advance call widget sample with methods

You can use the widget methods to execute your own code when some events are triggered by the call widget.

(function(p) {
    var s = document.createElement('script');
    s.src = 'https://call-widget.toky.co/toky-call-widget.js';
    s.onload = function() {
        Toky("boot", p);

        Toky("onWidgetReady", function() {
            // Do stuff
        });

        Toky("onShow", function() {
            // Do stuff
        });
        Toky("onHide", function() {
            // Do stuff
        });
        Toky("onCallStart", function() {
            // Do stuff
        });
        Toky("onCallEnd", function() {
            // Do stuff
        });

    };

    document.head.appendChild(s);
})({
    "$username": "[[TOKY_USERNAME]]",
    "$show_option": true,
    "$position": "left",
    "$text": "Call us for free"
})