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][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"
})

Updated 7 days ago