Install the SDK

Two ways in: a CDN <script> tag for any HTML page, or the @sumidata/browser npm package for bundled apps (Vite, Vike, React, Next.js). Pick the tab that matches your stack - every page view, click, and error is captured automatically.

01Add Sumidata

Pick your stack, copy the snippet, ship it.

index.html

<!-- Sumidata SDK -->
<script>
  window.Sumidata = window.Sumidata || { push: function(m, a) { (this.q = this.q || []).push([m, a, Date.now()]) } };
</script>
<script
  src="https://sdk.sumidata.io/loader.js"
  data-project-id="YOUR_PROJECT_ID"
  data-src="https://sdk.sumidata.io/sumidata.js"
  async
></script>

CDN or npm? The HTML tab loads a ~1 KB loader from sdk.sumidata.io - zero build tooling. The other tabs install @sumidata/browser, which bundles the SDK into your app - no external script and CSP-friendly. Both report to the same project.

Replace YOUR_PROJECT_ID

Find your project ID in the Dashboard under Settings → Projects, in the ID column. It's a UUID like 3f6c2a1e-8b4d-4e9a-9c1f-2d7b5e0a6c43.

Deploy

Push the change to production. The SDK starts recording page views, clicks, scrolls, and errors immediately. If you're installing from the post-signup onboarding screen, it verifies the install live - it flips to "We received data from your site" as soon as the first event arrives; if it stays on "Listening for your site…", check the Troubleshooting section below. Next step: Identify users so sessions stitch to known accounts.

02Troubleshooting

If the SDK doesn't seem to load, check these.

Content Security Policy

Both installs send data to https://api.sumidata.io, so a strict CSP needs it in connect-src. The npm package bundles the SDK into your app, so there's no extra script origin to allow. If you use the CDN <script> tag, also add https://sdk.sumidata.io to script-src:

CSP header

Content-Security-Policy: script-src 'self' https://sdk.sumidata.io; connect-src 'self' https://api.sumidata.io;

Ad blockers

Some ad blockers match on the word analytics or on common vendor domains. Sumidata's loader domain is generic enough to pass most filters, but if you see 0 events, check the browser Network tab for a blocked request. The npm package avoids a blocked script - the SDK ships inside your own bundle - but it still sends data to api.sumidata.io, so a blocker that lists that domain stops it too.