Adora takes privacy seriously and provides you with controls to allow or block what is captured in the end user’s browser. There are three primary privacy control features to manage data capture: masking, blocking, and URL management.

By default, the Adora snippet does the following:

  • Masks all input fields, except for those with the CSS class adora-unmask.
  • Masks all HTML elements with the CSS class adora-mask.
  • Blocks all HTML elements with the CSS class adora-block.
  • Captures data only on pages where the snippet is installed, or where the URL is explicitly allowlisted. It also respects URL blocklists.

​
What does Adora capture?

When an end user’s browser loads with the Adora JavaScript snippet enabled, Adora begins capturing the HTML and CSS of the page. For example, consider the following page:

<html>
  <head>
    <script>
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "https://adora-cdn.com/adora-start.js";
      script.onload = function () {
        adoraStart({
          orgId: "00000000-0000-0000-0000-000000000000", // fake ID
        });
      };
      document.head.appendChild(script);
    </script>
  </head>
  <body>
    <h1>Hello!</h1>
    <p>Welcome to our great site</p>
  </body>
</html>

Adora’s snippet takes a snapshot of the page’s HTML, inlines any CSS, and removes JavaScript. The following is an example of the serialized HTML tree:

{
  "type": "snapshot",
  "data": {
    "node": {
      "type": 0,
      "childNodes": [
        {
          "tagName": "html",
          "childNodes": [
            {
              "tagName": "head",
              "attributes": {},
              "childNodes": [{
                "type": 2,
                "tagName": "body",
                "attributes": {},
                "childNodes": [{
                  "type": 2,
                  "tagName": "h1",
                  "attributes": {},
                  "textContent": "Hello!",
                  "childNodes": []
                }]
              }]
            }
          ]
        }
      ]
    }
  }
}

If the page changes—e.g., a button is clicked or JavaScript modifies the DOM—the changes are captured and sent to Adora’s servers using the MutationObserver API. This example shows incremental changes:

{
  "events": [
    {
      "type": "click",
      "data": {
        "node": {
          "tagName": "button",
          "attributes": {
            "id": "my-button"
          }
        }
      }
    },
    {
      "type": "incremental",
      "data": {
        "added": [
          {
            "node": {
              "tagName": "p",
              "textContent": "A new paragraph!"
            }
          }
        ]
      }
    }
  ]
}

No screenshots or images are captured during this process. Only the changelog of HTML and CSS is sent, ensuring that unwanted data is filtered out on the client side before being sent to Adora.

Screenshots and recordings are generated by replaying the captured event data in a secure headless browser within Adora’s network. HTML and CSS changes are applied incrementally to a controlled web page, with specific events marked as screenshots.

​
Key privacy controls

​
Masking

Masking replaces text content with * characters, allowing text structure to remain visible while obscuring specific values. For example:

From a data capture perspective, we replace the textContent value of the element before it is sent to our servers.

To mask an element, add the adora-mask CSS class to the HTML element. For example:

<div>
  <h1>Adora Mask Example</h1>
  <div>I display normally.</div>
  <div class="adora-mask">
    <span>This is masked</span>
  </div>
</div>

Results in:

If you prefer to use custom class names, contact us.

​
Masking all content

You can configure Adora to mask all content by default, allowing you to opt in to unmasking specific elements. This is useful for securing sensitive data, such as in health tech applications. To enable this feature, contact us.

With default masking, you can manually unmask elements by adding the adora-unmask CSS class.

​
Unmasking

Unmasking allows you to see user input, which can be helpful for support request fields or search boxes. Apply the adora-unmask CSS class to unmask input fields. For example:

<div>
  <input type="text" value="this is masked" />
  <input type="text" class="adora-unmask" value="this is unmasked" />
</div>

Results in:

​
Blocking

Blocking replaces content with an empty transparent box while preserving the original spacing. This is useful for removing entire images or sections from recordings. Add the adora-block CSS class to an element to block its content. For example:

<div>
  <h1>Normal</h1>
  <div>I display normally.</div>
  <h1>Blocked</h1>
  <div class="adora-block">
    <span>This is blocked</span>
  </div>
</div>

Results in:

Examples of blocking an image:

If you wish to use your own class name, contact us.

​
URL Management

Adora offers both automatic and opt-in URL management for greater control of captured data. To manage URL controls for your organization, contact us.

​
Controlling What URLs Adora Captures

By default, Adora captures all URLs where the snippet is installed. To prevent Adora from capturing specific URLs, you can:

  1. Avoid adding the script to those pages (e.g., using rules in Google Tag Manager or your codebase).
  2. Install the snippet on all pages but configure a blocklist or allowlist for URLs. This is especially useful for single-page applications (SPAs) with dynamic routing, where managing snippet installation may be more complex.

Allowlists and blocklists use regex patterns. For instance, you could configure Adora to capture all pages except those matching /private-section/*. When the Adora snippet loads, it checks with the server for blocked and allowed URLs. If the current URL matches a blocked pattern, data capture stops. When the URL matches an allowed pattern (default: all URLs), data capture resumes.

​
Redacting Path Data in URLs

URL aggregation is a key feature of Adora that simplifies your workflow by grouping similar paths. For example, URLs like /page/uuid1, /page/uuid2, and /page/uuid3 are aggregated into /page/* in the UI. By default, this aggregation occurs server-side, meaning the full path (e.g., /page/uuid1) is sent to Adora.

If sending full paths is not desirable—e.g., when paths include sensitive data like uuid1—you can define client-side grouping rules using regex patterns. These rules allow Adora to strip or group paths before they are sent to the server. For example, you could provide the rule /page/* to ensure all such URLs are captured as /page/*.

​
Query Parameters

By default, Adora removes all query parameters to minimize the risk of unintentionally capturing sensitive information, such as authentication tokens. This default behavior provides peace of mind out of the box.

However, there are scenarios where query parameters are essential for differentiating steps within the same page. For example, a signup process might use /signup?step=1. By default, Adora would treat all such pages as /signup. To distinguish between steps, you can explicitly allow specific query parameters, such as step, to be captured.

Quick StartCohorts