# Widget SDK

**Widget SDK ver 6.0**

![Tiledesk Widget](https://content.gitbook.com/content/ZHVyiQyg1U1x8X0VfBx7/blobs/sn1K55Q8GA82c3rU4wsS/image)

Are you interested in the v4 version? [Click here](https://developer.smartifyai.in/web-sdk-v4).

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.

{% stepper %}
{% step %}

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

{% code title="Embed snippet" %}

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

{% endcode %}

To get your TILEDESK\_PROJECT\_ID go to the Tiledesk Dashboard and click on the Widget menu.

![Tiledesk Dashboard](https://content.gitbook.com/content/ZHVyiQyg1U1x8X0VfBx7/blobs/5OfxefMVM6r1WE8OCQmQ/image)
{% endstep %}

{% step %}

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

{% code title="Embed with visitor info" %}

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

{% endcode %}
{% endstep %}

{% step %}

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

{% code title="Embed with custom position" %}

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

{% endcode %}

![Custom position of the widget](https://content.gitbook.com/content/ZHVyiQyg1U1x8X0VfBx7/blobs/D6mssFURCHt9ZukwLWMH/image)
{% endstep %}
{% endstepper %}

## 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](https://developer.smartifyai.in/widget/widget-authentication)

Last updated 2 years ago
