<script>
import Obfuscated from "$lib/components/ui/Obfuscated.svelte";
</script>

# Obfuscating Data

The obfuscation mode of the [widget](/docs/integration/widget/) helps you protect sensitive information from bots. A common use case is to obfuscate email addresses on websites, preventing automated scraping bots from collecting them.

## Use Cases

- **Hide Email Addresses and Phone Numbers**: Protect email addresses and phone numbers on websites to prevent automated scraping bots from collecting this information.

- **Mask Personal Identifiers**: Hide personal identifiers such as usernames, IDs, or account numbers that could be used for malicious purposes.

- **Obfuscate Download Links**: Hide direct download links for files or software to prevent scraping.

## Configuration

After integrating the [widget](/docs/integration/widget/) and enabling the obfuscation plugin, configure the `data-obfuscated` string in the widget. Note that the obfuscation mode __does not use__ `challenge`:

```html
<p>Send us an email, and we'll be in touch soon.</p>

<div>
<span>Email:</span>

<altcha-widget
data-obfuscated="${obfuscatedData}"
display="floating"
>
<button>Click to reveal</button>
</altcha-widget>
</div>
```

Any elements inside the `<altcha-widget>` tag will be displayed as placeholders for obfuscated data. The widget automatically detects clickable elements, such as `button` and `a` tags, which trigger the verification and de-obfuscation process when clicked. 

## Demo

The code above will render something similar to this demo:

<div class="not-prose flex flex-col gap-2 border border-gray-600/50 bg-gray-300/10 p-3 lg:p-10">
<p>Send us an email, and we'll be in touch soon.</p>

<div>
<span>Email:</span>

<Obfuscated
  label="Click to reveal"
  obfuscated="eyJwYXJhbWV0ZXJzIjp7ImFsZ29yaXRobSI6IlBCS0RGMi9TSEEtMjU2IiwiY29zdCI6NTAwMCwia2V5TGVuZ3RoIjozMiwia2V5UHJlZml4IjoiMTZlNWUzNGIwOGFjMjhhZjFlYjJjY2Q5NGJjODU3MGIiLCJub25jZSI6IjUyZmM5NzM1YTUzZWVjYzk5M2FhNDJhYTBmODU1MzE1Iiwic2FsdCI6IjNmNTc4NzlhMDgwZjkyYzdlMmIwMWQyZmYxZGJlNDljIn0sImNpcGhlciI6eyJpdiI6ImU3ZWY1NDQyMTE2ODY0ZWY1Y2Y5YmZlMCIsImRhdGEiOiIxODA2ZDViMTgxMDMyZjUxYjMzYTdjYWE3YWEwM2IyOWJmYzNiMWJjMGY0OWUxNjcxN2ZmYjExZWU0NWRhZGFjNmVjMjJkOThkYWVlOTAyZCJ9fQ=="
/>

</div>
</div>

Click the _Click to reveal_ link to display the actual email address.

The widget can mask any textual data, here is a demo with an obfuscated address:

<div class="not-prose flex flex-col gap-2 border border-gray-600/50 bg-gray-300/10 p-3 lg:p-10">
<p>Our Address:</p>

<address class="whitespace-pre-line not-italic">
<Obfuscated
  label="Click to reveal"
  obfuscated="eyJwYXJhbWV0ZXJzIjp7ImFsZ29yaXRobSI6IlBCS0RGMi9TSEEtMjU2IiwiY29zdCI6NTAwMCwia2V5TGVuZ3RoIjozMiwia2V5UHJlZml4IjoiZmExYjczMzc4ZDVkYzk3MWNlYWM2NzhkOGI0ZGVkNzgiLCJub25jZSI6IjZjMDVmNDQwZmFmNTBmZmM3ZTk1ZDBlMjRlMzg1OTJlIiwic2FsdCI6IjMzMDFmY2I5YjI0MTI3NjU4N2ExMzg5OWFiMzg5NDNjIn0sImNpcGhlciI6eyJpdiI6IjkwMTJiNDdmYTU0Yjg1YWI5OTYxZmVjNSIsImRhdGEiOiI4MWQ0ZTY2NGE2OGUyNjIxZTFkOGM5ZTRmYmNiYzJmM2UwMDgzZWVlYzhjNjc1NWM2ZjFmM2YxOGY5YWNiMzk2MTM2NDE3NjQyYTdkYTkwYTUwZGIxMTM4MzhjMDJlZjljMzdlZTQ0ZDNhNTVjMGE4ZjRlY2ZlZjNmZjViNDM2ZjVlNGY1M2Q0YTY5MzE2N2FjYjE5MDE0OWUxMmZjYyJ9fQ=="
/>

</address>
</div>

## Generating Obfuscated Data

To generate obfuscated data, use the `npx` command:

```sh
npx altcha-lib obfuscate "mailto:hello@example.com"
```

This command outputs base64 encoded data that can be directly used in the `obfuscated` attribute.
