Installing the Widget

The embed snippet

Paste this once, before your closing </body> tag:

<script>
  window.LumioWidget=window.LumioWidget||function(){(window.LumioWidget.q=window.LumioWidget.q||[]).push(arguments)}
</script>
<script src="https://lumio.teurons.com/widget/loader.v1.js" async></script>
<script>
  LumioWidget('init', { widgetId: 'YOUR_WIDGET_ID' })
</script>

Replace YOUR_WIDGET_ID with the id shown in your widget's dashboard page.

The loader is version-pinned (loader.v1.js) — it never changes in place. Updates to widget behaviour ship through the loader, so you never need to touch the snippet again.

Placement & launcher

Set placement from the dashboard, not the snippet. Your widget's Appearance tab has a Placement & launcher section — position (left/right), offsets, launcher style, icon, and button text. Change it there and it updates live on every page that embeds the widget; you never touch the snippet again.

Heads up: anything you pass to init overrides the dashboard. A snippet like init({ widgetId, position: 'right' }) pins the launcher right and the dashboard position is silently ignored. For dashboard-controlled placement, keep your snippet to just { widgetId }. Only pass placement options when a specific embed must force its own layout regardless of the dashboard.

The snippet override accepts a display object (and a legacy top-level position alias):

LumioWidget('init', {
  widgetId: 'YOUR_WIDGET_ID',
  display: {
    position: 'left',          // 'left' | 'right'
    style: 'iconAndText',      // 'icon' | 'text' | 'iconAndText' | 'manual'
    iconImage: 'question',     // 'message' | 'search' | 'question' | 'buoy'
    text: 'Help',              // label for text / iconAndText
    size: 64,                  // launcher size in px (36–96; default 60 icon / 48 pill)
    horizontalOffset: 24,      // px from the corner (default 20)
    verticalOffset: 24,
    horizontalMobileOffset: 12, // optional mobile overrides
    verticalMobileOffset: 12,
  },
})

You can also change placement at runtime with config.

Use your own launcher button

Set style: 'manual' (or pick Manual in the dashboard) to suppress Lumio's floating button entirely, then open the widget from your own element:

<button onclick="LumioWidget('open')">Help</button>

Zero-JS article links

Open a specific doc from any link with a data attribute — no JavaScript. Put it on a contextual "Learn more" right where the user needs it (an order-success page, a settings screen, a pricing row):

<a data-lumio-article="settlement-tats">Learn more</a>
<a data-lumio-article="settlement-tats" data-lumio-article-type="modal">Open in a modal</a>

The value is the doc's slug (or its page id). You don't have to look it up — the dashboard generates a ready-to-paste link for every doc under Widget → Install → Contextual links (it uses the slug when it's unique, the id otherwise). Just filter to the doc and hit Copy link.

By default the link opens the doc in a focused sheet — a right-side panel on desktop, a draggable bottom sheet on mobile — close-only, so it stays focused on that one doc. data-lumio-article-type overrides the presentation:

Inside an opened doc, a link to another doc you serve opens in the widget; any other link opens in a new tab.

Single-page apps (SPA)

If your app uses client-side routing, report each navigation so Lumio can evaluate URL-based announcement targeting:

// Call this whenever the route changes
LumioWidget('event', { type: 'page-viewed', url: window.location.href, title: document.title })

Fire this after every navigation — for example, inside your router's afterEach hook or equivalent.

Finding your Widget ID

Your Widget ID is shown on the widget's detail page in the Lumio dashboard, under Embed.