★ Obscure Contact ★ 📧 📞 🔗 Protect emails, phones and WhatsApp links from bots

Elements Store
1

Hey guys (again) :smiling_face_with_sunglasses: , here’s another cool component working under the hood of Elements

obscure_contact_multithemes_004

Obscure Contact, the idea is simple: bots and scrapers constantly crawl the web looking for email addresses and phone numbers. Obscure Contact keeps your contact details out of their reach — without changing anything your visitors actually see.

You place a token in your text where the contact should appear, and at load time the real value is assembled and rendered in the browser. Scrapers find nothing useful in the source. It works for emails, phone numbers, and WhatsApp links, and the demos on the component page show it in action across a few typical use cases.

obscure_contact_multithemes_001

obscure_contact_multithemes_003

Email

You can protect up to two separate email addresses. Each one is split at the @ symbol and reassembled at load time, so the full address is never written in the source. You set a token, drop it anywhere in your text, and the component does the rest. There’s also an optional label if you want link text other than the address itself, plus optional subject and body fields to pre-fill the email when the link is clicked.

Phone

Same token logic for phone numbers. The number is injected at load time and never appears in plain text in the source. You can add an optional label, and if you want a more prominent style you can use a standard Elements Button — just set its label to your token.

WhatsApp

Generates a protected WhatsApp link that opens the app on mobile and WhatsApp Web on desktop. International format required for the number. Optional label, optional pre-filled message. Same button trick works here too.

Key options:

- Up to two protected email addresses, each independent

- Split-token system for emails (before and after the @ symbol)

- Optional label for each email link

- Optional pre-filled subject and message body for email links

- Token-based phone number protection

- Optional label for phone links

- WhatsApp link with international number format

- Optional label for WhatsApp links

- Optional pre-filled WhatsApp message

- Compatible with the standard Elements Button component (use your token as the button label)

Obscure Contact is available int the marketplace! :astonished_face:

Now in promo!

thanks

2

Makes me want to put my email and phone number on my website :slight_smile: lol :joy:

3

Very good, will purchase it in a minute when I am back at my computer. So usefull :+1:

4

Thnaks a lot Michael, In this case, I specifically implemented features that stem from my experience with my clients.

Email obscuring is already standard and doesn’t take much to understand, but it’s different for phone numbers.I have a client who works in healthcare and needs to obscure their emergency number from Google, while leaving their office number visible. This gave me the idea of ​​encrypting their phone numbers as well, there are many cases where you may want to distribute a telephone contact, even if only temporarily, that is separate from those official ones.

5

When a respected colleague appreciates my work, my day is better, thank you :folded_hands:

6

Hi Michelangelo,

Thanks for making this nice and handy component!

I have a question about the hiding of the email address.
(I personally do not need it for phone or WhatsApp.)

The phone number is encoded in Base64. Is there an possibilty to encode in Base64 the email address as well? For example as a third option for a email address?

I think that would be a better protection for the email address. Or am I wrong?

In the source code it seems easier for smart scrapers to get the address than it seems for the phone:

window.__oc.push({ type: “email”, token: “ocEmail1”, a: “info”, b: “mysite.com”, label: “”, subject: “”, body: “” });

window.__oc.push({ type: “phone”, token: “ocPhone1”, value: “KzM5IDAyIDEyMzQgNTY3OA==”, label: “” });
Y3OA==", label: “”, message: “Hello, I would like some information” });

I do not care if there is no link to the mail app and therefore also no possibilitiy to add subject and content. Just that the visitor is able to copy the email address from the website. It would be awesome when this can be automated when clicking on the email address (and perhaps with a notification the email address was copied ;-).

I do know very little about these things, so sorry if I ask stupid things.

I love to hear your thoughts about this.
Thanks in advance.

7

Hi @Lalla , and thank you so much for the kind words and for taking the time to share such a thoughtful observation :folded_hands:

Looking at how the protection works: the address never appears as a complete string in the HTML, and since everything is assembled and injected via JavaScript, basic scrapers that don’t execute JS won’t see anything at all. That covers the vast majority of bots in the wild, which is exactly what this component is designed for.

The idea of encoding the email parts in Base64 is not something we’re ruling out, it could add a useful extra layer for those cases where a more persistent scraper does execute JS. Thanks for the suggestion

On the “click to copy” side, you might actually find our Clipboard component interesting: CLIPBOARD it’s designed exactly for that kind of interaction, and who knows, email support could be an interesting direction to explore there too with encryption.

Thanks again for the feedback! :folded_hands:

8

Instant purchase and much missed. I have several email addresses and phone numbers, can I use several instances of this component on the same page to cover this?

9

I looked into it and it is technically feasible, but after a closer analysis I believe the current email protection is already solid. That said, it doesn’t rule out the possibility of adding in the future an option where the email is treated as a single encoded element. Thanks again for the suggestion. :folded_hands:

10

Thanks a lot and thank also you for the question. I hoped I’d clarified it clearly in the guide, but I need to do it better.

If you have 10 mail, use the number of instances you need to cover 10 mail. You can activate and deactivate the options for each mail (or phone) based on your needs. If you have 10 email addresses, you can use five instances (each component manages at least two addresses). If you also have three phone numbers, activate them within those instances.

hope this helps

11

I forgot to tell you something, If you use multiple emails, it can be helpful to keep things organized to place them close to the point where you insert the email, their codes in any case are injected dynamically in the exact point of the html page regardless of where you place them.

12

Hi Michelanglo,

Thank you very much for all the additional information!

Good to know you think the current email protection is already solid. I was triggered by the sentence on your website: “Is it really secure? For most automated scanners — yes.” Maybe a encoding however adds still some more security for more automated scanners? Or for the near future when sophisticated bots are more common? Then you better be prepared ;-).

The Clipboard component (nice!) indeed gave me the idea that it would be very useful if that could also be done with an email address.
However, this would only be necessary if the mailto functionality with encoding would technically no longer be possible.

I am keeping a close eye on the developments of Obscure Contact. For now I am using it as is. Thank you!

13

Hi @Lalla and Thanks. The protection system is quite flexible, and I think I’ll apply it to other components I’m working on.

Thanks again for any suggestions. :folded_hands:

14

You can right click on the email address on the demo page and simply copy and paste into your email client. I have been lucky so far with spam but think I will use this to try and keep it that way.

15

Thank you for this information! It does indeed work that way.

My comment was actually about if the email address would be encoded in Base64. If “mailto” cannot be used would it still be possible to copy the entire email address with one action (e.g. indeed via right mouse button or a click)? Since it is questionable whether this encoding will be applied, this is not an issue for the time being.