DocumentationAPI ReferenceToky IntegrationsHelp CenterJavascript SDKToky
Documentation

Configuration

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

Suggest Edits

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

AttributeTypeDefault ValueDescription
$username
required		stringHandle 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_optionbooleanfalseWhen true, it shows a dropdown with telephone menu options.
$optionstring"0"Set a default telephone menu option
$positionstring“right”It allows to set the side where the widget will be positioned. Possible values: right, left
$textstring""Text used to display on the call button, if the text is empty, only the round button will be displayed.
$auto_openbooleanfalseWhen true, it will display the default modal widget.
$colorstring“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_selectorstring“”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"
$langstring“en”Define the language to be used in the widget. This executes the greeting audios defined for the language. Possible values: en, es,pt
$radiusstring"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 almost 5 years ago