Cookiebot Declaration Tester

Watch the video explanation.

Get the remix.

How to Implement Cookiebot in Framer

By Chris Kellett

Cookiebot is a widely used solution for ensuring compliance with data privacy regulations such as GDPR and CCPA on websites. Integrating Cookiebot into your Framer prototype is essential for testing user consent functionalities. Follow these steps to seamlessly implement Cookiebot in your Framer project:

Step 1: Add Cookiebot Script to Each Page

In Framer, navigate to the settings of each page in your prototype. Locate the <head> tag section and ensure the Cookiebot script is the first thing to load on the page. This ensures that Cookiebot initializes before any other scripts, allowing for proper functionality.

Step 2: Create a Declaration Page

Create a separate page within your Framer project, naming it something like "declaration." In this page, place the declaration code within the <body> tag. It's crucial not to add any additional content to this page. After adding the declaration code, insert the following code snippet at the end of the <head> tag to prevent badges from displaying:

<style>
    #CookiebotWidget, #framer-badge-container, .__framer-badge {
    display: none;
    opacity: 1 !important;
}
</style

This ensures that the Framer and Cookiebot badges don't show up during subsequent stages.

Step 3: Create a Declaration Display Page

Now, create a new page within your Framer project and name it something like "declaration-display." Design this page as you would any other, placing elements and content where necessary.

Step 4: Add the iFramer Custom Code Component

To display the declaration on your "declaration-display" (see details below for creating the component) page, use the iFramer custom code component. Insert this component where you want the declaration to appear, and resize it to fit the content.

Why Follow This Method?

This method is necessary because Cookiebot scripts need to work together on the page, which may not be possible if you attempt to add the declaration via an embedded method. Placing the declaration in a separate page ensures that it doesn't interfere with other scripts or functionalities in your Framer prototype, allowing for accurate testing of Cookiebot's consent functionalities.

By following these steps, you can seamlessly integrate Cookiebot into your Framer project, ensuring compliance with data privacy regulations and providing a better user experience for your website visitors.

Create the iFramer Component

To create the iFramer component in Framer, follow these steps:

Open Framer
Create a New Code Component
Navigate to the code component section in Framer and create a new code component. Name it iFramer.tsx.
Insert the Code
Copy and paste the following code into the iFramer.tsx file:

// A component by Chris Kellett framerverse.com/Framer Depot
import * as React from "react"
import { useState } from "react"
import { Frame, addPropertyControls, ControlType } from "framer"

export function CustomIframe({ initialUrl }) {
    const [url, setUrl] = useState(initialUrl)

    return (
        <div style={{ width: "100%", height: "100%", position: "relative" }}>
            <iframe
                src={url}
                style={{
                    width: "100%",
                    height: "100%",
                    border: "none",
                    overflow: "hidden",
                }}
                frameBorder="0"
                scrolling="no"
            />
        </div>
    )
}

// Add property controls for the URL
addPropertyControls(CustomIframe, {
    initialUrl: {
        title: "Initial URL",
        type: ControlType.String,
        defaultValue: "https://example.com",
    },
})

Save the Component

Save the iFramer.tsx file within your Framer project.

Explanation:

The provided code creates a custom iFramer component in Framer. This component allows you to embed an iframe within your Framer prototype and specify the initial URL through a property control. It uses React hooks to manage the URL state and dynamically update the iframe source. This component is essential for embedding the Cookiebot declaration within your Framer project and displaying it on the "declaration-display" page as instructed earlier.