Stacks4Stacks

A stack like Obfuscator can help curb the problem of spam bots or other unwelcome automated tools stealing your contact details. It won't fix contact details that are already "in the open", actual people manually contacting you or prevent scrapping from really sophisticated tools. But for a large majority of automated spam bots hunting for unprotected email addresses and contact handles, it'll work very effectively at thwarting them. Unlike a CAPTCHA applied on a contact form, it won't annoy normal website users. Page loading speed, accessibility and user privacy are never compromised. Links can continue to be printed too.

Obfuscator is not restricted to just email addresses. This stack will work equally as well for web links, Facetime, Skype, telephone and WhatsApp handles too. Almost any link can be obfuscated. The Obfuscator stack uses server-side PHP code to obfuscate this data; which affords greater security (compared with client side methods like Javascript in the web browser).

The button containing the obfuscated link can be extensively styled to match your existing web design. There are also a couple of preset button styles built in for popular frontend frameworks; including Bootstrap, Foundation and UIKit. Thereby Obfuscator has excellent theme compatibility.

Examples:

These are some examples of the Obfuscator stack configured to create links to some different services.

 
A simple email link:

 
A simple email link with a custom label and button styling applied:

 
A Skype link:

 
A styled Skype button with Font Awesome icons:

 
A telephone button with Font Awesome icons:

 
Generated obfuscated 'inline' links placed inside a paragraph of text (using a normal Text stack):

 
Obviously some of these button configurations only work if a user has got particular software on their computer. For example, you would probably find a Skype button only works if the Skype software is actually installed on a computer or device. You can improve usability by changing the button label to reflect what the button will do.

Setup

Install the Obfuscator stack in the normal way. Restart RapidWeaver and add a copy of the stack to any Stacks page.

1. For first time users, it is recommended you check the Show Some Suggested Links in the stack settings, to see some examples of links you can obfuscate. If you switch into RW Preview Mode, you can copy these same links to modify and reuse them.
2. The link you want to obfuscate goes into the box marked Link. In the case of a clickable email address, you would type mailto: followed by the actual email address.
3. Customise the label text accordingly. This is the wording that end users of the website see to click. It is possible to obfuscate this label text too (using the supplied checkbox option) but this is not required for simple links that don't show contact details. Prefix and Suffix boxes allow the setup of items like icons, that are not obfuscated.
4. By default, Obfuscator links are rendered as plain links. However the Button Style box lets you restyle these links to look like buttons. A choice of theme frameworks are provided; including Bootstrap, Foundation and UIKit. Or you can generate custom buttons of your own.

Testing the link

Preview the page in a normal web browser. Firefox or any Chrome-based web browser is recommended. Use the keyboard shortcut Alt + CMD + U to view the page source code. When you view the source code of your link, you should see it presented as HTML entities. When the page is viewed normally or with the web developer tools, the same link should show how you entered it within the Obfuscator stack settings.

Custom attributes and accessibility

These are entirely optional and Custom Link Attributes only need to be turned on for more advanced use cases. One such example could be to replace non-descriptive link labels like 'email me' with a more descriptive label of the link using ARIA attributes:

aria-label="Click here to open your email software and send me a new message"

This can help improve website accessibility for people using assistive devices like screen readers. In this scenario, a screen reader will ignore the normal 'email me' label text and speak this short sentence instead.

Generating links for use elsewhere in your website

This is a powerful feature of Obfuscator that can potentially save you a small fortune in needing to buy extra software! The stack can be used to generate obfuscated links that can be used elsewhere in your website (including footers, sidebars, banners and other page types). It's even possible to take the code and reuse it in an entirely different web design app. The only stipulation is that the page needs a .php file extension.

Setup your link and label as normal. Then within the Obfuscator settings, check the Generate Code Snippet In Preview option. Switching into RW Preview Mode, you will now see a box containing a few lines of code. Copy this code to the clipboard. Paste the code (as plain text) wherever you want the obfuscated link shown. This can include within paragraphs of text.

Because the generated link is now outside of Obfuscator, it is no longer possible to use any Obfuscator style settings. These only take effect on obfuscated links that remain inside the Obfuscator stack. However it's feasible to write your own CSS code, if you want to change the appearance of these links.

Obfuscator replaces TouchBase

TouchBase was the first stack offered to the RW community that could obfuscate email addresses, telephone numbers and Skype links. The stack rapidly rose in popularity; as an alternative to contact forms and more obtrusive methods of protecting against spam bots. However it was only able to handle a couple of basic link types and afforded no compatibility with later versions of PHP. Users wanted a newer stack with support for more link types and the choice of other settings to be expanded. Along with the ability to generate obfuscated links for use elsewhere in websites. Therefore the Obfuscator stack was developed to meet these requirements.

Until 1st April 2023, Obfuscator is a free update for users of TouchBase. Simply get in contact before this date (with proof of purchase) to request a copy of Obfuscator. It's recommended that you replace copies of TouchBase in your website with Obfuscator, to continue getting obfuscation spam protection.