Skip to main content
Solved

How do I hide the freshchat widget on certain pages of my website?

lfirth
Apprentice

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

Best answer by srikanthkarunakaran

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/

View original
    C
    1 person likes this
    • C
      cherif25024
    Did this topic help you find an answer to your question?

    8 replies

    F
    Community Debut
    • Frente
    • Community Debut
    • 1 reply
    • August 31, 2023

    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 = [
                '/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.

    alyssia.correa
    ancileric
    2 people like this
    • alyssia.correa
      alyssia.correa
    • ancileric
      ancileric
    evaelfie
    Community Debut
    • evaelfie
    • Community Debut
    • 1 reply
    • August 13, 2024
    lfirth wrote:

    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>
     

    alyssia.correa
    ancileric
    2 people like this
    • alyssia.correa
      alyssia.correa
    • ancileric
      ancileric
    alyssia.correa
    Community Manager
    Forum|alt.badge.img+8
    • alyssia.correaCommunity Manager
    • Community Manager
    • 618 replies
    • September 16, 2024

    Tagging @srikanthkarunakaran to jump in here!

    Ally, Freshworks Community Manager
    srikanthkarunakaran
    Community Manager
    Forum|alt.badge.img+6

    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/

    Senior Technical Product Specialist, Srikanth NK
    alyssia.correa
    1 person likes this
    • alyssia.correa
      alyssia.correa
    M
    Community Debut
    • mitroc
    • Community Debut
    • 1 reply
    • November 19, 2024

    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?

    sufian
    1 person likes this
    • sufian
      sufian
    shanewatson5091
    Community Debut
    srikanthkarunakaran wrote:

    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?

    srikanthkarunakaran
    Community Manager
    Forum|alt.badge.img+6

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

    Senior Technical Product Specialist, Srikanth NK
    julianpapaya
    Community Debut
    • julianpapaya
    • Community Debut
    • 1 reply
    • February 24, 2025

    To hide the Freshchat widget on specific pages, use this JavaScript code:

     

    window.fcWidget.init();

    if (window.location.pathname === '/page-to-hide') {
      window.fcWidget.hide();
    }

    Explanation:

    • Replace '/page-to-hide' with the URL path of the page where you want to hide the widget.

    • To hide it on multiple pages, use this version:

      const hidePages = ['/page1', '/page2', '/page3'];
      if (hidePages.includes(window.location.pathname)) {
        window.fcWidget.hide();
      }
       

      This will hide the widget only on the pages you specify.

      Stylish Name Generator

       

       

       

       

    Reply


    Most helpful members this week

    Terms of UsePrivacy Notice