cloakingx@guard:~
man cloaking-x.integrations.htmlIntegration Guide

HTML

For any plain HTML landing page — no build step, just paste three lines into <head>.

1. Copy the snippet

html
<!-- Cloaking X Integration Script -->
<style id="YOUR_PRE_HIDE_ID">html,body{visibility:hidden!important;background:#fff!important}</style>
<script>setTimeout(function(){var e=document.getElementById('YOUR_PRE_HIDE_ID');if(e&&e.parentNode)e.parentNode.removeChild(e);},10000);</script>
<script src="https://cloakingx.com/a/YOUR_ASSET_TOKEN.js" data-s="YOUR_STREAM_ID" onerror="var e=document.getElementById('YOUR_PRE_HIDE_ID');if(e&&e.parentNode)e.parentNode.removeChild(e);"></script>

YOUR_STREAM_ID, YOUR_ASSET_TOKEN, and YOUR_PRE_HIDE_ID above are placeholders — get the real, pre-filled snippet from your dashboard's Integration page. The asset token and pre-hide id are randomly generated per stream, so no two customers' pages ever carry the same script path or element id.

2. Open your HTML file and find <head>

Your file is usually called index.html. Look for <head> near the top — it's always inside the <html> tag.

3. Paste as the very first lines inside <head>

Your file should look exactly like this:

html
<!DOCTYPE html>
<html>
  <head>
    <!-- ✅ PASTE HERE — must be the very first lines -->
    <style id="YOUR_PRE_HIDE_ID">html,body{visibility:hidden!important;background:#fff!important}</style>
    <script>setTimeout(function(){var e=document.getElementById('YOUR_PRE_HIDE_ID');if(e&&e.parentNode)e.parentNode.removeChild(e);},10000);</script>
    <script src="https://cloakingx.com/a/YOUR_ASSET_TOKEN.js" data-s="YOUR_STREAM_ID" onerror="var e=document.getElementById('YOUR_PRE_HIDE_ID');if(e&&e.parentNode)e.parentNode.removeChild(e);"></script>

    <!-- everything else goes below -->
    <meta charset="UTF-8">
    <title>Your Page Title</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    ...
  </body>
</html>
Warning
Do NOT place it before </body> or add async to the script — the page will flash.

4. Save and deploy — you're done

Note
Real visitors will see a brief spinner then land on your destination page. Blocked traffic sees your fallback page. Neither group ever sees the page content before the check completes.