> For the complete documentation index, see [llms.txt](https://developer.tiledesk.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.tiledesk.com/widget/tutorials/show_hide-widget.md).

# Show/Hide widget programmatically

In this tutorial we will show to you how to manage visualization of widget programmatically using *hide/show* parameters and *open/close* method. Furthermore, we add a subscription to **onClose** tiledesk event to manage close button and hide it on click.

First of all you have to set **startHidden** property to true in window\.tiledeskSettings to not show widget when it starts.

```java
window.tiledeskSettings= {
    projectid: "<<TILEDESK_PROJECT_ID>>",
    startHidden: true
};
```

Then you have to handle click event of the openWidget and closeWidget buttons in order to programmatically show and hide widget.

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

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

Finally, to complete, you can optionally subscribe to 'onClose' tiledesk event and use hide method to hide widget when user click on close up right corner icon.

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

The entire sample code is presented below.

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

On this page [here](https://replit.com/@tiledesk/Tiledesk-HTML-Site#index.html) you can view the entire code and run it to better understand the results