Tiledesk Developer Hub
WebsiteCommunityTutorialsGet started
  • Introduction
  • Community
  • Ask for Support
  • Public Roadmap and Changelog
  • Tutorials
  • Widget
    • Widget SDK
    • Javascript API: Methods
    • Javascript API: Attributes
    • Javascript API: Listeners/Events
    • Widget Authentication
    • Widget Angular integration
    • Widget React integration
    • Widget for Android with WebView
    • Widget for iOS with WKWebView
    • Widget for Flutter with WebView
    • Widget for React with WebView
    • Widget for Wix Website platform
    • Tutorials
      • Hide widget
      • Show/Hide widget programmatically
      • Force widget loading without user interaction
      • Mobile positioning
      • Custom size (width/height)
      • Installing widget on selected pages
    • Conversation Embedded Apps
      • Payment App Tutorial
      • Prechat form App Tutorial
    • Advanced
      • Preset the Widget on a specific Department
      • Authentication Flow
      • Widget protocol specs
      • Prechat Form JSON specs
      • Prevent multiple conversations
      • Old versions
        • Web SDK v4
  • External Chatbot
    • Introduction
    • Hello World tutorial
    • Chatbot to Human handoff
    • Send Text Buttons
    • Advanced Tutorials
      • Introduction
      • Tutorial 1 - Dialogflow as external chatbot
      • Tutorial 2 - Buttons and images
      • Tutorial 3 - Automatic human handoff with fallback intent
      • Tutorial 4 - Explicit Human handoff with user intent
      • Tutorial 5 - Gracefully handling operating hours during handoff
      • Generate Dialogflow Google Credentials file
    • Rasa tutorials
      • Rasa Tutorial 1 - Rasa as external chatbot
  • Resolution bot
    • Introduction
    • Quickstart
    • Webhook service
    • Rich messages
    • Tutorials
      • Chatbot chooser (multilanguage)
      • Department chooser
      • Order info (webhook)
  • APIs
    • REST APIs
      • Introduction
      • Authentication
      • Requests
      • Leads
      • Messages
      • Activities
      • Projects
      • Team
      • User
      • Analytics
      • Canned responses
      • Tags
      • Events
      • Jwt
      • Labels
      • Images
      • Files
      • Segments
      • Chatbots
      • Knowledge Bases
        • Knowledge Base
        • Contents
        • Question & Answer
      • Management Api
        • Departments
        • Groups
    • NodeJS SDK
    • Webhooks
      • Subscriptions
    • Conversation Messages APIs tips
    • Realtime API
    • JWT Authentication
      • JWT Custom authentication Tutorial
    • Tutorials
      • REST API
        • Sending and receiving messages with Tiledesk APIs
        • PHP Tiledesk REST API example
        • Import multiple messages into Tiledesk using REST APIs from third party app
      • Webhooks
        • Custom Request assignment
        • Request transcript on close
  • Apps
    • Build Custom App - Quick start
    • External Channels integration flow diagram
    • Telegram integration tutorial
  • Dashboard & AgentChat SDK
    • Dashboard SDK
    • Agent Chat SDK
  • Architecture
    • Architecture overview
    • Components list
    • Bot Design diagram
    • Multi Channel Message Flow
  • Installation
    • Installation
    • Running Tiledesk using Docker Compose
    • Running Tiledesk with Kubernetes using Helm
    • Choosing Hardware
  • Configuration
    • Chat21 channel configuration
    • Email parameters and templates configuration
    • Configure the logging system
Powered by GitBook
On this page

Was this helpful?

  1. Widget
  2. Tutorials

Hide widget

In this tutorial we will show to you a simple tutorial of how to hide widget if no agent is still available. Steps to make them is very easy:

  1. Start widget in hidden mode setting startHidden boolean property to true

  2. Get widget settings using Tiledesk APIs

  3. Use the function window.Tiledesk(‘show’) to show the widget ONLY if some agent is available.

Here is the full code example

<html>
    <head>
        <script type="application/javascript">
            var PROJECT_ID = "<<TILEDESK_PROJECT_ID>>"
            window.tiledeskSettings=
            {
                projectid: PROJECT_ID,
                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/6/launch.js";
                fjs.parentNode.insertBefore(js, fjs);
            }(document,'script','tiledesk-jssdk'));

            getWidgetSettings((err, result) => {
                    const users_available = result['user_available']
                    let availability = true;
                    if (!users_available || users_available.length == 0) {
                        document.getElementById('available').innerHTML = "No one is available, widget will stay hidden!";
                    }
                    else {
                        document.getElementById('available').innerHTML = "Someone is available, showing widget...";
                        window.Tiledesk('show');
                    }
                });

                function getWidgetSettings(callback) {
                    const options = {
                        url: `https://api.tiledesk.com/v3/${projectId}/widgets`, // PROJECT ID IS ALSO USED HERE TO GET PROJECT SETTINGS
                        method: 'GET'
                    };
                    let xmlhttp = new XMLHttpRequest();
                    xmlhttp.open(options.method, options.url, true);
                    xmlhttp.onreadystatechange = function() {
                        if (callback && xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseText) {
                            try {
                                const json = JSON.parse(xmlhttp.responseText);
                                callback(null, json);
                            }
                            catch (err) {
                                callback(err, null);
                            }
                        }
                    };
                    xmlhttp.send(null);
                }
        </script>
    </head>
    <body>
        This Tiledesk example will hide the widget if no agent is available
        <div>
            <b>Agents available:</b> <span id='available'>loading availability...</span>
        </div>
    </body>
</html>
PreviousTutorialsNextShow/Hide widget programmatically

Last updated 1 year ago

Was this helpful?

View result

here