Widget SDK

Widget SDK ver 6.0

Tiledesk Widget

Are you interested in the v4 version? Click here.

This guide shows how to get started quickly with the Tiledesk Widget SDK. The Widget SDK gives businesses and developers the flexibility to build and customize a chat experience that meets their design/brand requirements.

1

Basic installation

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:

Embed snippet

<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 menu.

Tiledesk Dashboard

2

Install with visitor basic information

If you know basic visitor data (e.g., name and email), you can pass that through the tiledeskSettings object to prefill visitor info:

Embed with visitor info

<script type="application/javascript">
    var PROJECT_ID = "<<TILEDESK_PROJECT_ID>>"
    const USER_FULLNAME = "James Smith";
    const USER_EMAIL = "[email protected]"
    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>

3

Install with custom position

To place the widget on the left or right and adjust margins, set align, marginX, and marginY in tiledeskSettings. Example below shows left alignment with custom margins:

Embed with custom position

<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

Enabling authenticated visitors in the Chat widget

You can configure the widget to authenticate visitors using the JavaScript API and a JWT token. More info: Widget Authentication

Last updated 2 years ago