Skip to content
Last updated: 2026-04-06
Guide

Widget Embedding

Embed the Dxtra Transparency Center on your website to provide users with transparency and control over their data.

Available Widgets

The Transparency Center widget provides:

  • Cookie consent banner -- Customizable consent collection with granular category controls
  • Privacy portal -- Data subject rights requests, consent management, and preference center
  • Privacy notice display -- Your organization's privacy policy
  • FAQ section -- Help center content managed from the dashboard

All functionality is delivered through the <transparency-app> web component, with individual widget components also available.

How to Embed

Step 1: Add the Script

Add the widget script to your website:

HTML
<script src="https://transparencycenter.dxtra.ai/assets/index.js" type="module"></script>

Step 2: Add the Widget Element

Place the Transparency Center component in your HTML:

HTML
<transparency-app data-controller-id="YOUR_DATA_CONTROLLER_ID"></transparency-app>

Complete Example

HTML
<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to my website!</h1>

  <!-- Load Dxtra Widget Bundle -->
  <script src="https://transparencycenter.dxtra.ai/assets/index.js" type="module"></script>

  <!-- Transparency Center -->
  <transparency-app data-controller-id="YOUR_DATA_CONTROLLER_ID"></transparency-app>
</body>
</html>

Replace YOUR_DATA_CONTROLLER_ID with your Data Controller ID from the Developers section of the Dxtra dashboard.

Configuration

The widget is configured primarily through the Dxtra dashboard:

  • Brand colors and logos -- Set in the dashboard under your Data Controller settings
  • Consent categories -- Configured in the Consents section
  • FAQ content -- Managed in the Help Center section
  • Privacy notice -- Generated and published from Compliance Documents

The data-controller-id attribute on the element identifies your organization and loads the appropriate configuration.

Content Security Policy

If your website uses a Content Security Policy (CSP), add the Dxtra widget domain:

HTML
<meta http-equiv="Content-Security-Policy"
      content="script-src 'self' transparencycenter.dxtra.ai;">

Events and Callbacks

The widget emits custom events for integration with your website:

JavaScript
// Listen for consent events
window.addEventListener('cookie-consent-submitted', function(event) {
  const { action, toggleStates } = event.detail;
  console.log('User consent action:', action);
  console.log('Cookie preferences:', toggleStates);
});

Styling

The widget uses Shadow DOM for style encapsulation and includes built-in responsive design. It adapts to the container width and works on mobile devices.

For advanced customization beyond what the dashboard provides, contact Dxtra support for white-label options.

Technical Requirements

  • Browser support: Chrome 54+, Firefox 63+, Safari 10.1+, Edge 79+
  • HTTPS required for production deployment
  • No external dependencies required on your website
  • Minimal footprint -- Loaded as ES module

Integration with Tag Manager

The Transparency Center widget works with Dxtra Tag Manager for consent-controlled tag firing. When a user submits consent preferences through the widget, the Tag Manager automatically respects those preferences.

See Tag Manager Consent Integration for details.

For support, contact support@dxtra.ai.