How to Set Up Option 2 and Option 3 in Webflow from Scratch

Introduction

In this tutorial, you will learn how to set up Option 2 and Option 3 from scratch using Webflow. These two options are similar in setup, with the key difference being in the behavior of the cookies when a user lands on the site. Option 2 loads cookies as soon as the user lands, while with Option 3, cookies are only loaded when the user accepts them. It's important to note that Option 3 is GDPR compliant, making it a more preferable choice for websites. However, Option 2 can provide more statistical data about website visitors. Now, let's dive into the step-by-step process of setting up these options in Webflow.

Setting Up the UI Components

1. Start by adding a div block to the body in Webflow. Set the position to fixed and assign the class cookie-consent-wrapper. Ensure it spans across the whole screen.
2. Inside the cookie-consent-wrapper, add a div with the class cookie-banner. Set its position to absolute and position it at the bottom-right corner. Adjust padding, margin, background color, and font color to style the banner.
3. Inside the cookie-banner, add a heading and a paragraph, as well as buttons for "Accept All," "Deny," and "Preferences." Style the buttons as required, and ensure they are visually appealing and accessible.

Adding Attributes to Components

1. Assign the fscc attribute to the cookie-banner component with a value of banner.
2. Assign fscc attributes to the "Allow," "Deny," and "Preferences" buttons with values of allow, deny, and open preferences respectively. These attributes are essential for managing the behavior of the components based on the user's preferences.

Creating Symbol for Reusability

1. Select the outermost component of the cookie consent (cookie-consent-wrapper) and save it as a symbol named cookie-consent. This allows you to reuse the symbol on multiple pages of your project.

Setting up Cookies Script

1. Go to Project Settings and click on Custom Code.
2. Add the type="fscc" attribute to all the cookie issuing scripts in the project settings. This attribute enables the scripts to be turned on and off based on the user's preferences, ensuring GDPR compliance.
3. If using Finn Suite Cookie Consent script, specify the type as opt-out for Option 2 and opt-in for Option 3 within the script.

Finalizing and Testing

1. After completing the setup, publish your site to see the cookie consent in action.
2. When the user interacts with the consent banner by accepting or denying cookies, the corresponding scripts will be turned on or off based on the defined attributes.

By following these steps, you can effectively set up Option 2 and Option 3 cookie consent in your Webflow project, ensuring compliance and providing a seamless user experience.

Disclaimer: Please note that the actual implementation of the visual and interactive elements in Webflow may vary based on your specific design requirements and preferences. Always ensure that your website complies with relevant data privacy regulations and seek legal advice if necessary before deploying cookie consent solutions.

Thank you for watching this tutorial, and be sure to check out more Webflow tutorials on Finn Suite's official channels to further enhance your skills in web development.