Gamification Widget — SDK Demo

Mirrors a real client integration flow.

SDK Controls

Client Notification BadgeNo notifications

Trigger Test Notification

PUSH_NOTIFY Events

Every notification fired by the widget reaches your page as a gamblio-gamification-push-notify postMessage. You can consume it via the onNotification SDK callback or by listening directly on window.

No events yet — trigger a notification above to see it appear here.

Option A — SDK callback (recommended)

Gamblio('init', {
  // ...auth fields
  onNotification: (data) => {
    // data.driver.name  → "system" | "app"
    // data.driver.options.type     → "toast" | "fullscreen"
    // data.driver.options.position → "top-right" | ...
    // data.title, data.body, data.variant, data.count
    console.log('PUSH_NOTIFY', data);
  },
});

Option B — raw window listener

window.addEventListener('message', (event) => {
  if (event.data?.type !== 'gamblio-gamification-push-notify') return;
  const { title, body, variant, count, driver } = event.data;
  console.log('PUSH_NOTIFY', { title, body, variant, count, driver });
});

System Notifications

When driver.name === "system", Gamblio never shows its own UI — it calls your onNotification callback so you can trigger your own notification system.

No system notifications received yet. Select system in the driver dropdown above and trigger a notification.

Integration example

Gamblio('init', {
  // ...auth fields
  onNotification: (data) => {
    if (data.driver?.name === 'system') {
      // Gamblio shows nothing — you own the UI
      yourNotificationSystem.show({
        title: data.title,
        body:  data.body,
      });
      return;
    }
    // data.driver?.name === 'app' — Gamblio handled it
  },
});
Logs will appear here once connected…