Smartify

Installing widget on selected pages

1

Step 1: Define Included/Excluded Pages

You decide whether to load the widget by checking the current URL and matching it against include/exclude patterns. Replace paths like /cds, /dashboard, /login, /signup with the paths relevant to your site.

selected-pages-check.js
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()
}
2

Step 2: Define the startWidget Function

Use this function to set tiledeskSettings and inject the Tiledesk widget script. It configures the project ID and autoStart behavior.

start-widget.js
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'));
}
3

Step 3: Additional Control Functions

These helper functions let you manage the widget state from your app:

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

(Implement these functions by calling the appropriate Tiledesk JavaScript API or emitting events to Tiledesk once the widget is loaded.)

4

Step 4: Custom Authentication

Use a customAuth function to request a JWT from your authentication endpoint and pass it back via callback. The example below posts user data to a remote auth endpoint and returns the JWT in the callback.

custom-auth.js
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);
}

Use the returned JWT to sign in the user with Tiledesk according to your integration flow.

5

Step 5: Testing and Verification

  • Verify included/excluded pages: Visit pages that should show the widget and pages that should not to confirm behavior.

  • Test login/logout: Confirm login and logout flows, especially custom authentication.

If something doesn't appear as expected:

  • Check the URL matching logic (indexOf checks).

  • Ensure startWidget() is called only when intended.

  • Verify the custom authentication endpoint returns a valid JWT and the callback receives it correctly.

PreviousShow/Hide widget programmaticallyNextUser