How to Embed Consent-Compliant Iframes in Webflow

In case you are using embedded iFrames on your page, please follow the documentation below to make them cookie-compliant and ensure the iFrame is displayed only after users have given consent.

Follow this step-by-step guide to embed iFrames:

Note: Consent Pro is the standalone successor to the Cookie Consent solution previously included in Finsweet Components. You may still encounter mentions of “Cookie Consent” or “Components” in the screenshots of this documentation, but they remain accurate and applicable for following the tutorial.

Select a category for the iFrame detected in the script tab.

The iFrames will be detected by our solution, allowing you to update the code to make them compliant.

Screenshot of Consent Pro by Finsweet showing cookie consent script settings with YouTube iframe update alert.

Go to the page where this iFrame is placed.

Our solution includes a link that shows where to update the iFrame. Click the link to go directly to the page.

Interface showing a prompt to update a YouTube iframe with marketing category toggled and code snippet displayed.

Add an Code Embed element to the page.

This embed code with the updated iFrame will display a disabled iFrame, which may not be ideal for user experience. We highly recommend using our iFrame embed element with a placeholder that prompts the user to consent before loading it.

To do this, click the button below to copy the element and paste it into your page:

Copy iFrame Element

Code Embed Editor window with empty custom code input and warnings about code validation and security.

Copy and paste the updated code inside the Code Embed.

This is the updated iFrame code with the required attributes to make it consent-compliant. Our solution adds the attributes fs-consent-src and fs-consent-categories to prevent the iFrame from loading until users have consented to the chosen category.

Screenshot of code editor showing iframe embed code for cookie consent video in Webflow with Finsweet components.

Publish your project! Done!

Still need help?

Get Support