Integrating TRUENDO CMP with Wix

Introduction#

This guide provides step-by-step instructions on how to integrate the TRUENDO Consent Management Platform (CMP) into your Wix website. TRUENDO CMP helps you manage cookies and user consent in compliance with privacy regulations like GDPR. By following this guide, you'll learn how to set up custom code, configure placeholders for iFrames, and ensure optimal data privacy management on your Wix site.

1. Prerequisites#

Before you begin, ensure you have the following:

Wix Premium Plan: TRUENDO only works on Wix Premium Plans.
Access to Your Wix Account: Ability to edit site settings and custom code.
TRUENDO Account: If you don't have one, you'll need to create it and obtain your Site ID.
Basic Understanding of HTML and JavaScript: Familiarity with embedding code into Wix.

2. Integration Steps#

A. Add TRUENDO Code to Your Wix Site

Follow these steps to integrate TRUENDO CMP into your Wix website:

Log In to Wix:
- Go to Wix.com and log in to your account.
Edit Your Site:
- From your Wix dashboard, locate the site you wish to edit.
- Click on "Site Actions" and then "Edit Site".
Access Site Dashboard:
- In the Wix Editor, click on "Site" in the top-left corner.
- Select "My Dashboard" from the dropdown menu.
Navigate to Settings:
- In the left-hand menu of your dashboard, click on "Settings".
Access Custom Code Section:
- Scroll down to the "Advanced Settings" section.
- Click on "Custom Code".
Add Custom Code:
- Click the blue "+ Add Custom Code" button.
Obtain TRUENDO Script:
- In a new browser tab, log in to your TRUENDO account at https://console.truendo.com/.
- Navigate to your project and click on "Banner" in the left sidebar.
- Scroll down to "Integration via Script".
- Copy your TRUENDO integration script, which looks like this:
```

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

```
  - Replace YOUR_SITE_ID with your actual Site ID.
Paste the Script into Wix:
- Return to the Wix "Custom Code" window.
- Paste the TRUENDO script into the "Paste the code snippet here" field.
Configure the Custom Code Settings:
- Name: Enter a memorable name like "TRUENDO Privacy Widget".
- Add Code to Pages: Select "All Pages" and "Load code once per visit".
- Place Code in: Choose "Head". This ensures the TRUENDO CMP loads on every page.
Apply Changes:
- Click "Apply" to save the custom code settings.
You have successfully integrated TRUENDO CMP into your Wix website!

3. Connecting a Placeholder to a Wix iFrame#

Wix uses an iFrame-based component structure, which can affect how TRUENDO manages placeholders over embedded content like YouTube or Vimeo videos. Follow these steps to properly configure placeholders for iFrames.

Note: While TRUENDO will autoblock a Wix video player, it will not load a placeholder over it. You need to replace the video player with an Embed HTML element containing an embedded video to have the iFrame placeholder.

A. Embed an HTML Element with an iFrame

Add an Embed HTML Element:
- In the Wix Editor, click on the "+" (Add) button.
- Select "Embed" and then "Embed a Widget".
- Drag the "Embed HTML" element onto your page.
Enter Code:
- Click on the "Enter Code" button on the new element.
- Choose the "Code" radio button.

B. Modify the iFrame Code

Paste Your iFrame Code:

Insert your iFrame code into the code editor. An example iFrame code:


<iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Add the id Attribute:
- Add id="tru_iframe" within the iFrame tag.
Modify Attributes:
- Replace the src attribute with data-src.
- Add the attribute data-trucookiecontrol="social_content" (or the appropriate category).
Set Placeholder Source:
- Add src="https://amp.priv.center/wix-placeholder.html" to load the placeholder.

Updated iFrame Code:

Your iFrame should now look like this:


<iframe id="tru_iframe" width="560" height="315" src="https://amp.priv.center/wix-placeholder.html" data-src="https://www.youtube.com/embed/YOUR_VIDEO_ID" data-trucookiecontrol="social_content" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

C. Add Supporting Script

Paste the Script Below the iFrame:

Directly below the iFrame code, paste the following script:


<script>
  let iframe = document.getElementById("tru_iframe"),
      placeholderSrc = iframe.getAttribute("src"),
      iframeSrc = iframe.getAttribute("data-src");
  window.addEventListener("message", e => {
    if (e.data == "service_enabled") {
      iframe.setAttribute("src", iframeSrc);
      iframe.setAttribute("data-src", placeholderSrc);
    } else if (e.data == "service_disabled") {
      iframe.setAttribute("src", placeholderSrc);
      iframe.setAttribute("data-src", iframeSrc);
    }
  });
</script>

Update and Save:
- Click the "Update" button to save the changes to the element.
Publish Your Site:
- Save your changes in the Wix Editor.
- Click "Publish" to make the changes live.

D. Add Custom Code to Handle Placeholders

Access Custom Code Settings:
- From your Wix dashboard, click on "Settings" in the left-hand menu.
- Under "Advanced", select "Custom Code".
Add New Custom Code:
- Click on "+ Add Custom Code".
Configure the Custom Code:
- Name: Enter "TRUENDO Placeholder" or similar.
- Add Code to Pages: Select "All Pages" and "Load code once per visit".
- Place Code in: Choose "Body - end".

Paste the Placeholder Script:

In the code snippet textbox, paste the following script:


<script defer>
  let timeout = 1000,
      pageIsLoaded = false,
      iframes = [];

  function sendPostMessages(cookieSettings, frames) {
    if (cookieSettings.social_content) {
      frames.forEach(frame => {
        frame.postMessage("service_enabled", "");
      });
    } else {
      frames.forEach(frame => {
        frame.postMessage("service_disabled", "");
      });
    }
  }

  window.addEventListener("TruendoCookieControl", function(e) {
    let cookieSettings = e.detail;
    if (pageIsLoaded) {
      sendPostMessages(cookieSettings, iframes);
    } else {
      setTimeout(() => {
        iframes = Array.from(window.frames);
        sendPostMessages(cookieSettings, iframes);
        pageIsLoaded = true;
      }, timeout);
    }
  });
</script>

Note: The timeout variable accounts for any delay in loading the embedded HTML. Adjust this value if necessary, but it should be no shorter than 500 milliseconds.

Apply Changes:
- Click "Apply" to save the custom code.

4. Verifying the Integration#

To ensure TRUENDO CMP and the iFrame placeholders are correctly integrated:

Clear Browser Cache:
- Clear your browser's cache and cookies to avoid loading old scripts.
Visit Your Website:
- Open your Wix website in a browser.
Check for the Consent Banner:
- The TRUENDO consent banner should appear upon visiting the site.
Test the iFrame Placeholder:
- Locate the page with the embedded iFrame.
- Before giving consent, the placeholder should appear instead of the actual content.
- After accepting the relevant cookies (e.g., "Social Content"), the embedded content should load.
Inspect with Developer Tools:
- Open your browser's developer tools (usually by pressing F12).
- Check the Console for any JavaScript errors.
- Verify that the scripts are loading correctly in the Network tab.

5. Additional Considerations#

Adjusting for Site Speed:
- If your embedded HTML elements take longer to load, consider increasing the timeout value in the placeholder script.
Multiple iFrames:
- Ensure each iFrame has a unique id if you have multiple on a single page.
Cookie Categories:
- Replace "social_content" in data-trucookiecontrol with the appropriate category if needed.
Wix Premium Plan Requirement:
- Remember that custom code features are only available on Wix Premium Plans.

6. Support and Resources#

TRUENDO Support:
- If you encounter issues or have questions, contact TRUENDO support at support@truendo.com.
Wix Help Center:
- For more information on adding custom code to your Wix site, visit the Wix Help Center.
TRUENDO Documentation:
- Access additional TRUENDO guides at https://docs.truendo.com/.

7. Conclusion#

By following this guide, you have successfully integrated TRUENDO CMP into your Wix website and configured iFrame placeholders to manage user consent effectively.

Thank you for choosing TRUENDO CMP for your consent management needs.

Start typing to search, or search using the advanced options below.

Sources: