Styling Consent Manager

  • Updated

Customize the appearance of your Consent Manager in the Styles tab. Adjust the banner, widget, drawer, and do not sell modal to match your website's design.

 

The Styles Tab

The Styles tab allows you to customize certain aspects of your Consent Manager's appearance.

From here, you can customize various aspects of the consent manager, including: 

  1. The Banner (cookie popup)
  2. The Drawer (storage preferences center)
  3. The Widget (icon that triggers the drawer)
  4. The Do Not Sell (do not sell modal) - optional Premier-only feature [See How to set up the do not sell modal for instructions]

Styles Page

From "Styles" you can choose: 

  • If the Banner is a box or a banner.
  • The positioning of the Banner, Widget, and Drawer.
  • The Banner Timeout on/off toggle and timeout duration settings for the Banner that displays on a timer [see Banner 1 only locations].
  • The coloration of various aspects of the Banner, Drawer, and the Do Not Sell (via preset theme or using the color selector).
  • The Privacy Policy link on/off toggle to display in the Drawer. 

 

  • The Banner, Drawer, Widget, and, if applicable, the Do Not Sell buttons to view a preview of the various components of the consent manager based on your selected settings. 
  • Use the Template button to view how your cookie banner and storage preferences will appear in regions with varying privacy laws by clicking on an individual template. (Note: Osano will geolocate the end-user and provide them with the banner template that is most compliant in their location.)
  • You can use the Locale dropdown to see how the language will display on the cookie banner and storage preferences for end-users. (Note: The end-user's browser preferences will determine the language displayed.)
  • The URL field is used to generate an image from the specified URL, providing a more realistic view of how your cookie banner and storage preferences will appear. 
  • Use the Clear URL button to reset the generated URL image, and then use the Load URL button to create a new URL image.
  • The Full Screen or Expand button allows you to view your style choices in a full-screen mode. This will enable you to get a better idea of how the dialog and drawer will look in real-time, providing a clear indication of the scale and potential user experience. 

Publishing your Configuration Changes

Once you are ready to publish your customizations to your configuration, select Save Changes and then Publish.

Important Note: Browser caching may delay these changes for returning visitors for about 24 hours. If you would like to see these changes immediately, you can do so in a private or incognito window.

[See Changes in Osano Cookie Consent Manager Not Reflected on Website if having trouble viewing your changes].

Advanced CSS Customizations

If you would like to make specific customizations to your consent manager overlay, you can do so using CSS.

All advanced CSS customization must be done outside of the Osano application, directly within your site's HTML or an installed stylesheet. For additional details, you can refer to our comprehensive list of Osano Classes or view our prewritten Common CSS Changes.