Overview

The embedded experience lets customers put the Consumer User Interface into their sites, using an iFrame. This gives a number of branding and privacy benefits, including:

1. The Consumer UI will look like it is a part of the customer's website. This provides a seamless user experience.
2. Site visitors will see the customer's domain in the browser URL, instead of WireWheel.
3. Cookies are written to the customer's domain, ensuring that any related subdomains can read the consent opt-out.

Flow Data Flow

The following chart shows how the pieces work together in the embedded Consumer UI. This shows what happens when a user's provides their consents or opts-out via the embedded Consumer UI.

Implementation

Configuration

Here are configuration instructions. In order to configure the embedded Consumer UI, you need the domain of the site that will embed the Consumer UI. Then:

1. Navigate to the Consumer UI Configuration page.
2. Scroll down to the setting IFrame whitelisted domain.
3. Add the domain for the page that will embed the Consumer UI.^*
4. Scroll to the top and click the Save button.
5. Click the Publish button.

Setup Parent Page

Now that the Consumer UI is configured and published, it is ready to be embedded into the customer's page. This will require:

• adding an <iframe> tag
• adding the UPCP SDK to the page
• initializing the SDK.

IFrame Tag

<iframe id="wwiframe" src="https://ui.dev.upcp.wirewheel.io/304/welcome"></iframe>

📘

The value for the src attribute of the iframe can be found at the top of the Consumer UI configuration page.

Adding the UPCP SDK to the Page

It is recommended to use the UPCP SDK hosted on UPCP's Content Delivery Network. The Javascript file can be placed at the bottom of the page as is customary.

<script type="text/javascript" src="https://ui.upcp.wirewheel.io/extensions/upcp-sdk-0.9.2.min.js"></script>

👍

Please ensure to use the latest version the SDK!

Initialization

Finally, initialize the embedded experience. The initialization Javascript must be placed after the SDK is loaded.

const { WireWheelSDK } = window.cmpJavascriptSdk;
const embeddedHandler = WireWheelSDK.initEmbeddedParent({
  targetIframe: document.getElementById("wwiframe")
});

Common Issues

The iframe is not loading

Misconfiguration

Go back to the Configuration at the top of this page. Ensure the domain name matches the URL you see in the browser.

Content Security Policy

The parent page's Content Security Policy can prevent the iframe from loading. Read more about CSP here, paying special attention to the attribute frame-src.

This is an example of a CSP that would prevent the iFrame from loading. Below that is a fix.

Content-Security-Policy: frame-src self

The following is the fix for the CSP:

Content-Security-Policy: frame-src self ui.upcp.wirewheel.io ui.uat.upcp.wirewheel.io