Privacy helpers

Privacy helpers control how specific elements appear in session replay.

Screeb automatically masks password inputs and elements matched by common sensitive-keyword heuristics. Use these helpers for custom sensitive content.

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useScreeb } from "@screeb/sdk-vue";

const cardInput = ref<HTMLInputElement | null>(null);
const { ScreebMaskText, ScreebId } = useScreeb();

onMounted(() => {
  if (cardInput.value) {
    ScreebMaskText(cardInput.value);
    ScreebId(cardInput.value, "card_number_input");
  }
});
</script>

<template>
  <input ref="cardInput" type="text" />
</template>

Helper	Description
ScreebMaskText(element)	Masks text content in session replay.
ScreebNoCapture(element)	Excludes the element from session replay capture.
ScreebId(element, id)	Sets a stable element ID for IAM targeting and replay context.

Using CSS classes directly

If you don't want to use the hook, apply the equivalent class or attribute directly in your template:

<input class="screeb-mask-text" />
<div class="screeb-no-capture">...</div>
<button data-screeb-id="checkout_button">Checkout</button>