Replacing the Cookie Widget

  • Updated

 

One question that we sometimes get asked is, "Can Change/Remove the Cookie Widget/Icon from the bottom of the screen?"

The answer is: "Yes, using CSS." (View Customizing/Styling Osano CMP for all CSS classes). Using CSS, you can trigger the drawer using the same widget but customizing the icon image to something more brand specific. 

Alternatively, you can hide the widget entirely and trigger the drawer via a text link.

See Hiding the Cookie Widget for instructions. 

Example: Replacing the Cookie Icon with a Different Image

(Note: This is an example and may not work for all platforms.)

<head>
    <script>YOUR OSANO.JS HERE</script>
  <style>
      .osano-cm-widget {
        background-image: url(https://cdn.osano.com/hubfs/assets/logos/1000w/Indigo%20O%20on%20Transparent-1000px.png);
        background-size: contain;
        border-radius: 100%;
        width: 40px;
        height: 40px;
        right: 1rem;
        bottom: 1rem;
        opacity: 0.9;
        transition-property: opacity, visibility, transform;
                        }
      .osano-cm-widget svg {
        display: none;
                        }
      .osano-cm-widget:focus,
      .osano-cm-widget:hover {
        opacity: 1;
        transform: none;
                        }
      .osano-cm-widget:active {
        transform: translateY(1px);
                        }
  </style>
</head>