Skip to content
On this page

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 "";
  customElements.define("email-address", EmailAddress);


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>


The webcomponent adds crossorigin attribute to the image request (src) to be anonymous so make sure CORS headers are set correctly to the image path if the encoded image is served from some cross-origin.