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 event replays 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: masking 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: masking-class If you prefer to use custom class names, contact us.

​
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: unmasking-input

​
Blocking

Blocking replaces content with an empty transparent box while preserving the original spacing. This is useful for removing entire images or sections from being captured. 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: blocking-contents Examples of blocking an image: blocked-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, please visit the access control tab in settings here, or 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 simple wildcard patterns. For example, you can configure Adora to capture all pages except those matching specific patterns:
  • /private-section/* blocks direct pages under private-section (like /private-section/page1)
  • /private-section/** blocks all pages under private-section, including deeply nested ones (like /private-section/accounts/user/settings)
When the Adora snippet loads, it checks if the current URL is blocked or allowed. By default, all URLs are allowed unless specified otherwise.

​
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.

​
Stopping and restarting capturing

You can stop (or pause) Adora from capturing events by calling window.adoraStop() anytime. You can verify that Adora has been stopped capturing events by verifying that no requests being sent to /sessions/SESSION_ID/events in the “Network” tab. The snippet will not capture any events until window.adoraStart() has been called again.