Triggers & embeds

There are four surfaces that can open Glimpze. All of them route through the same machinery, so availability, required fields, and deep-link behaviour are identical whichever you use.

• Floating launcher — the circular / online-pill launcher Glimpze places for you. One per widget, configured in the dashboard, suppressed in API mode.
• Your own elements — add data-glimpze-cta to any button or link you already have. You own the markup and styling.
• CTA templates — a full call-to-action block designed in the dashboard and rendered by Glimpze into a placeholder you drop on the page.
• Inline install — the widget mounts inside your page layout instead of floating in a corner.

Add data-glimpze-cta="true" to any element to make it open the widget on click. Handled via a delegated listener, so elements added later (e.g. after a SPA route change) work too.

<button type="button" data-glimpze-cta="true">Open chat</button>

Add data-glimpze-cta-action="call" to open straight into a call — the declarative twin of open({ action: 'call' }). data-glimpze-cta-media picks video (default) or audio; data-glimpze-cta-skip-setup="true" skips the camera/mic device-check screen (the declarative twin of skipSetup). No dashboard config needed:

<!-- Opens the camera/mic check, then the call -->
<button data-glimpze-cta="true" data-glimpze-cta-action="call">Talk to us</button>

<!-- Skips the device-check screen — best paired with prefilled details -->
<button data-glimpze-cta="true" data-glimpze-cta-action="call" data-glimpze-cta-skip-setup="true">Call now</button>

<!-- Opens your booking page in a new tab instead of the widget -->
<button data-glimpze-cta="true" data-glimpze-cta-action="book">Book a time</button>

data-glimpze-cta-action="book" is different in kind: it opens the booking destination configured for your project in a new tab and shows no Glimpze panel at all. Because it must run inside the click to survive popup blockers, it is a CTA-only intent — there is no open({ action: 'book' }) equivalent.

By default the panel opens in the corner. Set Opening placement to anchored (Settings > widget editor > Triggers) and clicking any data-glimpze-cta element opens the panel as a popover growing out of that element instead. Visitors can drag it, if you allow that.

data-glimpze-cta-anchor overrides the global setting per element.

<!-- Panel grows out of this button instead of the corner -->
<button data-glimpze-cta="true" data-glimpze-cta-anchor="true">Chat right here</button>

<!-- Force the corner for this one element, even in anchored mode -->
<button data-glimpze-cta="true" data-glimpze-cta-anchor="false">Open chat</button>

Where data-glimpze-cta is your element with your styling, CTA templates are rendered entirely by Glimpze. Design a named template in the dashboard (Settings > widget editor > Templates) — avatars, copy, buttons, colours, layout, an image, even a short form — then drop a placeholder where it should appear.

<div data-glimpze-cta-template="TEMPLATE_ID"></div>

<!-- Optional per-instance alignment override -->
<div data-glimpze-cta-template="TEMPLATE_ID" data-glimpze-cta-template-align="start"></div>

• Design changes go live without a site deploy. The markup on your page never changes; the template is fetched at runtime.
• Avatars show who is actually online right now, scoped to the visitor's segment when you have segments configured, and the copy can switch automatically when nobody is available.
• Buttons carry intents — chat, call, or book — dispatched through exactly the same path as data-glimpze-cta.
• Templates can collect fields. If a template's mini-form gathers everything your project requires before chat, the visitor skips the pre-chat form entirely.
• The template id and a copy-paste snippet are shown in the dashboard editor.
• Placeholders added later (SPA route changes) are picked up automatically, multiple instances of one template on a page are fine, and templates work in API mode — they are the natural companion to a hidden launcher.
• data-glimpze-cta-template-align="start|center" overrides the template's alignment for a single instance.

Two events fire for templates on the internal bus, so you can send impressions and clicks to your own analytics:

GlimpzeWidget.on(GlimpzeWidget.events.INTERNAL_EVENT, ({ type, payload }) => {
  if (type === 'cta_template_shown')   analytics.track('Glimpze CTA seen',    payload);
  if (type === 'cta_template_clicked') analytics.track('Glimpze CTA clicked', payload);
  // payload: { templateId, surface: 'embed', action? }
});

cta_template_shown fires once per instance per page load, when it first scrolls into view. cta_template_clicked fires per button click and adds the button's action.

Instead of floating in a corner, the widget can mount inside your page layout — in a sidebar, a landing-page section, a help-centre column. Mark the container and Glimpze takes it from there. No dashboard setting is required: if an inline slot is present and visible, it becomes the widget's home and the corner launcher steps back.

<!-- The widget mounts here, in your page flow -->
<div data-glimpze-inline></div>

Give the container the size you want the widget to occupy; a sensible minimum height is reserved for you if you don't. Slots added after load (SPA route changes) are picked up automatically.

Options

<!-- Keep a call inside this slot instead of promoting it to an overlay -->
<div data-glimpze-inline data-glimpze-inline-call="host"></div>

<!-- Open straight to chat in this slot, regardless of the dashboard setting -->
<div data-glimpze-inline data-glimpze-inline-entry="chat"></div>

<!-- Leave room for a 72px sticky header when the slot is measured -->
<div data-glimpze-inline data-glimpze-inline-top-offset="72"></div>

Once the widget has booted it dispatches a glimpze:triggers-ready event on window carrying the widget's triggers and prefillable fields. It's a reliable signal that window.GlimpzeWidget is ready to call.

window.addEventListener('glimpze:triggers-ready', (event) => {
  const { widgetId, triggers, fields } = event.detail;
  // fields === GlimpzeWidget.getFields()
});