Getting Started #

This webcomponent is basically a wrapper with some customisation for the original Email Obfuscator by Jason O'Neill.

Step 1: Generate Encoded image #

Generate the encoded image file using Email Obfuscator and save it your public or assets directory.

Step 2: Installing Webcomponent #

HTML & Vanilla JS #

Import the webcomponent using any CDNs that deliver packages from npm like unpkg, skypack.

<script type="module">
  import EmailAddress from "https://cdn.skypack.dev/email-obfuscator-webcomponent";
  customElements.define("email-address", EmailAddress);
</script>

NPM/Yarn #

If you want to install and use the webcomponent using package managers like npm/yarn:

npm install email-obfuscator-webcomponent

yarn add email-obfuscator-webcomponent

In your script file, import the component and define it:

import EmailAddress from 'email-obfuscator-webcomponent';
customElements.define("email-address", EmailAddress);

And use the component passing in the correct path to the encoded image:

<!-- Anywhere in your HTML page -->
<email-address src="/images/encoded-email-image.png"></email-address>