Code Snippets

With snippets below you can extend widget's functionality. Here are a few examples on how to use our Tidio Widget API.

Open chat widget on link click

To do this you need to add an attribute to link as shown in the code below.

<a href="#" onclick="tidioChatApi.open()">Open chat!</a>

Load chat widget after a while

The script below will allow loading the widget with a certain delay (5 seconds by default).

setTimeout(function () {
    var tidioScript = document.createElement('script');
    tidioScript.src = '//code.tidio.co/PUBLIC_KEY.js';
    document.body.appendChild(tidioScript);
}, 5 * 1000);

Open widget after load

The script below will make the chat appear fully expanded as soon as it loads on your site.

(function () {
    function onTidioChatApiReady() {
        window.tidioChatApi.open();
    }
    if (window.tidioChatApi) {
        window.tidioChatApi.on('ready', onTidioChatApiReady);
    } else {
        document.addEventListener('tidioChat-ready', onTidioChatApiReady);
    }
})();

Widget language

If you have multilanguage site and want to widget match site's langauge you can set it by document.tidioChatLang property.

Set language from html attribute

Script gets language from html lang attribute and write it to document.tidioChatLang variable.

document.tidioChatLang = document.querySelector('html').getAttribute('lang');

Set language with other variable

If you want to display chat only in one language or you have it in another place please use the snippet below.

document.tidioChatLang = 'es';