Guide: plain HTML
Integrating Nastar into a static site with no build step.
1. Add the SDK
<script defer src="https://cdn.nastar.dev/sdk/v1/nastar.min.js"
data-site-key="YOUR_PUBLIC_SITE_KEY"></script> That's the whole install — it auto-initializes and exposes window.Nastar. Place it in your <head>, before any analytics or marketing scripts.
2. Gate an optional script
Never load an optional script directly. Wrap it in loadWhenConsented:
window.Nastar.ready.then(() => {
window.Nastar.loadWhenConsented('analytics', () => {
const script = document.createElement('script')
script.src = 'https://your-analytics-vendor.example/tag.js'
document.body.appendChild(script)
})
})3. Add a "Privacy settings" control
<button id="open-prefs" type="button">Privacy settings</button>
<script>
document.getElementById('open-prefs').addEventListener('click', () => {
window.Nastar.openPreferences()
})
</script>What this verifies
This exact pattern — init, gate every optional script behind loadWhenConsented, reopen via a persistent control — is the one this guide's automated tests exercise: the gated script doesn't execute before a consent decision, executes after accepting its category, stays blocked after rejecting it, and the decision persists across a reload.
CSP
A minimal policy for this pattern — no unsafe-inline needed:
Content-Security-Policy:
script-src 'self' https://cdn.nastar.dev https://your-analytics-vendor.example;
connect-src 'self' https://api.nastar.dev;Other frameworks
Nuxt has its own guide now: Guide: Nuxt — where the script tag goes in nuxt.config.ts, client-only gating, and the router hook that reports SPA page views. That's the integration this site runs.
Nothing else is written. Do not treat the following as verified working integrations:
- Astro — no guide, untested.
- Next.js — no guide, untested.
- WordPress — no guide, untested.
The SDK has no framework-specific API, so the pattern above is a reasonable starting point for any of them — but adapting it is your own untested work, not a supported integration.