OcambaHood Push demo ›
Hood Tag · in-page messaging

Modals & in-page messages, opened in code.

In production, modals are designed and published from the Ocamba dashboard — your team iterates on copy, targeting and A/B splits without touching the site. On this demo page the same configs are declared inline in one Hood('init', …, { modals_config }) block, and each opens when its named event trigger fires — the buttons simply call Hood('trackEvent', 'demo:…'). Templates render in an isolated shadow root (with automatic iframe fallback), so your page styles and the modal never collide. Watch the call log as you click.

Announcement modal

Good for: product news, feature launches, service notices. Light theme, fade-in, closes on backdrop click or Esc.

Entrance animations

Good for: drawing the eye without being jarring — fade-in, slide-up, slide-down, zoom-in. This one slides up.

Dark theme

Good for: matching dark-mode sites or high-contrast campaigns. theme: 'dark' with zoom-in.

Auto-close

Good for: toasts and confirmations that shouldn't demand a click — close_auto: 4000 dismisses it after 4 seconds.

A/B variants

Good for: testing copy or design — the SDK picks variant A or B by weight on each open (persistable per user). Open a few times to see both.

Campaign groups

Good for: capping pressure — modals in the same group show at most once per page view. Open the first, then try the second: it stays silent.

CTA-only close

Good for: flows that need an explicit choice — backdrop clicks are ignored (close_click: false), only the CTA (or Esc) closes it.

Iframe render mode

Good for: hostile CSS environments — renderMode: 'iframe' forces the iframe path the SDK otherwise uses as an automatic fallback.

NPS survey

Good for: measuring satisfaction in-page — a full multi-step Net Promoter Score survey with form capture, all inside one modal template.

The code behind this page

Hood('init', 'YOUR-TAG', {
  modals_config: {
    modals: [{
      id: 'welcome',
      template: 'basic-modal-template',      // fetched from your modal_url
      trigger_fire: 'each',                  // reopenable ('once' = per page view)
      triggers: [{ type: 'event', config: { name: 'show-welcome' } }],
      options: {
        theme: 'light',                      // light | dark
        animation: 'fade-in',                // fade-in | slide-up | slide-down | zoom-in
        close_click: true, close_esc: true,  // backdrop / Esc dismissal
        close_auto: 0                        // ms; 0 = never
      }
    }]
  }
});

// anywhere later — open it:
Hood('trackEvent', 'show-welcome');

Triggers aren't limited to events: the same modal can open on scroll depth, timers, exit intent, element visibility or form submits — modals and tags share one trigger engine.