print

Below is a step-by-step guide showing how to integrate the TRUENDO Consent Management Platform (CMP) into a Webflow site using Webflow’s built-in custom code feature. It combines the essential points from TRUENDO’s general website integration guide and Webflow’s instructions for inserting custom scripts.

Integrating TRUENDO with Webflow

1. Introduction#

TRUENDO is a Consent Management Platform (CMP) that helps you handle user consent for cookies and tracking scripts in compliance with regulations like GDPR and CCPA. Webflow allows you to add custom code to the <head> of your site, making it straightforward to install TRUENDO.

In this guide, you will learn two ways to integrate TRUENDO into your Webflow project:

  1. Auto-Blocking Integration (recommended for most cases)
  2. Manual (Non-Auto-Blocking) Integration (if you prefer custom cookie blocking controls)

2. Prerequisites#

  1. TRUENDO Account & Site ID

    • Sign up or log in at TRUENDO Console.
    • Retrieve the Site ID for your specific project.

  2. Webflow Project

    • You must have a Webflow project (site) and the ability to add custom code in Site settings → Custom code tab.
    • Note: You need at least a Webflow plan that supports custom code.

3. Integration with Auto-Blocking#

3A. Get Your TRUENDO Auto-Blocking Script

  1. Log In to TRUENDO

  2. Navigate to “Banner” Settings

    • In the left sidebar, click on Banner to find integration instructions.

  3. Copy the Auto-Blocking Script

    • Look for the script snippet labeled “Integration via Script” which looks like this:

      <!-- TRUENDO Privacy Center -->
<script id="truendoAutoBlock" type="text/javascript" src="https://cdn.priv.center/pc/truendo_cmp.pid.js" data-siteid="YOUR_SITE_ID"></script>
<!-- End TRUENDO Privacy Center -->

    • Important: Replace YOUR_SITE_ID with the actual Site ID from your TRUENDO Console.

3B. Insert the Script into Webflow’s Head Code

  1. Open Your Webflow Project’s Site Settings

    • In Webflow, go to Project Settings → Custom Code tab.

  2. Paste Code into the “Head Code” Section

    • In the Head code box, paste the TRUENDO script at the very top, before any other scripts or tags you might have.

    • Example:

      <!-- TRUENDO Privacy Center -->
<script id="truendoAutoBlock" type="text/javascript"
        src="https://cdn.priv.center/pc/truendo_cmp.pid.js"
        data-siteid="YOUR_SITE_ID">
</script>
<!-- End TRUENDO Privacy Center -->

  3. Save Changes & Publish

    • Click Save changes at the bottom right.
    • Return to your site’s Designer or Editor and Publish your site to apply the changes.

That’s it! You have successfully integrated TRUENDO CMP with auto-blocking enabled on your Webflow site.

4. Integration Without Auto-Blocking (Manual Setup)#

If you prefer finer control over which scripts get blocked or allowed based on user consent, use TRUENDO’s non-auto-blocking script. This requires you to manually connect scripts to consent categories.

4A. Replace the Auto-Blocking Script

  1. Get the Non-Auto-Blocking Script

    • In the TRUENDO Console, look for the non-auto-blocking snippet:

      <!-- TRUENDO Privacy Center -->
<script async id="truendoPrivacyPanel" type="text/javascript"
        src="https://cdn.priv.center/pc/app.pid.js"
        data-siteid="YOUR_SITE_ID">
</script>
<!-- End TRUENDO Privacy Center -->

  2. Insert into Webflow Head Code

    • Remove the auto-blocking snippet (if previously added).
    • In Project Settings → Custom Code → Head code, paste the above script.
    • Replace YOUR_SITE_ID with your own Site ID.

  3. Save Changes & Publish

    • Click Save changes.
    • Publish your site to activate the TRUENDO CMP on your live Webflow domain.

4B. Manually Connect Your Cookies

  1. Identify Cookies & Scripts

    • List all cookies and third-party scripts on your site requiring consent (analytics, marketing, etc.).

  2. Configure Cookies in TRUENDO

    • In the TRUENDO Console, navigate to Cookies.
    • Add each cookie, specifying its Name, Category (e.g. Necessary, Statistics, Marketing), and Description.

  3. Use the TruendoCookieControlCallback

    • After the TRUENDO script, add your custom logic to enable/disable scripts based on user consent.

    • Example:

      <script type="text/javascript">
  function TruendoCookieControlCallback(cookieSettings) {
    if (cookieSettings.statistics) {
      // Enable analytics scripts
      console.log('Statistics cookies enabled.');
    } else {
      // Disable analytics scripts
      console.log('Statistics cookies disabled.');
    }

    if (cookieSettings.marketing) {
      // Enable marketing/remarketing scripts
    } else {
      // Disable them
    }
    // ... add other categories as needed
  }
</script>

  4. Wrap Your External Scripts

    • For each script on your site that should only run after consent, add conditions in your code or load them dynamically after checking the relevant cookieSettings flags.

5. Verifying the Integration#

  1. Clear Browser Cookies

    • Before testing, clear cookies or use an incognito window.

  2. Open Your Published Webflow Site

    • Check that the TRUENDO consent banner appears on page load.

  3. Test Different Consent Scenarios

    • Accept All: Confirm that all scripts/cookies load.
    • Deny Non-Essential: Confirm that only necessary cookies and scripts load.
    • Custom Preferences: Verify that scripts run only when appropriate consent is given.

  4. Use Browser Developer Tools

    • Inspect cookies in the Application (Chrome) or Storage (Firefox) tab to confirm only consented cookies are set.
    • Check the Console or Network tab for any blocked or loaded scripts.

6. Additional Considerations#

  1. Script Load Order

    • TRUENDO recommends placing the CMP script first in the <head> to ensure it can auto-block or accurately manage scripts.

  2. Performance

    • If using the auto-blocking script, it must load early to block non-essential cookies before they’re set.

  3. Branding & Text Customization

    • In the TRUENDO Console, you can customize the banner’s color, text, and style to match your website’s look and feel.

  4. Regular Updates

    • Keep your TRUENDO script up to date to maintain compliance with evolving privacy regulations.

  5. Check Webflow’s Hosting Plan

    • Webflow requires a paid hosting plan to enable site-wide custom code in project settings.

7. Conclusion#

Adding the TRUENDO CMP to your Webflow site is straightforward once you know where to place the script. By following these steps:

  • Auto-Blocking: Copy the auto-blocking TRUENDO script into your Webflow Head code to have TRUENDO automatically detect and manage cookies.
  • Manual Integration: Use the non-auto-blocking script for more granular control, configuring each cookie category and managing scripts via the TruendoCookieControlCallback function.

You are now set up with a fully compliant consent management solution on your Webflow site. If you have further questions, feel free to contact TRUENDO Support or consult the Webflow University documentation for more information on custom code.

×