Skip to Content
InstallationDSAR widget

DSAR widget

The DSAR widget is an embeddable form that allows visitors on your website to submit data subject access requests. You can add it to any page — typically a privacy policy page, a dedicated data rights page, or a contact page.

For an overview of the DSAR feature, see Data subject access requests.

Getting the widget code

To get your widget embed code:

  1. Log in to the CookieHub dashboard.
  2. Navigate to the DSAR section.
  3. Click the Get Widget button.
  4. Copy the provided code snippet.

The widget code includes your account key and domain key, which are used to associate submissions with your account.

Installation

Paste the following code into the HTML of the page where you want the DSAR form to appear:

<div id="cookiehub-dsar-container"></div>
<script
  src="https://dash.cookiehub.com/dsar/widget.js"
  data-account-key="ak_xxxxxxxx"
  data-domain-key="dk_yyyyyyyy"
  data-target="#cookiehub-dsar-container"
  data-lang="en"
  async></script>

Replace ak_xxxxxxxx and dk_yyyyyyyy with the actual keys from your widget code in the dashboard.

The data-target attribute specifies the CSS selector of the container element where the widget will be rendered. You can change the container’s id as long as the data-target value matches.

Style isolation

The widget renders inside a Shadow DOM, which keeps the widget’s styles fully isolated from the rest of your page. This means:

  • Your site’s CSS will not accidentally break the form’s layout.
  • The widget’s CSS will not leak out and affect any other elements on your page.

The Shadow DOM is open, so you can still inspect the widget in your browser’s developer tools.

Theming

You can customize the widget’s appearance by setting CSS custom properties on the host element (the container <div>). The following properties are supported:

PropertyPurpose
--dsar-primary-colorButtons and focus rings
--dsar-button-textButton text color
--dsar-bg-colorWidget background
--dsar-border-colorGeneral border color
--dsar-input-borderInput field border color
--dsar-border-radiusCorner radius for the widget container
--dsar-input-radiusCorner radius for input fields

Example:

<div
  id="cookiehub-dsar-container"
  style="
    --dsar-primary-color: #2b6cb0;
    --dsar-button-text: #ffffff;
    --dsar-border-radius: 12px;
  "></div>

For more advanced customization, key elements inside the widget expose part attributes (such as form, input, and submit-button) that you can target with the CSS ::part() pseudo-element from outside the shadow root.

Language

The data-lang attribute is optional. If omitted, the widget detects the language in this order:

  1. The data-lang attribute on the script tag (BCP-47 format, e.g., en, pt-br)
  2. The lang (or xml:lang) attribute on the page’s <html> element
  3. Falls back to English

Language values are normalized automatically — for example, pt_BR is treated the same as pt-br.

The widget ships with 50+ locales, including English (and US English), German, French, Spanish, Portuguese (Portugal and Brazil), Chinese (Simplified and Traditional), Japanese, Korean, Arabic, Hebrew, Hindi, Tamil, Telugu, Bengali, Thai, Vietnamese, Indonesian, Malay, Turkish, Icelandic, Faroese, Welsh, Basque, and most other European languages.

The detected locale is also stored with each request, so all subsequent emails (verification, status updates, completion) are sent in the same language the data subject used when submitting.

Placement

The DSAR widget can be placed on any page of your website. Common placements include:

  • Privacy policy page — Place the widget at the end of your privacy policy so visitors can easily submit requests after reading about their rights.
  • Dedicated data rights page — Create a page specifically for data subject requests (e.g., /privacy-requests or /data-rights).
  • Contact page — Add the widget alongside your other contact methods.

Ensure the page containing the widget is easily accessible from your main navigation or footer, so data subjects can find it without difficulty. Many privacy regulations require that you provide a clear and accessible way for individuals to exercise their data rights.

Next steps

Once the widget is installed, you can:

Last updated on
Linker