bisc8.app
Accedi
Tutte le integrations
⚛

BISC8 + React (Vite / CRA)

Mount script via useEffect in App.tsx — SPA-safe.

BISC8 + React (Vite/CRA): SPA-safe install with single useEffect. Works with React Router.

Gratis €0/mese · Nessuna carta richiestaInizia gratisVedi setup

Perché BISC8 per React (Vite / CRA)

SPA-friendly

Banner mounts once on first render. Doesn't re-inject on client-side route changes — preserves consent state.

No build-tool friction

Pure DOM API. Works with Vite, CRA, Parcel, esbuild, Webpack 5 — anything that renders to DOM.

TypeScript types

@bisc8/client npm package ships .d.ts for window.bisc8 — autocomplete + type-safety in handlers.

Setup (4 passi)

  1. 1. Add the useEffect to your root component

    Paste in App.tsx or your top-level layout. Use the id check to dedupe across hot-reloads.

  2. 2. Set data-domain to your hostname

    Strip protocol and trailing slash. e.g. data-domain="myapp.com".

  3. 3. Build + deploy

    npm run build → host the static output. Banner renders on first visit.

  4. 4. Wire programmatic API (optional)

    Subscribe to window.bisc8.on("granted", fn) to fire analytics post-consent.

Snippet di codice

Sostituisci example.com con il tuo dominio BISC8 registrato.

// App.tsx — Vite / CRA / Parcel
import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    if (document.getElementById('bisc8-boot')) return;
    const s = document.createElement('script');
    s.id = 'bisc8-boot';
    s.async = true;
    s.src = 'https://cdn.bisc8.app/v1/boot.js';
    s.setAttribute('data-domain', 'example.com');
    document.head.appendChild(s);
  }, []);
  return (/* your app */);
}

Risoluzione problemi

Banner re-mounts on every route change

Ensure the useEffect is in the OUTERMOST component (App.tsx), not nested in a route. The id check handles SPA dedupe.

Vite dev server CORS error

CORS is open on cdn.bisc8.app + app.bisc8.app — if you see CORS, check your reverse proxy. Hot-reload sometimes injects a fake origin.

Where to listen for accept event

window.bisc8.ready.then(() => window.bisc8.on("granted", () => { /* analytics now allowed */ }))

Guide correlate

Pronto al lancio?

Crea un account in 30 secondi, copia lo snippet, banner live in 60s totali.

Inizia gratis con React (Vite / CRA)