Widget SDK

Tiledesk Widget

Widget SDK ver 6.0

Are you interested in the v4 version? Click here.

This guide will show you how to get started as quickly as possible with the Widget SDK from Tiledesk. The Widget SDK will give businesses and developers the flexibility to build and customize a chat experience that meet their specific design/brand requirements.

How to install

To chat with your visitors embed the widget on your site. Copy the following script and insert it in the HTML source between the HEAD tags:

    <script type="application/javascript">
        var PROJECT_ID = "<<TILEDESK_PROJECT_ID>>"
        window.tiledeskSettings=
        {
            projectid: PROJECT_ID
        };
        (function(d, s, id) {
            var w=window; var d=document; var i=function(){i.c(arguments);}; 
            i.q=[]; i.c=function(args){i.q.push(args);}; w.Tiledesk=i; 
            var js, fjs=d.getElementsByTagName(s)[0]; 
            if (d.getElementById(id)) return; 
            js=d.createElement(s); 
            js.id=id; js.async=true; js.src="https://widget.tiledesk.com/v6/launch.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document,'script','tiledesk-jssdk'));
    </script>

To get your TILEDESK_PROJECT_ID go to the Tiledesk Dashboard and click on the Widget item of the menu:

Tiledesk Dashboard

Install with visitor basic information

Website visitors are generally leads (visitors if they have not communicated via the Messenger) whereas logged in users are Tiledesk users already logged in onces. The main difference is the amount of information you know about them. You can pass basic information throught tiledeskSettings object. An example is provided below.

    <script type="application/javascript">
        var PROJECT_ID = "<<TILEDESK_PROJECT_ID>>"
        const USER_FULLNAME = "James Smith";
        const USER_EMAIL = [e-mail]"
        window.tiledeskSettings=
        {
            projectid: PROJECT_ID,
            userFullname: USER_FULLNAME,
            userEmail: USER_EMAIL
        };
        (function(d, s, id) {
            var w=window; var d=document; var i=function(){i.c(arguments);}; 
            i.q=[]; i.c=function(args){i.q.push(args);}; w.Tiledesk=i; 
            var js, fjs=d.getElementsByTagName(s)[0]; 
            if (d.getElementById(id)) return; 
            js=d.createElement(s); 
            js.id=id; js.async=true; js.src="https://widget.tiledesk.com/v6/launch.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document,'script','tiledesk-jssdk'));
    </script>

Install with custom position

Sometimes you may want to show Tiledesk Widget on left or right side of your website. Moreover, you may also want to get more/less distance between widget and website margin. The following example shows a widget aligned on left side and with custom margin from X and Y axis.

    <script type="application/javascript">
        var PROJECT_ID = "<<TILEDESK_PROJECT_ID>>"
        
        window.tiledeskSettings=
        {
            projectid: PROJECT_ID,
            align: 'left',
            marginX: '200px',
            marginY: '150px'
        };
        (function(d, s, id) {
            var w=window; var d=document; var i=function(){i.c(arguments);}; 
            i.q=[]; i.c=function(args){i.q.push(args);}; w.Tiledesk=i; 
            var js, fjs=d.getElementsByTagName(s)[0]; 
            if (d.getElementById(id)) return; 
            js=d.createElement(s); 
            js.id=id; js.async=true; js.src="https://widget.tiledesk.com/v6/launch.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document,'script','tiledesk-jssdk'));
    </script>   

Custom position of the widget: property explanation

Enabling authenticated visitors in the Chat widget

You can configure your widget to authenticate visitors using the Javascript API and JWT token. More info Widget Authentication