Hey all,
how would I add the obscure.js from this site:
to Bootstrap Studio. Yes, I can add the obscure.js easily to the project, but how would I put this:
<script>
var obscure = new Obscure();
</script>
right before the closing body tag?
Any help appreciated.
To create a new JS script, go to the Design panel in the lower right. Right click JavaScript and choose New > JS file. Name it whatever you want and double click it to edit. In the editor, paste the code var obscure = new Obscure(); and click apply. Do not add the <script> </script> tags. They will be added by the program.
Then you need to add the actual obscure.js library. You can link to it by right clicking JavaScript again and selecting Link External JS and adding the path to the CDN which is…
src="https://cdn.jsdelivr.net/gh/jsphpndr/obscure/dist/obscure.min.js"
If you’d rather not use the CDN, you can download the script from the github repository and import it to host it locally. GitHub - jsphpndr/obscurejs: A lightweight script to obscure (or hide) email addresses and telephone numbers from spammers.
Click the green “code” button, download the zip file and extract to a folder. Then go to the Design panel. Right click JavaScript > Import JS, navigate to the folder and find the obscure.min.js file and import it.
When you add js files to BSS they automatically get added before the closing body tag.
Lol… good point Jo! I explained everything except what the person actually asked. Duh on me! 
That is true, but as far as I understood, the last bit is not to be included as a linked script, but as code (with script tags) before the .
In the design tab, right click on Javascript > New > JS File
This will produce untitled.js - rename this to something readable (obscure.js)
Then edit the new file and add:
var obscure = new Obscure();
You don’t need the script tags
Thank you, @richards, that worked. I tried to add this by creating a new js file before, but did it outside of BSS and then dragged it into BSS like I did with the actual scrip. For whatever reason that didn’t work. But alas, it does now 
That’s even better Thank you! And nice that you found the area code of Nottuln too 
@kuligaposten does it again Not only gives a solution but also improves on the original code***.
I might have to give this a go on a new site that I’m working on.
My normal method is:
<a href="#" onclick="JavaScript:window.location='mailto:'+'yourname'+'@'+'yourdomain.com'">yourname[at]yourdomain.com</a>
the [at] is usually replaced with a font-icon of the @ sign
***I’ve been studying the javascript course link you sent
Javascript gives me headaches. Considering I started my working career as a programmer (with Cobol though, not at all comparable with JS) and ended up as a social worker… that might give away something
Anyhow, what JS course do you recommend? I’d like to at least understand what it does.
Since Kuligaposten’s example link is temporary, here’s the code from his Obscure example (so this thread can still be useful to any who read it in the future.)
(function () {
'use strict';
const obscure = () => {
let newNode;
document.querySelectorAll('[obscure]').forEach(function (elem) {
newNode = document.createElement('span');
newNode.innerHTML = elem.innerHTML;
elem.classList ? (newNode.classList = elem.classList) : false;
elem.id ? (newNode.id = elem.id) : false;
for (let prop in elem.dataset) {
newNode.innerHTML = newNode.innerHTML.replaceAll('%' + prop.replace('p', ''), elem.dataset[prop]);
}
elem.parentNode.insertBefore(newNode, elem);
elem.remove();
});
};
obscure();
})();
(@kuligaposten Please advise if you want me to remove this, as it is your JS)
I’ve just created a couple of custom component which use a span rather than a template tag so that no custom code is needed.
You can download them here:
https://bootstrap-studio.stackstaging.com/EmailObscuredLink.bscomp
and
https://bootstrap-studio.stackstaging.com/TelephoneObscuredLink.bscomp
@printninja would be grateful for your feedback, especially on the telephone version, as I’m not sure if it needs the extra field for the US pattern (area code and prefix)
This is the JS course I use. I also have a bunch of other courses from Maximillian Swarzmuller on VueJS and React. They are great and it is easy to understand. Wait for a deal from Udemy to get them for cheap…