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.

1

1 — Start the widget hidden

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

HTML / JavaScript

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

2

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.

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');
}

3

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.

This is optional but useful if you want the widget to stay hidden after a manual close action.

JavaScript

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

4

4 — Full example

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

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

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