How can I implement a cookie consent modal window using the Insite tool in Webflow and properly configure the callback hook to allow users to opt out of using cookies?

To implement a cookie consent modal using the Insite tool in Webflow and properly configure a callback hook for opt-outs, follow these detailed steps to ensure full compliance and functional integration.

​

1. Add Insite to Webflow Site

​

• Sign up/login at getinsite.io and create a new site project.
• Configure your consent settings within the Insite dashboard (styling, cookie categories, etc.).
• Copy the Insite embed script provided for your project.
• In Webflow, go to Project Settings > Custom Code and paste the Insite script in the Footer section.
• Save changes and Publish your site for the script to load.

​

2. Display a Cookie Consent Modal

​

• After publishing, the default Insite modal should appear automatically on page load.
• Customize its appearance directly in the Insite dashboard, or by overriding styles in Webflow (via custom CSS in Project Settings if needed).
• Make sure at least one category (e.g., “Analytics”) is set to require user opt-in if you need true consent handling.

​

3. Use the Callback Hook for Opt-Out Logic

​

• Insite supports a JavaScript callback that lets you run custom functions when a user accepts or declines specific cookie categories.
• Insert your callback logic within the same footer area of your Webflow Custom Code section, after the Insite embed script.

​

Example JavaScript for Insite callback (insert inline, cleaned up, not as raw code block):

​

window.insiteCMP.onConsent(function(consent) {
  if (!consent.preferences.analytics) {
    // User has opted out of analytics cookies
    // Add your cookie opt-out logic here (e.g., disable Google Analytics)
    if (window['ga-disable-UA-XXXXXX-Y'] !== undefined) {
      window['ga-disable-UA-XXXXXX-Y'] = true;
    }
  }
});

​

• Important: Replace UA-XXXXXX-Y with your actual Google Analytics ID or the ID of any third-party script.
• Trigger other cleanup logic here as needed (e.g., deleting cookies, stopping tracking pixels, etc.).

​

4. Handle Dynamic Script Blocking Properly

​

• Insite auto-blocks scripts based on your category settings (e.g., blocking Tag Manager if tagged as Analytics).
• If you’re adding scripts manually, wrap them with the Insite script category wrapper. For example, include a script only when the user accepts a category.

​

Example: Use data-insite-category="analytics" as an attribute on the script tag.

​

5. Test Consent and Opt-Out Behavior

​

• Open your live site and confirm that the modal appears.
• Choose different options in the modal and ensure your callback works with each trigger.
• Use Chrome DevTools > Application > Cookies to verify correct cookie storage and blocking behavior.

​

Summary

​

To implement a cookie consent modal with Insite in Webflow, embed the script in your footer, configure your settings in the Insite dashboard, and use the window.insiteCMP.onConsent callback to handle opt-out actions. This ensures users can decline cookies and your site responds appropriately.