There are multiple ways of adding a cookie banner on your landing page. You may either use the Onepage cookie banner, or integrate an external cookie banner over custom code.
🎬 At the end of the article, you'll find our latest video tutorial!
To set up the cookie banner in Onepage follow these steps:
Step 1: Find the cookie banner settings
Open your project in Onepage and go to project settings ➡️ Cookie Banner.
Step 2: Select cookie banner type: Notification, Compact or Advanced
Three types are available: "Notification", "Compact" or "Advanced".
Hint: The "Notification" is accessible with all licences, including the free one.
The "Compact" and "Advanced" banners can be accessed only with the Advanced and Expert licences.
Step 3: Save
Once you complete the adjustments, click on “Save Changes”.
Now let us adjust the cookie banner to your specific requirements
Our cookie banner provides a range of options and features that enable customization to suit your preferences. Let us now examine each of these in detail.
1. Content tab
The "title" and "description" fields are self-explanatory, providing the means to insert the necessary text into your banner.
The "Block third-party content" option allows you to block external elements, such as videos, maps and custom code. The page must be scanned for the affected elements to be recognised.
If this setting is activated, the elements mentioned above are covered by a "Consent Overlay". This will only take effect if the visitor ignores the cookie banner or rejects the required cookies.
The "button" field enables you to change the text for the "accept" button.
This option is only available in the "notification" type of banner.
The "cookie policy" option enables you to add the URL to your privacy policy or any other necessary legal documents.
Please make sure to provide the full URL to your legal document. For example: https://yourwebsite.com/privacy
Note, you can add up to 2 document URLs here.
2. Design tab
You can set the position of your cookie banner. There are a total of five options available for selection.
Additionally, there are 6 colour options to choose from. Please note, the specific colours are determined by your project settings.
You can adjust your colours, by opening your page and going to the design → color section.
If needed, you can activate the "same color button" option.
By enabling the "Block page scroll" option, the visitor is required to either accept or decline the cookie banner prior to interacting with your page.
This is especially useful in combination with the "center position"
The "align bullet left" option allows determining the position of the cookie banner "lock" icon.
This icon is displayed on the lower right side of the screen by default, after the cookie banner is accepted or declined, and enables the visitor to modify their consent.
3. Edit cookie list
This tab is only available in the "compact" and "advanced" banners.
Here you can determine what cookies are enabled by default.
Additionally, it allows you to scan your webpage or manually add a cookie, in case it is not identified by the scan.
Finally, it is possible to edit a particular cookie by clicking on it.
❗️Lastly, please always make sure to save your changes and to click on "Update", to ensure that your changes are reflected on the published page❗️
How to integrate cookie external banners
To integrate an external cookie banner, you can generate it or embed it with service providers such as Cookiebot and integrate it to Onepage via custom code.
It may take up to 24 hours for the banner to be active
Video Tutorial
For a clearer overview of the process, you can also watch our video tutorial below:
💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂