Invoking event lifecycle of tiledesk widget

Technical issue
1

Hi team,

I am using tiledesk widget with custom authentication (only for certain unique urls) in nextjs platform and when I switch to pages where widget is not loaded and again back to widget script installed paged the event lifecycle is not getting invoked (onLoadParams) and widget is not able to load

2

Hi @pavank10x,
welcome to Tiledesk Community Forum.
Could you please also share the code you’re using?
It should be something that can be runnable by the developers of the Community.
Thank you!
Michele

3

Hi @michele ,

UseEffect where tiledesk widget is initializing

// useEffect for Tiledesk widget
  useEffect(() => {
    if (courseSlug === "bootcamp-internal-testing") {
      let tiledeskUserdetails: ITiledeskUserDetails = {
        name: user.firstName!,
        email: user.email,
        problem: problemID!,
        course: courseSlug!,
        customID: user.uuid + "_" + problemID + "_" + courseSlug,
      };

      TiledeskWidget(tiledeskUserdetails);

      return () => {
        TildeskInitialisation();
      };
    }
  }, [courseSlug, problemID, user.email, user.firstName, user.uuid]);

import { TiledeskJWTToken } from "@/utils/tiledeskJWT";

export interface ITiledeskUserDetails {
  name: string;
  email: string;
  problem: string;
  course: string;
  customID: string;
}

export interface ITiledeskPayload {
  _id: string;
  sub: string;
  email: string;
  aud: string;
}

// Script by Tiledesk service
export function TiledeskChatScript(d: Document, s: any, id: any) {
  var w = window;
  var d = document;
  var i: any = function () {
    i.c(arguments);
  };
  i.q = [];
  i.c = function (args: any) {
    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/v5/launch.js";
  fjs.parentNode.insertBefore(js, fjs);
}

export function TiledeskWidget(user: ITiledeskUserDetails) {
  let tiledeskPayload: ITiledeskPayload = {
    _id: `${process.env.NEXT_PUBLIC_WIDGET_ID}` + "_" + user.customID, // Need to add userID (hashed) inplace of empty string
    sub: "userexternal",
    email: user.email,
    aud: "https://tiledesk.com/projects/" + `${process.env.NEXT_PUBLIC_WIDGET_ID}`,
  };
  let signedToken = TiledeskJWTToken(tiledeskPayload);

  if (typeof window !== "undefined") {
    window.tiledeskSettings = {
      projectid: `${process.env.NEXT_PUBLIC_WIDGET_ID}`,
      singleConversation: true,
      userFullname: user.name,
      userEmail: user.email,
      autoStart: false,
      hideCloseConversationOptionMenu: true,
      dynamicWaitTimeReply: false,
      showWaitTime: false,
      customAttributes: {
        problem: "https://6793fdf6.widgets.sphere-engine.com/lp?hash=" + user.problem,
        course: user.course,
      },
    };

    TiledeskChatScript(document, "script", "tiledesk-jssdk");
    /* eslint-disable */
    window.Tiledesk("onLoadParams", function (_eventData: any) {
      window.tiledesk.signInWithCustomToken("JWT " + signedToken);
    });
    /* eslint-enable */
    window.Tiledesk("onAuthStateChanged", function (eventData: any) {
      if (eventData.detail.isLogged) {
        window.Tiledesk("show");
      }
    });
  }
}

export function TildeskInitialisation() {
  return window.Tiledesk("reInit");
}
4

Hi @pavank10x

Can you share with us a live page/website with the “minimal” code reproducing the problem?

It’s important to have a minimalistic, clean example that easily and fast reproduces the issue
to allow our team to fix your issue as fast as possible.

Thanks for your patience.

Andrea

5

We are currently working in localhost, so there is no live website, but below is the minimal code

// useEffect for Tiledesk widget used in file1 (where we need widget)
  useEffect(() => {
      let tiledeskUserdetails = {
        name: "Demo",
        email: "demo@gmail.com",
        customID: name+email,
      };

      TiledeskWidget(tiledeskUserdetails);

      return () => {
        TildeskInitialisation(); 
      };
  }, []);

// Below are the respective functions used in above useEffect
import { TiledeskJWTToken } from "@/utils/tiledeskJWT";

// Script by Tiledesk service
export function TiledeskChatScript(d: Document, s: any, id: any) {
  var w = window;
  var d = document;
  var i: any = function () {
    i.c(arguments);
  };
  i.q = [];
  i.c = function (args: any) {
    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/v5/launch.js";
  fjs.parentNode.insertBefore(js, fjs);
}

export function TiledeskWidget(user) {
  let tiledeskPayload: ITiledeskPayload = {
    _id: `${process.env.NEXT_PUBLIC_WIDGET_ID}` + "_" + user.customID, 
    sub: "userexternal",
    email: user.email,
    aud: "https://tiledesk.com/projects/" + `${process.env.NEXT_PUBLIC_WIDGET_ID}`,
  };
  let signedToken = TiledeskJWTToken(tiledeskPayload); // Created JWT token according to tiledesk documentation

  if (typeof window !== "undefined") {
    window.tiledeskSettings = {
      projectid: `${process.env.NEXT_PUBLIC_WIDGET_ID}`,
      singleConversation: true,
      userFullname: user.name,
      userEmail: user.email,
      autoStart: false,
    };

    TiledeskChatScript(document, "script", "tiledesk-jssdk");
    window.Tiledesk("onLoadParams", function (_eventData: any) {
      window.tiledesk.signInWithCustomToken("JWT " + signedToken);
    });

    window.Tiledesk("onAuthStateChanged", function (eventData: any) {
      if (eventData.detail.isLogged) {
        window.Tiledesk("show");
      }
    });
  }
}

export function TildeskInitialisation() {
  return window.Tiledesk("reInit");
}
6

Hi @pavank10x

We generally use replit to live reproduce the bug behaviour, like in this case

Creating a website is totally free on replit, and the website will be online in less then a minute.

If you put your code there you can go live with your configuration and for us will be very easy to analyse your problem.

Simply start by creating a new HTML site:

image
image992×697 92.3 KB

Let us know when you’ve done.

Andrea

7

Hi Andrea,

below is the platform link where we have integrated the tiledesk widget according to our usecase, (please share your respective gmail id so that I can enroll you in one of module so that you can test it)

Link : https://staging.student.the10xacademy.com/

8

Hi @pavank10x , please follow our policies to help us solve the issue. Having “minimal” code si the only way we can help. Moving us to your entire software is not a viable way to approach the problem.

Please read our policies for support here: https://developer.tiledesk.com/support
Especially point 1 / 2

  1. When opening an issue, create a small, isolated, simple, reproduction of the issue using an online code editor (like replit, codepen, codesandbox etc.) if possible and a GitHub repository if not. The process may help you discover the underlying issue (or realize that it’s not an issue with the project). It will also make it easier for maintainers to help you resolve the problem.

  2. Your question must be well-documented and you should provide the minimum code required to reproduce the problem. When possible always provide a running example to that gives evidence of the issue.

Thanks for your understanding