Widgets — VisitorLoop Docs

Widgets are the widgets displayed on your website. There are six channel types — each designed for a different purpose.

Channel types

Popup

A modal overlay that appears in the centre of the screen. Best for capturing email sign-ups, showing discount codes, or announcing important news. Popups command the most attention but should be used sparingly to avoid frustrating visitors.

Banner

A full-width notification bar displayed at the top or bottom of the page. Ideal for site-wide announcements, cookie notices, sale banners, or any message that should be visible without interrupting the browsing experience.

Message

A chat bubble widget that appears in the corner of the page and opens a live chat conversation. When a visitor sends a message, it appears in your Inbox for your team to respond. See Chat & Inbox for details.

Social Proof

A small toast notification that shows recent activity (e.g. "Sarah from New York just signed up"). Great for building trust on landing pages.

Tooltip

A contextual popup anchored to a specific element on the page, identified by a CSS selector. Use tooltips to highlight features, guide users through onboarding, or surface tips in-context.

Embed

An inline widget rendered inside a <div> element you designate with a CSS selector. Unlike other channels, Embeds are part of the page layout rather than overlaid on top of it — perfect for inline sign-up forms or content widgets.

Widget status

Draft — saved but not live. Visitors cannot see it.
Published — live. The loader script will display it when targeting conditions are met.
Paused — temporarily hidden without losing your settings.
Archived — removed from active use but retained for reporting purposes.

Publishing

Widgets are only served to visitors after you click Publish. Editing a published widget updates it immediately — no need to re-publish.

Creating a widget

Go to Widgets → New widget.

Choose a site and a channel type (Popup, Banner, etc.).

Design the widget in the visual editor. Add blocks, set colours, and write copy.

Configure Triggers — when the widget should appear (on load, on scroll, on exit intent, after a delay).

Configure Targeting — which URLs or visitor segments should see it.

Set Frequency — how often the same visitor sees the widget (once, once per session, always).

Click Publish. The widget goes live immediately.

Triggers

Triggers control when the widget is shown to a visitor:

On page load — shown immediately when the page finishes loading.
After delay — shown after a set number of seconds.
On scroll — shown after the visitor has scrolled a percentage of the page.
On exit intent — shown when the visitor's cursor moves towards the browser's address bar (desktop only).
On click — triggered when the visitor clicks an element matching a CSS selector you provide.

Targeting

Restrict which pages or visitors see the widget:

URL conditions — show only on pages matching a URL pattern (contains, starts with, exact match, regex).
Device — show on desktop, mobile, or both.
New vs returning visitors — target only first-time visitors, or those who have been before.

Frequency

Show once — the visitor sees it once, then never again (stored in localStorage).
Once per session — resets every time the browser session ends.
Always — show every time the trigger fires. Use with caution.

Form fields

Popups and Embed widgets can include a form to capture leads. Add fields in the editor's Formpanel — pick a type, set a label and placeholder, mark it required if needed. Supported types:

Email, Text, Phone, Number — standard visible inputs.
Long text — a multi-line textarea.
Dropdown — a select with a list of options you define.
Hidden — not shown to the visitor, but submitted with the form.

Hidden fields

Use a hidden field to attach extra context to every lead — things like a tenant ID, plan tier, referral source, or any value the visitor doesn't need to see or edit. The submitted value lands in the lead's data payload alongside the visible fields, and shows up in the dashboard'sExtra fields section, the email notification, and the lead.created webhook.

Two ways to set the value:

Static value, set in the editor — type the value into the Value input on the field row. The same value is submitted by every visitor. Good for campaign tags like source: "homepage-popup".
Dynamic per-visitor, set from your site's JavaScript — call window.VisitorLoop.setFormData({ field_name: "value" }). This overrides the static value at runtime. Good for logged-in user info, tenant context, or A/B test assignments.

See Integrations → JavaScript API for the fullsetFormData reference.

Analytics

Each widget tracks four events automatically:

Impression — the widget was displayed.
Click — a button or link inside the widget was clicked.
Conversion — a form inside the widget was submitted (lead created).
Close — the visitor dismissed the widget.

View these on the widget's analytics tab. Conversion rate = Conversions ÷ Impressions.