Hiding the Cookie Widget (Cookie Icon)

  • Updated

Learn how to remove the cookie widget while ensuring compliance by providing alternative access to Storage/Cookie Preferences using CSS. Follow our step-by-step guide to hide the Cookie Widget using CSS and trigger the Storage Preferences drawer with JavaScript. Explore our examples for seamless integration and compliant cookie management on your website.

 

For more information on our CSS classes, view Customizing/Styling Osano CMP.

 

To be compliant under various privacy laws, please know that if you choose to remove the cookie widget, you MUST give your users another way of accessing the Storage/Cookie Preferences. The "Storage Preferences" or "Drawer" is required to:

(1) Easily Explain Cookie Categories

(2) Allow Users to Understand and Change their Preferences and

(3) Disclose Cookies to End Users. 

 

You can trigger the drawer using the same widget but customizing the icon image to something more brand specific. [See Replacing the Cookie Widget for instructions]. 

Alternatively, you can hide the widget entirely and trigger the drawer via a text link which we will provide code examples for below. 

 

Hiding the Cookie Icon (Widget)

<style> .osano-cm-widget {display: none;}

 

Trigger the Storage/Cookie preferences drawer

  • Osano.cm.showDrawer('osano-cm-dom-info-dialog-open')
    • This is the preferred method.
    • In some cases, window.Osano.cm.showDrawer should be used.
  • DEPRECATED: Osano.cm.emit("osano-cm-dom-info-dialog-open")
    • This method has been deprecated. Please utilize Osano.cm.showDrawer.

 

Example

Hiding the Cookie Widget and Triggering the Drawer (Storage Preferences) using a Text Link in the Footer (Note: This is an example and may not work for all platforms.)

<head> 
    <script>YOUR OSANO.JS HERE</script> 
  <style> 
      .osano-cm-widget{display: none;} 
  </style> 
</head> 
<body> 
     <! --this should go in the site "footer"--> 
     <a href="#" onclick="Osano.cm.showDrawer('osano-cm-dom-info-dialog-open')">Cookie Preferences</a> 
</body>

Example: window.Osano.cm.showDrawer

@click="window.Osano.cm.showDrawer('osano-cm-dom-info-dialog-open')"