# Show/Hide widget programmatically

In this tutorial we show how to manage the widget visualization programmatically using the hide/show parameters and the open/close methods. We also subscribe to the Tiledesk `onClose` event to hide the widget when the user clicks the close icon.

{% stepper %}
{% step %}

### 1 — Start the widget hidden

Set `startHidden` to `true` in `window.tiledeskSettings` so the widget is not shown when it starts.

{% code title="HTML / JavaScript" %}

```
```

{% endcode %}

```html
<script type="application/javascript">
window.tiledeskSettings = {
    projectid: "<<TILEDESK_PROJECT_ID>>",
    startHidden: true
};
</script>
```

{% endstep %}

{% step %}

### 2 — Programmatically open and close the widget

Handle the click events of your "openWidget" and "closeWidget" buttons to show/open or close/hide the widget programmatically.

{% code title="JavaScript" %}

```
```

{% endcode %}

```javascript
// programmatically open the widget
function openWidget() {
    window.Tiledesk('show');
    window.Tiledesk('open');
}

// programmatically close the widget
function closeWidget() {
    window.Tiledesk('close');
    window.Tiledesk('hide');
}
```

{% endstep %}

{% step %}

### 3 — Optionally hide the widget when the user clicks the close icon

Subscribe to the `onClose` Tiledesk event and call the `hide` method so the widget remains hidden after the user clicks the close icon.

{% hint style="info" %}
This is optional but useful if you want the widget to stay hidden after a manual close action.
{% endhint %}

{% code title="JavaScript" %}

```
```

{% endcode %}

```javascript
// subscribe to onClose Tiledesk event and then hide widget
window.Tiledesk('onClose', function(event_data) {
    window.Tiledesk('hide');
});
```

{% endstep %}

{% step %}

### 4 — Full example

Example combining the settings, SDK loader, open/close functions and `onClose` subscription.

{% code title="index.html" %}

```
```

{% endcode %}

```html
<script type="application/javascript">
    window.tiledeskSettings = {
        projectid: "6480a7f683b1e1001370a6b1",
        startHidden: true
    };
    (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'));


    // programmatically open the widget
    function openWidget() {
      window.Tiledesk('show');
      window.Tiledesk('open');
    }

    // programmatically close the widget
    function closeWidget() {
      window.Tiledesk('close');
      window.Tiledesk('hide');
    }

    // subscribe to onClose Tiledesk event and then hide widget
    window.Tiledesk('onClose', function(event_data) {
       window.Tiledesk('hide');
    });
</script>
```

{% endstep %}
{% endstepper %}

View and run the entire code example on Replit: <https://replit.com/@tiledesk/Tiledesk-HTML-Site#index.html>

Privacy policy: <https://tiledesk.com/privacy.html>
