# Add obscure.js to BSS. How to?

**URL:** <https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009>\
**Category:** Bootstrap Studio Help\
**Created:** [February 21, 2023, 8:03pm UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009 "2023-02-21T20:03:45Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![fynn](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/f/ecc23a/32.png) [@fynn](https://forum.bootstrapstudio.io/u/fynn)\
**Post date:** [February 21, 2023, 8:03pm UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/1 "2023-02-21T20:03:45Z")

</div>

Hey all,

how would I add the obscure.js from this site:

> **[Stop Email Spam with Obscure.js (Hide Your Email Address From Spammers) |...](https://josephpinder.com/blog/stop-email-spam-with-obscurejs-hide-your-email-address-from-spammers)**
>
> Obscure.js is a lightweight script that obscures — or hides — email addresses and telephone numbers from spammers.

to Bootstrap Studio. Yes, I can add the obscure.js easily to the project, but how would I put this:

```auto
<script>
  var obscure = new Obscure();
</script>

```

right before the closing body tag?  
Any help appreciated.

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [February 22, 2023, 1:24am UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/2 "2023-02-22T01:24:38Z")

</div>

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…

```auto
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.](https://github.com/jsphpndr/obscurejs)

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.

---

<div class="post-metadata">

**Author:** ![jo-r](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/jo-r/32/1926_2.png) [@jo-r](https://forum.bootstrapstudio.io/u/jo-r)\
**Post date:** [February 22, 2023, 2:46am UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/3 "2023-02-22T02:46:32Z")

</div>

When you add js files to BSS they automatically get added before the closing body tag.

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [February 22, 2023, 3:37am UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/4 "2023-02-22T03:37:24Z")

</div>

Lol… good point Jo! I explained everything except what the person actually asked. Duh on me! 🥴

---

<div class="post-metadata">

**Author:** ![fynn](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/f/ecc23a/32.png) [@fynn](https://forum.bootstrapstudio.io/u/fynn)\
**Post date:** [February 22, 2023, 7:19am UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/5 "2023-02-22T07:19:37Z")

</div>

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 .

---

<div class="post-metadata">

**Author:** ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)\
**Post date:** [February 22, 2023, 9:21am UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/6 "2023-02-22T09:21:27Z")

</div>

In the design tab, right click on Javascript \> New \> JS File

![image](https://forum.bootstrapstudio.io/uploads/default/original/2X/4/4a40eb610ac5caf6775db3155aa2103a9b26f523.png)

This will produce untitled.js - rename this to something readable (obscure.js)

Then edit the new file and add:

```auto
 var obscure = new Obscure();

```

You don’t need the script tags

---

<div class="post-metadata">

**Author:** ![fynn](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/f/ecc23a/32.png) [@fynn](https://forum.bootstrapstudio.io/u/fynn)\
**Post date:** [February 22, 2023, 10:26am UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/7 "2023-02-22T10:26:17Z")

</div>

> [@fynn](#):
>
> `var obscure = new Obscure();`

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 🙂

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [February 22, 2023, 11:02am UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/8 "2023-02-22T11:02:31Z")

</div>

> **[Obscure](https://obscure.bss.design/)**
>
> No need to have two javascript files for that.
> You can copy the script from this example

---

<div class="post-metadata">

**Author:** ![fynn](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/f/ecc23a/32.png) [@fynn](https://forum.bootstrapstudio.io/u/fynn)\
**Post date:** [February 22, 2023, 12:27pm UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/9 "2023-02-22T12:27:54Z")

</div>

That’s even better 🙂 Thank you! And nice that you found the area code of Nottuln too 😉

---

<div class="post-metadata">

**Author:** ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)\
**Post date:** [February 22, 2023, 12:35pm UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/10 "2023-02-22T12:35:43Z")

</div>

@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:

```auto
<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 🙂

---

<div class="post-metadata">

**Author:** ![fynn](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/f/ecc23a/32.png) [@fynn](https://forum.bootstrapstudio.io/u/fynn)\
**Post date:** [February 22, 2023, 12:39pm UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/11 "2023-02-22T12:39:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [February 22, 2023, 1:35pm UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/12 "2023-02-22T13:35:18Z")

</div>

@fynn

**free courses**

> **[JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript)**
>
> JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js,...

> **[JavaScript Tutorial](https://www.javascripttutorial.net/)**
>
> JavaScript Tutorial provides you with many practical tutorials that help you learn JavaScript from scratch quickly and effectively.

> **[JavaScript Tutorial - An Ultimate Guide for Beginners](https://www.tutorialrepublic.com/javascript-tutorial/)**
>
> JavaScript Tutorials for Beginners - Learn the concepts of world's most popular client-side scripting language in simple and easy steps with lots of examples.

if you want to **spend money**

> **[JavaScript Course | Modern JavaScript From The Beginning 2.0](https://www.traversymedia.com/modern-javascript-2-0)**
>
> This is a 37-hour JavaScript course to take you from absolute beginner to learning intermediate and advanced concepts. There are 22 learning modules and loads of projects. Learn concepts like scope, OOP, async JS, fetch API and even full stack...

> **[JavaScript Simplified](https://javascriptsimplified.com/)**
>
> Learn how to think like a developer and build any project you can dream of by taking action instead of just following along with tutorials.

On **YouTube**

> **[The Net Ninja](https://www.youtube.com/@NetNinja)**
>
> Black-belt your web development skills. Over 1000 free programming tutorials about:
> 
> \- Modern JavaScript (beginner to advanced)
> \- Node.js
> \- React
> \- Vue.js
> \- Firebase
> \- MongoDB
> \- HTML & CSS
> \- PHP & MySQL
> \- Laravel
> \- React Native
> \-...

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [February 22, 2023, 3:25pm UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/13 "2023-02-22T15:25:47Z")

</div>

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.)

```auto
(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)_

---

<div class="post-metadata">

**Author:** ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)\
**Post date:** [February 22, 2023, 7:48pm UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/14 "2023-02-22T19:48:06Z")

</div>

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](https://bootstrap-studio.stackstaging.com/EmailObscuredLink.bscomp)

and  
[https://bootstrap-studio.stackstaging.com/TelephoneObscuredLink.bscomp](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)

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [February 22, 2023, 9:01pm UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/15 "2023-02-22T21:01:03Z")

</div>

> **[Obscure 2](https://obscure2.bss.design/)**
>
> This is another example of an obscure emails

---

<div class="post-metadata">

**Author:** ![jralston](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/j/49beb7/32.png) [@jralston](https://forum.bootstrapstudio.io/u/jralston)\
**Post date:** [February 28, 2023, 1:23am UTC](https://forum.bootstrapstudio.io/t/add-obscure-js-to-bss-how-to/10009/16 "2023-02-28T01:23:14Z")

</div>

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…

[JavaScript - The Complete Guide 2023 (Beginner + Advanced)](https://www.udemy.com/course/javascript-the-complete-guide-2020-beginner-advanced/learn/lecture/16013776?start=0#overview)