ContactCloak™

Protect contact information on Webflow sites from scrapers and bots.

Overview

ContactCloak™ encrypts your email addresses and phone numbers in your HTML, making them invisible to bots and scrapers while remaining fully functional for real users. When visitors load your page, ContactCloak™ automatically decrypts and displays your contact information, ensuring a seamless user experience without compromising security.

Features

Email protection — Encrypts email addresses in mailto links to prevent scraping
Phone number protection — Encrypts phone numbers in tel links to prevent harvesting
Text encryption — Encrypts any sensitive text content that you want to protect
Zero dependencies — Lightweight and fast-loading
Webflow-friendly — Works seamlessly with Webflow sites
Automatic decryption — Contact information is automatically decrypted on page load for real users

Quick Start

1. Add the Script

Add to your Webflow project's global settings, inside the <head> tag:

<script 
  src="https://cdn.jsdelivr.net/npm/@reform-digital/[email protected]/prod/scraper-shield.js"
  defer
></script>

That's it! ContactCloak™ initializes automatically and is ready to use.

2. Encrypt Your Contact Information

First, encrypt your contact information using our encryption tool. You can add the encrypter utility to your site for easy encryption:

<script 
  src="https://cdn.jsdelivr.net/npm/@reform-digital/[email protected]/prod/encrypter.js"
  defer
></script>

Or use a simple Base64 encoding tool to encrypt your contact information.

3. Add Encrypted Data Attributes

Add the encrypted values to your HTML elements using the appropriate data attributes:

<!-- Encrypted email link -->
<a rd-ss-email="ZW5jcnlwdGVkLWVtYWlsQGV4YW1wbGUuY29t">Contact Us</a>

<!-- Encrypted phone link -->
<a rd-ss-phone="KzEyMzQ1Njc4OTA=">Call Us</a>

<!-- Encrypted text content -->
<span rd-ss-text="SGVsbG8gV29ybGQ="></span>

The encrypted values will be automatically decrypted and displayed when the page loads.

Usage

Protecting Email Addresses

Encrypt your email address and add it to an <a> tag using the rd-ss-email attribute:

<a rd-ss-email="ZW5jcnlwdGVkLWVtYWlsQGV4YW1wbGUuY29t">Send us an email</a>

ContactCloak™ will automatically:

Decrypt the email address
Set the href attribute to mailto:[email protected]
Display your link text normally

Protecting Phone Numbers

Encrypt your phone number and add it to an <a> tag using the rd-ss-phone attribute:

<a rd-ss-phone="KzEyMzQ1Njc4OTA=">Call us today</a>

ContactCloak™ will automatically:

Decrypt the phone number
Set the href attribute to tel:+1234567890
Display your link text normally

Protecting Text Content

Encrypt any sensitive text and add it using the rd-ss-text attribute:

<span rd-ss-text="U2Vuc2l0aXZlIGluZm9ybWF0aW9u"></span>

ContactCloak™ will automatically:

Decrypt the text content
Set the element's textContent to display the decrypted text

Data Attributes

rd-ss-email — Contains the Base64-encoded email address. Applied to <a> tags to create mailto links.
rd-ss-phone — Contains the Base64-encoded phone number. Applied to <a> tags to create tel links.
rd-ss-text — Contains the Base64-encoded text content. Applied to any element to display encrypted text.

How It Works

On page load, ContactCloak™ scans for all elements with rd-ss-email, rd-ss-phone, and rd-ss-text attributes
It decrypts the Base64-encoded values
For email links, it sets the href attribute to mailto:decrypted-email
For phone links, it sets the href attribute to tel:decrypted-phone
For text elements, it sets the textContent to the decrypted text
Your contact information is now visible and functional for real users, but remains encrypted in the source code

Example: Complete Contact Section

<!-- Contact section with protected information -->
<div class="contact-section">
  <h2>Get in Touch</h2>
  
  <!-- Protected email -->
  <a rd-ss-email="aW5mb0BleGFtcGxlLmNvbQ==" class="contact-link">
    [email protected]
  </a>
  
  <!-- Protected phone -->
  <a rd-ss-phone="KzExMjIzMzQ0NTU2Ng==" class="contact-link">
    +1 (122) 334-4566
  </a>
  
  <!-- Protected text (like an address) -->
  <p>
    123 Main Street<br>
    <span rd-ss-text="TmV3IFlvcmssIE5ZIDEwMDAx"></span>
  </p>
</div>

When visitors load the page, all contact information will be automatically decrypted and functional, while bots scraping your HTML source will only see encrypted strings.

Encryption Tool

To encrypt your contact information, use our encryption utility. Add this script to a development page or use a standalone encryption tool:

<script 
  src="https://cdn.jsdelivr.net/npm/@reform-digital/[email protected]/prod/encrypter.js"
  defer
></script>

Then create an encryption form with these attributes:

<input rd-util="rd-ss-encrypt-input" type="text" placeholder="Enter text to encrypt">
<button rd-util="rd-ss-encrypt-button">Encrypt</button>
<span rd-util="rd-ss-encrypted-output"></span>

Or use any Base64 encoding tool to encrypt your contact information.

Support

Need help? Join our Slack community.

Product Tracking

ContactCloak™ includes an extremely lightweight telemetry module that helps us understand product adoption patterns. This information allows us to focus our support efforts and prioritize product enhancements where they matter most.

What We Track:

Product Identifier: The name of the product (e.g., "CONTACT_CLOAK")
Domain: The public hostname where the product is installed (e.g., "example.com")

Privacy & Performance:

No cookies, fingerprinting, or personally identifiable information
Only runs on live, public domains (never on localhost or development environments)
Single lightweight request sent once per page load
Data is aggregated for internal analytics only
Not used for advertising, marketing, or tracking

PreviousTooltipX™

Last updated 1 month ago