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
  • Step 1: Define Included/Excluded Pages
  • Step 2: Define the startWidget Function
  • Step 3: Additional Control Functions
  • Step 4: Custom Authentication
  • Step 5: Testing and Verification

Was this helpful?

  1. Widget
  2. Tutorials

Installing widget on selected pages

This tutorial guides you through setting up the Tiledesk live chat widget to display only on selected pages of your website. By leveraging a custom script, you can include or exclude the widget based on the page's URL. The script checks the current URL and decides whether to load the Tiledesk widget based on defined conditions, and it includes functions for login, logout, and custom authentication.

Step 1: Define Included/Excluded Pages

The script checks the current URL to decide if the widget should be loaded. Here’s how you can set up exclusions:

const projectId = "63b711fa2ef2e4001a5e4977";
let attributes = {};

if (
  (window.location.href.indexOf('/cds') >= 0) ||
  (window.location.href.indexOf('%2Fcds') >= 0) ||
  (window.location.href.indexOf('/dashboard') >= 0) ||
  (window.location.href.indexOf('%2Fdashboard') >= 0)
) {
  // Pages to exclude: do not start the widget
} else if (
  ((window.location.href.indexOf('/login') >= 0) || 
   (window.location.href.indexOf('%2Flogin') >= 0) || 
   (window.location.href.indexOf('/signup') >= 0) || 
   (window.location.href.indexOf('%signup') >= 0)
  ) && screen.width < 800
) {
  // Also exclude these pages on mobile devices
} else {
  // startWidget()
}

In this code, replace /cds, /dashboard, /login, etc., with the specific paths on your domain where you want to exclude or include the widget.

Step 2: Define the startWidget Function

The startWidget function loads the Tiledesk widget with the desired configuration, setting up the project ID and auto-start behavior.

function startWidget(){
    window.tiledeskSettings = {
        projectid: projectId,
        autoStart: 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'));
}

Step 3: Additional Control Functions

The following functions provide additional control over the widget’s behavior:

  • tiledesk_widget_hide(): Hides the widget.

  • tiledesk_widget_show(): Shows the widget.

  • tiledesk_widget_login(attribute): Logs in the user with a custom attribute.

  • tiledesk_widget_logout(): Logs out the user and signs in anonymously.

These functions help manage the widget's state on different pages.

Step 4: Custom Authentication

The customAuth function sends user data to a custom authentication URL, receiving a JWT token that is used to sign in the user with Tiledesk.

function customAuth(callback) {
    const storedUser = localStorage.getItem('user');
    let user = storedUser ? JSON.parse(storedUser) : null;
    if (!user) {
        callback(null);
        return;
    }
    const remote_support_project_userId = projectId + "_" + user._id;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "https://tiledesk-custom-jwt-authentication.replit.app/tiledeskauth", true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlhttp.onreadystatechange = function () {
        if (callback && xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseText) {
            callback(xmlhttp.responseText);
        }
    };
    xmlhttp.send("id=" + remote_support_project_userId + "&firstname=" + user.firstname + "&lastname=" + user.lastname + "&email=" + user.email);
}

Step 5: Testing and Verification

  1. Verify Included/Excluded Pages: Visit the included pages to confirm the widget appears, and the excluded pages to ensure it remains hidden.

  2. Test Login/Logout: Confirm that login and logout behaviors are working as expected, especially for the custom authentication flow.

This script provides granular control over where the Tiledesk widget appears, enhancing the user experience by excluding it from specific pages and enabling custom authentication.

PreviousCustom size (width/height)NextConversation Embedded Apps

Last updated 6 months ago

Was this helpful?