Skip to main content
Visit Freshworks.com Visit Freshworks

This doesn’t work: https://support.freshchat.com/support/solutions/articles/238297-how-do-i-hide-the-freshchat-widget-on-certain-pages-of-my-website-

I get the following console error: Uncaught TypeError: Cannot read property 'init' of undefined

To hide the Freshchat widget on certain pages of your website, you can use JavaScript to dynamically control its visibility based on the page being loaded. Here's how you can achieve this:

Identify the Freshchat Widget Element:
First, identify the HTML element that represents the Freshchat widget on your website. Typically, it might be an iframe, a floating div, or another HTML element.

Add JavaScript Code:
In the <head> section of your HTML or in a separate JavaScript file, add the following code to control the visibility of the Freshchat widget based on the current page.

html
Copy code
<script>
    // Function to hide the Freshchat widget
    function hideFreshchatWidget() {
        // Replace 'widgetElementId' with the actual ID or selector of the Freshchat widget element
        var widgetElement = document.getElementById('widgetElementId');
        
        if (widgetElement) {
            widgetElement.style.display = 'none';
        }
    }

    // Check the current page and decide whether to hide the widget
    window.onload = function() {
        var currentPage = window.location.pathname; // Get the current page's URL path
        
        // List of pages where you want to hide the Freshchat widget
        var pagesToHideWidget = h
            '/page-to-hide-widget-1',
            '/page-to-hide-widget-2',
            // Add more page URLs as needed
        ];
        
        if (pagesToHideWidget.includes(currentPage)) {
            hideFreshchatWidget();
        }
    };
</script>
Adjust Element ID and Page URLs:
Replace 'widgetElementId' with the actual ID or selector of the HTML element representing the Freshchat widget on your site. Also, update the pagesToHideWidget array with the URLs of the pages where you want to hide the widget.

Include the Script:
Make sure to include this JavaScript code on all the pages of your website where you want to control the visibility of the Freshchat widget.

Remember that this solution hides the widget on the client-side using JavaScript. If you need more advanced control or if your pages use AJAX to load content dynamically, you might need to adapt the solution accordingly. Always test thoroughly to ensure that the widget's behavior is as expected on different pages of your website.

This doesn’t work :https://support.freshchat.com/support/solutions/articles/238297-how-do-i-hide-the-freshchat-widget-on-certain-pages-of-my-website-

I get the following console error: Uncaught TypeError: Cannot read property 'init' of undefined

Identify the Freshchat Widget Element: Determine the HTML element that represents the Freshchat widget on your website. It's usually an iframe or a div element.   
Write JavaScript Code: Create a JavaScript code snippet that hides or shows the widget based on the current page URL.   
Implement Conditional Logic: Use JavaScript's conditional statements (if, else if, else) to check the URL and apply the appropriate action.

<script>
  window.onload = function() {
    var freshchatWidget = document.getElementById('freshchat-widget'); // Replace with your widget's ID
    var currentUrl = window.location.href;

    if (currentUrl.includes('page-to-hide-widget')) {
      freshchatWidget.style.display = 'none';
    } else {
      freshchatWidget.style.display = 'block'; // Or any other desired display value
    }
  };
</script>
 

Tagging @srikanthkarunakaran to jump in here!

Hi @lfirth: 

Can you please try the below script which will ensure to hide the chat in the desired page?

<script>
  window.fcWidgetMessengerConfig = {
    config: {
      headerProperty:{
        hideChatButton: true,
      }
    }
  }
</script>
<script src='//fw-cdn.com/1*****7/2*****4.js' chat='true'></script>

For more customization, please use this link: https://developers.freshchat.com/web-sdk/v2/

Oh wow, I feel like I've traveled back to the year 2000 🙂. Seriously, who in this day and age, while taking their business seriously, writes in vanilla JS? Where, I ask, are the SDKs for ReactJS, NextJS, Vue, Svelte, and so on?

Hi @lfirth: 

Can you please try the below script which will ensure to hide the chat in the desired page?

<script>
  window.fcWidgetMessengerConfig = {
    config: {
      headerProperty:{
        hideChatButton: true,
      }
    }
  }
</script>
<script src='//fw-cdn.com/1*****7/2*****4.js' chat='true'></script>

For more customization, please use this link :https://developers.freshchat.com/web-sdk/v2/

Hi, is there any auto-plugin for that to do it automatically, or should I follow the manual approach?

Hi ​@shanewatson5091 : To hide in certain pages, the manual approach is the best possible option at the moment.

Reply


Terms of Use