Publiq

Web push

Browser notifications with user identification (external_id, email, attributes, tags) — targetable by the same rules as email.

Web push captures visitors who did not leave an email — they just grant permission. The Publiq SDK identifies the user (external_id, email, attributes, tags), so you send pushes targeted by the same rules as an email segment. Get your App ID and public key (VAPID) in the app, under Web push → Integration guide.

How it works

  • Permission — the visitor agrees to receive notifications.
  • Subscription — the browser creates a push subscription (endpoint + keys).
  • Identity — the SDK sends the subscription + identify() (external_id, email, attributes, tags) to Publiq.
  • Send — you send pushes targeted by tag/attribute; dead endpoints are pruned.

Step 1 — Service worker

Host the publiq-push-sw.js file at the root of your site (same origin — Web Push requires it). You can use ours, served at https://app.publiq.digital/publiq-push-sw.js:

// publiq-push-sw.js — hospede na RAIZ do seu site (same-origin, exigência do Web Push).
self.addEventListener('push', (event) => {
  const data = event.data ? event.data.json() : {};
  event.waitUntil(
    self.registration.showNotification(data.title || 'Notificação', {
      body: data.body || '',
      icon: data.icon || undefined,
      data: { url: data.url || '/' },
    })
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const url = (event.notification.data && event.notification.data.url) || '/';
  event.waitUntil(clients.openWindow(url));
});

Step 2 — Add the SDK

Paste before </body>. Replace YOUR_APP_ID with your App ID.

<script src="https://app.publiq.digital/publiq-push.js" data-app="YOUR_APP_ID" async></script>
<script>
  // Pede permissão, assina e registra o service worker automaticamente.
  Publiq.push.init();
</script>

Step 3 — Identify the user

// Chame quando souber quem é o usuário. Vira segmentação (mesmas regras do e-mail).
Publiq.push.identify({
  externalId: 'user_42',
  email: 'ana@cliente.com',
  attributes: { plan: 'pro', city: 'SP' },
  tags: ['vip', 'black-friday'],
});

Manual integration (without the SDK)

If you prefer using the public key directly in your frontend, here is the full flow with the raw Web Push API:

// Integração manual (sem o SDK) usando a chave pública VAPID direto no frontend.
const PUBLIQ = 'https://app.publiq.digital';
const APP_ID = 'YOUR_APP_ID';
const VAPID_PUBLIC_KEY = 'YOUR_PUBLIC_KEY'; // pegue em Web push → Guia de integração

function urlB64ToUint8Array(b64) {
  const pad = '='.repeat((4 - (b64.length % 4)) % 4);
  const raw = atob((b64 + pad).replace(/-/g, '+').replace(/_/g, '/'));
  return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
}

async function subscribe(identity) {
  const reg = await navigator.serviceWorker.register('/publiq-push-sw.js');
  await navigator.serviceWorker.ready;
  if ((await Notification.requestPermission()) !== 'granted') return;

  const sub = await reg.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY),
  });
  const { endpoint, keys } = sub.toJSON();

  // 1) Registra a assinatura
  await fetch(PUBLIQ + '/api/public/push/subscribe', {
    method: 'POST', headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ appId: APP_ID, endpoint, keys, userAgent: navigator.userAgent }),
  });

  // 2) Identifica o usuário (external_id, email, atributos, tags)
  await fetch(PUBLIQ + '/api/public/push/identify', {
    method: 'POST', headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ endpoint, ...identity }),
  });
}

subscribe({ externalId: 'user_42', email: 'ana@cliente.com', attributes: { plan: 'pro' }, tags: ['vip'] });

The publiq-push-sw.js MUST be served from your own origin (same domain as the page). Service workers are same-origin — you cannot register it from another domain.

Web push — Publiq Docs