/ /

Installing Osano on Webflow

Updated 4 months ago

Installing the Osano.js

After creating and publishing your configuration, the "Get Code" button will become active. This button will provide you with the osano.js.

image.png

To install, copy, and paste the osano.js into the page head [<head>] for all sites you wish to monitor. Ensure that the osano.js is the first script that loads on your site.

image.png

Osano is platform-agnostic, which means the code can be added to the <head> of any site and utilized without any additional configuration.

Once the osano.js is in your site's <head>, it can take a few minutes to a few hours before the script has captured and reported cookies and scripts that exist across your sites.

Once you have collected enough reports from osano.js, you can work with your other business units to identify and classify all cookies/scripts/and local storage items. This exercise ensures that no "strictly necessary" scripts, cookies, or local storage get blocked.

We recommend users remain in "Listener" mode until you have added the osano.js into your site and have discovered and classified all relevant scripts and cookies.

image.png

In Listener mode, the consent manager will NOT block any scripts or beacons. It will NOT delete cookies. It will NOT display dialogs to your visitors. In other words, it will not alter your site in any way. You can use Osano in "Listener" mode and another CMP simultaneously if you migrate away from another provider. This way, there are no gaps in compliance.

After you have categorized each script and cookie appropriately, you can enable Permissive or Strict Mode and publish these changes.

You will now see the consent dialog on your website!

Webflow

If you have a paid Webflow account or an active site plan, you can add custom scripts that apply to your entire site or individual pages. Webflow's code sections only support HTML, CSS, and JS.

  • Step 1: Navigate to Project Settings > Custom Code.

  • Step 2: Copy and paste the osano.js into the "Head Code" section before any other <script> tags.

  • Step 3: Click save to deploy your newly added code.

Once deployed, you can manage the Osano popup entirely from your Osano Admin Portal on my.osano.com.

Troubleshooting

Scripts from the "Integrations" Tab Loading Before Osano

You may find that some third-party scripts still load before Osano, even if you've placed the osano.js script at the very top of the Custom Code section in your Site Settings.

The Problem

This typically happens when scripts are being added through Webflow's native Integrations tab (e.g., for Google Analytics, Facebook Pixel, or other marketing tools). Webflow injects these scripts before the code in the Custom Code section, meaning Osano cannot block or manage them.

The Solution

To fix this, you must disable the native integration and move the script into the Custom Code section so Osano can manage it.

  1. Disable the Native Integration:

  • In your Webflow Site Settings, go to the Integrations tab.

  • Find the integration you need to control (e.g., "Google Analytics" or "Intellimize").

  • Delete the tracking ID or any other settings for that integration and Save your changes. This will stop Webflow from injecting the script automatically.

  1. Manually Add the Script for Osano:

  • Go back to the Custom Code tab.

  • In the Head Code block, find your Osano script (which should be first).

  • After the osano.js script, paste the script tag for the tool you just disabled.

Was this article helpful?
Subscribe to receive updates on this article