Cookie component - ariel-fer/Araena GitHub Wiki
[[TOC]]
Provides the web page with a bottom bar that asks for user's consent, as well as providing a way to access cookie preferences.
This component comes already in the baseline template, and can be added by adding the webflow component wc-GDPR
This component contains 3 main elements:
| Element | Description |
|---|---|
| fs-cc-banner_component | Main banner displayed at the bottom of the page |
| fs-cc-manager_component | (Optional) Displays a small banner that displays always as sticky and can display the main banner when required by the user. |
| fs-cc-prefs_component | Panel that displays cookie preferences in detail. |
Have in mind this component is unique, and for that reason, elements within cannot be replaced by others defined in the Style guide (buttons for example). styling must be replicated in these elements instead.
These elements are all hidden by default in Webflow. To modify them, you can set them as display:block temporally.
Colors and Styling (if applicable) can only be applied to the following elements:
| Element | Description |
|---|---|
| fs-cc-banner_component | Background of the whole component. |
| fs-cc-banner_text | Text |
| fs-cc-banner_text-link | Text links |
| fs-cc-banner_button | Primary button |
| fs-cc-banner_button fs-cc-button-alt | Secondary button |
| fs-cc-banner_close | close button |
| Element | Description |
|---|---|
| fs-cc-prefs_form | Background |
| fs-cc-prefs_title | Title |
| fs-cc-prefs_text | Text |
| fs-cc-prefs_button | Primary button |
| fs-cc-prefs_checkbox | Checkbox. Important: background can only be changed from the interaction section in webflow |
| fs-cc-prefs_label | Label |
For buttons that require to open the preferences panel, a custom attribute must be applied:
fc-cc: open-preferences
After publishing changes in webflow, go ahead and try the following:
- Delete cookies from the site, and verify that after a refresh the banner appears at the bottom as styled.
- Attempt to click on a button that holds the "Cookie preferences" custom attribute and verify that the panel opens and also has the styling applied.
- Click on accept all cookies, and then refresh the page. make sure the banner does not display anymore.