# Widget SDK

## Tiledesk Widget

**Widget SDK ver 6.0**

![](https://user-images.githubusercontent.com/47848430/151355859-f94be6a7-3098-43a2-924c-d411e10d5815.png)

Are you interested in the v4 version? [Click here](https://developer.tiledesk.com/widget/advanced/old-versions/web-sdk-v4).

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:

```html
    <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](https://user-images.githubusercontent.com/47848430/150099187-a7697396-bc63-44d1-bcfc-d375da7a1b4b.png)

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

```html
    <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.

```html
    <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](https://user-images.githubusercontent.com/47848430/151353935-8ee4711d-0bc3-4044-ba67-039adfb0a4b2.png)

## 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](https://developer.tiledesk.com/widget/auth)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.tiledesk.com/widget/web-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.