Controlling Zendesk Web Widget Display in React.js

image avatar

Oussama Mangoub

Posted May 10, 2024

I'm currently integrating the Zendesk web widget into a React.js project and have encountered a specific display requirement that I'm struggling to implement. Here's a breakdown of my situation and the challenge I'm facing:

 

Issue Description:

I successfully integrated the Zendesk web widget into my React.js project by adding the widget script directly to my index.html file within the public directory. This approach allowed me to display the widget across all pages of the web app. However, I now need more granular control over when the widget is displayed based on the specific page or route within my React application.

I want to hide the Zendesk widget on certain pages, such as the login page, and selectively show it on other pages throughout the application. For instance, I'd like the widget to be hidden when users are on the login page but visible on subsequent pages once they are authenticated.

 

Is there a recommended approach or best practice to achieve this level of control over the Zendesk web widget within a React.js project? Ideally, I'm looking for a solution that integrates smoothly with React's component-based architecture.

1

1

1 comment

Date
    Newest
      image avatar

      Erica Girges

      Hi Oussama!
       
      I would suggest implementing a custom handler function that maintains/stores the state of the web widget. Maybe something like this:
       
      const useCase = {
        userLogin: false,
        otherCriteria: "something"
      };

      const handleWebWidgetDisplay = () => {
        let status = "show";
        if (useCase.userLogin === false) {
          status = "hide";
        }
        return status;
      };
       
       
       
      You could then use the show and hide API's to toggle the web widget's status on the page itself.
       
      Hope this helps!

      0

      Sign in to leave a comment.

      Didn't find what you're looking for?

      New post