Guides / Developer Guide

Developer Guide

Developers, you can follow the steps provided below to install Cybarmor.


Copy-paste the given code to all your website pages into <head> after all other javascript libraries to load cybarmor.js

<script type="text/javascript" id="cybarmorScript" src="" async defer></script>
<noscript id="cybarmorNoscript"><style>body *{display:none}body:before{content:"Please enable javascript to view this site"}</style></noscript>

Tracking Protection detection installation:

For websites other than Shopify, you may get the extra code in Cybarmor settings. For Shopify, to enable this detection, just turn on the related setting in the dashboard.

Easy Watermark Installation:

To enable easy watermark, you need to add the "cybarmor-watermark" class value to images you want to protect.

   <img class="cybarmor-watermark" src="/someimage.jpg" alt="someimage" />


You can disable Cybarmor™ on certain images by adding the "cybarmor-skipimage" class value to the image tag in your code.

<img class="cybarmor-skipimage" />

You can disable Cybarmor™ on certain pages by adding the cybarmor-skippage class value to the body tag in your code.

<body class="cybarmor-skippage">


Some locks may not work or there may be delays if the website is using a javascript library for lazy-loading. We recommend removing such libraries in favor of native lazy-loading

Starting with Chrome 76, you'll be able to use the new loading attribute to lazy-load resources without the need to write custom lazy-loading code or use a separate JavaScript library.

<img class="cybarmor-skipimage" loading="lazy" />

Native lazy loading is supported Chrome 76+ and any Chromium 76-based browsers. You can use the code below to detect whether the browser supports native lazyload.

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
  } else {
  // fetch polyfill/third-party library

Baking in native support for lazy-loading images and iframes can make it significantly easier for you to improve the performance of your web pages.

Shopify Code Guide

Automated installation is only available for Shopify stores. Just add the Cybarmor app from Shopify app store and it will automatically install to your site.

The Cybarmor script can be found in the "cybarmor" snippet and you can call the snippet when you need to

{% render 'cybarmor' %}

The snippet is added to <head> in theme.liquid by default.

You can use page and image filters by checking the template or other liquid values.

<body {% if template contains 'product' %}class="cybarmor-skippage"{% end %} >
<img {% if template contains 'product' %}class="cybarmor-skipimage"{% end %} >