Skip to main content

Add Datsnip to Your Site

One snippet is all it takes. Paste it into your site and every feature — A/B experiments, announcement banners, smart triggers, funnel tracking — turns on immediately.

The snippet​

Go to Settings → Install Snippet in your dashboard. You'll see a pre-filled snippet with your unique Site ID. Copy it and paste it into the <head> of every page on your site.

<!-- paste this before </head> on every page -->
<script>
(function(w,d,k){
  w._sf = { siteId: k, ingestUrl: 'https://api.datsnip.com' };
  var s = d.createElement('script');
  s.async = 1;
  s.src = 'https://api.datsnip.com/sdk/tracker.js';
  d.head.appendChild(s);
})(window, document, 'YOUR_SITE_ID');
</script>

That's it. No other setup needed.

Your Site ID is in the dashboard

Go to Settings → Install Snippet and your Site ID (sf_...) is already in the snippet, ready to copy.

Where to paste it on common platforms​

PlatformWhere to paste
WebflowProject Settings → Custom Code → Head Code
ShopifyOnline Store → Themes → Edit Code → layout/theme.liquid before </head>
WordPressUse "Insert Headers and Footers" plugin → Scripts in Header
SquarespaceSettings → Advanced → Code Injection → Header
FramerSite Settings → Custom Code → End of <head> tag
WixSettings → Custom Code → Add to Head
Plain HTMLPaste before </head> in every page
Next.js / ReactYour root layout or _document.tsx

What the snippet does​

It loads the Datsnip SDK from api.datsnip.com in the background (async, so it never blocks your page). The SDK then fetches your site's configuration — banners, triggers, page fixes, experiments — and starts capturing behavior such as rage clicks, dead clicks, scroll depth and JavaScript errors.

Running experiments that change the page above the fold?

Add the optional anti-flicker guard from Anti-Flicker so visitors never see the original content flash before a variant applies.

Verify it's working​

After pasting and publishing:

  1. Visit your site in a browser
  2. Open DevTools → Network tab
  3. Search for "tracker" — you'll see it load

Or simply go to your Datsnip dashboard — if the snippet is installed correctly, Settings will show your site as active with a green dot.

Next step​

Run your first A/B experiment →