supapulseCore packageExamples
Examples
Ready-to-use @supapulse/core snippets for plain HTML, React without the React package, Vue and checkout attribution.
Plain HTML
<!doctype html>
<html lang="en">
<head>
<script
defer
src="https://cdn.jsdelivr.net/npm/@supapulse/core@1/dist/browser.js"
data-token="YOUR_PUBLIC_TOKEN"
></script>
</head>
<body>
<button id="cta">Start free trial</button>
<script>
document.getElementById('cta').addEventListener('click', function () {
window.supapulse && window.supapulse.event('cta_click', { location: 'hero' });
});
</script>
</body>
</html>React without @supapulse/react
import { Supapulse } from '@supapulse/core';
import { useEffect } from 'react';
const supapulse = new Supapulse();
export function App() {
useEffect(() => {
supapulse.init({ apiToken: import.meta.env.VITE_SUPAPULSE_TOKEN });
}, []);
return <button onClick={() => supapulse.event('cta_click')}>Start</button>;
}init() ignores repeat calls, so React's double-run of effects in development is harmless.
Vue 3
import { Supapulse } from '@supapulse/core';
const supapulse = new Supapulse();
let started = false;
export function useAnalytics() {
if (!started && typeof window !== 'undefined') {
supapulse.init({ apiToken: import.meta.env.VITE_SUPAPULSE_TOKEN });
started = true;
}
return {
event: (name: string, data?: Record<string, unknown>) => supapulse.event(name, data),
sessionId: () => supapulse.getSessionId(),
};
}Passing the session ID to checkout
document.getElementById('buy')!.addEventListener('click', async () => {
const response = await fetch('/api/checkout', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ sessionId: supapulse.getSessionId() }),
});
const { url } = await response.json();
location.href = url;
});// Stripe Checkout as an example. Store the session ID in metadata so the webhook gets it back.
const session = await stripe.checkout.sessions.create({
mode: 'payment',
line_items: [{ price: priceId, quantity: 1 }],
success_url: 'https://acme.com/thanks',
metadata: { supapulse_session_id: sessionId },
});The webhook side is in the Stripe guide.