Pass user choices in query string

It's possible to pass user choices through query-string parameters, allowing the sharing of information across different pages or domains.

Here's a high-level overview of how this is done:

• Generate a JSON-encoded format of the user choices.

• Append the URL-encoded JSON user choices to a link on the page.

• Configure the Didomi Web SDK to retrieve the user choices from the URL.

When passing user choices from one page to another in a query string, the purposes and vendors configured for the receiving page must be a subset of the purposes and vendors configured for the origin page that is collecting user choices. This will ensure that the receiver page gets all the user choices it requires and it will not need to re-collect user choices and show a consent notice again.

Setup

This section will guide you on how to set up an origin page (where users' choices are collected) and a receiver page (where these choices are read from the query-string parameters).

Step 1 - Creation of the query-string parameter

On the origin page, fetch the current user's choices from the Didomi Web SDK and encode them into JSON format:

window.didomiOnReady = window.didomiOnReady || [];
window.didomiOnReady.push(function (Didomi) {
  // Get user status from the SDK
  const userStatus = Didomi.getCurrentUserStatus();

  // Build value for query-string parameter with the user status
  // We only keep a subset of the user status
  const userStatusForQueryString = encodeURIComponent(
    JSON.stringify({
      purposes: userStatus.purposes,
      vendors: userStatus.vendors,
      created: userStatus.created,
      updated: userStatus.updated,
    }),
  );
});

The above code needs to run after the SDK is ready which is done by using the window.didomiOnReady array.

Filtering vendors in the query string

If the receiver page does not require user choices for all the vendors from the origin page, you can filter the choices based on the vendor IDs:

window.didomiOnReady = window.didomiOnReady || [];
window.didomiOnReady.push(function (Didomi) {
  // Get user status from the SDK
  const userStatus = Didomi.getCurrentUserStatus();

  // List of vendor IDs to pass to the receiver page
  // The IDs are the "SDK ID" from the Didomi Console
  const vendorIds = ["google", "facebook"]; // It can be one or multiple vendor IDs

  const filteredVendors = Object.fromEntries(
    Object.entries(userStatus.vendors).filter(([key, vendor]) =>
      vendorIds.includes(vendor.id),
    ),
  );

  // Build value for query-string parameter with the user status
  // We only keep a subset of the user status
  const userStatusForQueryString = encodeURIComponent(
    JSON.stringify({
      purposes: userStatus.purposes,
      vendors: filteredVendors,
      created: userStatus.created,
      updated: userStatus.updated,
    }),
  );
});

This will reduce the amount of information passed in the query string.

Step 2 - Append the query-string parameter to the URL of the receiver page

Append the userStatusForQueryString variable created in step 1 to the receiver page's URL in a query-string parameter named didomiConfig.user.externalConsent.value.

For instance, if your receiver page URL is https://receiver.com/page.html, the updated URL should appear like https://receiver.com/page.html?didomiConfig.user.externalConsent.value=%7B...%7D.

Step 3 - Configure the Didomi Web SDK on the receiver page

For the Web SDK to read user choices from the query string, it must be appropriately configured since this behavior is disabled by default.

One way to do this is via the Didomi Console. Update the custom JSON of the consent notice embedded on the receiver page:

{
  "user": {
    "externalConsent": {
      "enabled": true
    }
  }
}

Alternatively, you can configure this setting directly on your receiver page by assigning window.didomiConfig:

window.didomiConfig = {
  "user": {
    "externalConsent": {
      "enabled": true
    }
  }
};