All Categories Quick Guides Hide/Show widget in some cases

Hide/Show widget in some cases

Dynamically hide the widget on certain pages of your website.

By Stefan Dreßler
February 8, 2021

In order to control the widget, you could look for the existence of an element with an id or a class name. If it is present in the DOM you can simply initiate or not initiate the widget.

The default widget snippet contains the setting "data-auto-init". This will create the bubble as soon as the widget script is loaded by your browser. In order to be able to manually control the loading of the widget, it's important to remove "data-auto-init" from your snippet code. Please read the article Widget Javascript API first!

If you have removed "data-auto-init" from the widget code you are able to control the loading of the widget. Here are some examples to prevent the loading of the widget in some cases.

Prevent loading by id

Load widget only if the element with id does not exist on the page

If there is a certain element id that should prevent the widget from being loaded.

...

   if(!document.getElementById('element-id')) 
   {
      HelpWidget('init');
   }

...

Make sure to replace
'element-id' in this example.

Prevent loading by class name

Load widget only if the element with a certain class name not exists

You could add the class "do-not-load-helpspace-widget" to any element on the page where you do not want to load the widget. Of course, you can use just any class name.

...

   if(!document.getElementsByClassName("do-not-load-helpspace-widget").length) 
   {
      HelpWidget('init');
   }

...

Make sure to replace the
'some-classname' in this example.

Prevent loading by URL

Load widget only if the current page URL does not contain one of the given pathnames.

...

   if(!["/category/page1", "/some-page"].includes(window.location.pathname)) 
   {
      HelpWidget('init');
   }

...

Here some more Window.location variables you could use.

Variable

Output

location.href

https://developer.mozilla.org:8080/en-US/search?q=URL#search-anchor

location.protocol

https:

location.host

developer.mozilla.org:8080

location.hostname

developer.mozilla.org

location.port

8080

location.pathname

/en-US/search

location.search

?q=URL

location.hash

#search-anchor

location.origin

https://developer.mozilla.org:8080

Source: https://developer.mozilla.org/en-US/docs/Web/API/Location

Was this article helpful?

Thanks for your feedback!