Quick Access
Set up your Quick Access method
Default Quick Access
After consent is exercised by the user (does not matter which option is selected), Beautiful Consent will transform itself to a minimised version, which we call ‘Pill’.
By default, the quick access created for your website is a floating cookie pill that will appear in the position and size that you selected during the configuration of the module.
Pill sizes
This Quick Access method can be as small and simple as a cookie icon, and as big as a large pill where the selected consent of the user is explicitly indicated. There are three sizes: small (floating button, the most preferred by most websites), medium (more detailed), and large (which explicitly shows the decision the user took about consent in your site).
Trigger Selector
If you don't like the floating pill, we can designate another element on the website to function like the pill, displaying the banner when clicked. To implement this, we need two things:
- Which element will trigger the action.
- The element’s identifier so we can execute the action.
This identifier is called a CSS Selector, which is used to target HTML elements on a webpage based on their attributes, classes, IDs, or hierarchy within the document structure.
To remove the floating pill, it is mandatory to set up a Trigger Selector method via CSS in your site. If you don't add one, the Playboard won't allow you to remove the floating element.
CSS Selector
The Trigger Selector is based on assigning the same responsability that the floating pill had, to an element within your website. For this element, we recommend to create a simple empty link in your footer with a specific ID.
Tip: you can set more than one selector for the same website. Just add a comma between each selector you want to apply. Eg: #link1,#link2
How can I get the CSS Selector of an element in my website?
Note that these steps might vary based on your browser.
- Open Developer Tools
- Right-click on the element you want to select.
- Click "Inspect" (this opens the Elements tab in DevTools).
- Find the Element in the HTML
- The element will be highlighted in the Elements panel.
- Copy the CSS Selector
- Right-click the highlighted element in the Elements panel.
- Hover over "Copy" and select "Copy selector".
- Paste the selector in the Personalization view