We found out a way to do it. Let me share the method.
But first, the reasoning behind it.
We have our correct email address (fetched from a database or any variableâŚ).
We want this email address to be reversed - via reverse() - and fed to mailto: so that bots get a wrong address value when they click on the email address.
But we also want our email address to be displayed correctly on the page, by using a css trick that reverses the reserved email value.
Create an API (named âemailReverseâ in our example) in server action to query the concerned email address (from a database in this example).
In your page or footer, create a server connect to call the emailReverse API.
Add this class to your style.css or to your footer if that works for you. This class will be applied to the email address later for the correct display (thanks @ben for this).
<Style>
.reverse {
unicode-bidi: bidi-override;
direction: rtl;
}
</Style>
In your page or footer, double click inside the paragraph where your email is to be displayed and select the lightning bolt:
Select the email value fetched from your DB by the emailReverse API action, which you find in your server connect then click Select.
Right now your correct email address is displayed on the page.
Now is the key step: we need to reverse this email so that the mailto: function we are going to use returns a wrong email address value to bots.
With the email on the page selected:
-
split each letter contained in the email address so all letters are dissociated,
- this creates an array of letters that enables us to do the reverse function (does not work on a single string of characters),
- then once the split characters are reversed, we join them back so they become a unique string of characters again.
In order to do that, open Dynamic Attributes of your email link, select Links in the left submenu and click Link then Select. Then write mailto: in the Link field then click data binding.
and select the email value from your server connect:
Click the data formatter on the right:
And right click on the email value.
First select split from the Manipulation menu then Select button.
Switch to code view and add .reverse() at the end of the code.
Then data formatter on the right again where you right click on Reverse and select join from the array menu:
You end up with this code:
NOTE: If wappler asks you to specify the characters in the parameter properties when using split and join, then just write the following code instead in the code view window: 'mailto:'+scEmail.data.qryEmail.email.split('').reverse().join('')
Click select to validate and save. You see your final dynamic attribute value now:
Now the mailto: value is the reversed email address, which is the intended result so the bots that click the email get the wrong address. Mission accomplished.
But we do need to display the right email address to our genuine visitors. Scroll back up the properties panel where you add the reverse class we defined earlier:
Now your email address, whose value remains revered inside mailto: thanks to the dynamic attributes, has a normal display on your page thanks to the css reverse class.
I hope that is clear for everyone.
