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:
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 = james.smith@gmail.com"
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>
Enabling authenticated visitors in the Chat widget
Are you interested in the v4 version? .
Tiledesk Dashboard
Custom position of the widget: property explanation
You can configure your widget to authenticate visitors using the Javascript API and JWT token. More info
