Container modes

The widget supports five ways of rendering against a page. Pick one in the configurator and the admin choice is saved on the embed config — or override per page with data-zeeker-mode.

Embed Elements are authoring presets over these same containers and canonical Social surfaces. Their streamlined placement control exposes four choices: Anchor launcher, your own button, fixed in the page, and full screen. Content presets commonly start fixed/inline; Group Chat and MOD Chat start with a floating desktop action and mobile tray action. All four remain selectable for every Element. A public mode override changes placement only—it cannot change the saved Social composition or weaken community/embed policy.

1. Floating (default)

A circular button anchored to a corner of the viewport. Tapping it opens a slide-in panel with the thread.

<script src="…/loader.js" data-zeeker-config="..." data-zeeker-mode="floating" async></script>

Best for: blogs, marketing sites, docs, any layout where you don't want to reserve space.

• Position: configurable per-side (bottom-right, bottom-left, top-right, top-left).
• Trigger label: optional text (for example, "Discuss" or "Join the conversation").
• Reaction tray inline: when enabled, the floating button is replaced by a horizontal bar with quick reactions and a comment count.

Navigation and mobile composers

Floating panels and sheets reuse Social's navigation controls. Every nested post, reply, reference, and detail screen exposes a visible Back action, including when the generic embed header is hidden. On mobile, an edge swipe performs that same Back action. The X dismisses the floating surface and is rendered as a flat control without elevation or a box shadow.

When a composer receives focus on mobile, the floating sheet remains anchored to the visible viewport instead of moving the entire panel above the keyboard. Zeeker uses the keyboard-safe viewport for the composer area so the editor and its actions remain available without pushing the surrounding thread out of the sheet.

Composer placement follows the Social surface rather than the outer container. A post or thread detail page uses its canonical bottom composer for replies and references. On desktop feed and community-list surfaces, the composer opens directly beneath—and slightly inset from—the card whose Reply or Reference action was selected. Composer labels, chips, toolbar buttons, and footer actions scale together with the available embed width; narrow layouts do not retain desktop-height controls around reduced text.

2. Fixed (integrated in page)

A persistent Social surface placed directly in the host layout. It has no overlay close button or global Social navigation. The embed may show or hide the generic top header, standard community card, contextual root, normal post/header regions, and composer. Its outer background and border are configurable rather than forced into a second rounded frame. An implementation-owned information box, when supplied by a preset such as Support Forum, remains an opaque internal surface even when this outer canvas is transparent.

With a transparent background, internal thread, community, and Chat navigation rows also let the host page show through. Back, theme, and account controls retain solid backgrounds individually; the surrounding row does not add a horizontal fill or divider. Content cards, composers, and sign-in panels remain solid. A detached panel or full-app presentation retains its own opaque canvas.

<style>
  #zeeker-embed { min-height: 620px; }
  @media (max-width: 640px) { #zeeker-embed { min-height: 520px; } }
</style>
<div id="zeeker-embed"></div>

<script
  src="…/loader.js"
  data-zeeker-config="..."
  data-zeeker-mode="fixed"
  data-zeeker-target="zeeker-embed"
  data-zeeker-height="620"
  data-zeeker-mobile-height="520"
  async
></script>

Best for: Comments below articles, Reviews and Product Q&A below product details, Support Forums inside help centers, feeds inside dashboards, and an explicitly integrated Chat screen or section. Chat defaults to activation-based placement but is not prohibited from fixed placement.

• Width: normally 100% of the host slot. The host controls the surrounding section width.
• Stable layout: use the responsive dimensions generated by Deploy so the host reserves the exact slot before the asynchronously loaded runtime arrives.
• Mobile behavior: the integrated surface remains part of the page and reflows responsively. It does not gain an overlay close button.
• Scroll behavior: choose host-page scrolling for a seamless document or an internal scroll region for a bounded application panel. Inline Element presets start in host-page mode and shrink-wrap the native content; choose internal mode only when the host deliberately reserves a fixed-height viewport.
• Loading behavior: choose infinite loading or an explicit Load more action independently of the scroll owner.

3. Anchor (inline)

Renders the thread inline inside a specific element on your page — typically at the bottom of an article.

<script src="…/loader.js" data-zeeker-config="..." data-zeeker-mode="anchor" async></script>

<!-- somewhere on the page -->
<div data-zeeker-comments></div>

Best for: blogs, docs, articles where you want a real "comments section" below the content.

• The widget looks for data-zeeker-target first, then falls back to the first [data-zeeker-comments] element.
• Height adjusts to content; the iframe resizes itself as the thread loads / replies expand.
• Anchor mode has no toggle button — the thread is always visible.
• Outer container/header border radius, content visibility, composer position, and post-opening behavior still come from the saved embed configuration. Internal Social cards, trays, badges, and reply layout are not restyled per Element.

4. Pill

A compact horizontal pill (think "comments + reactions tray") that sits inline near your content. Opens the slide-in panel when tapped.

<script src="…/loader.js" data-zeeker-config="..." data-zeeker-mode="pill" async></script>

Best for: news cards, product tiles, hero banners — anywhere you want a small, branded engagement footprint that's not a full comments section.

• Reaction buttons: up to 3 reactions shown inline; tapping one fires a reaction without opening the panel.
• Counts: shows reply count and reaction count.

5. Host-triggered

Trigger mode renders no Zeeker button. Your own menu item, tab, button, or link opens the configured destination through a CSS selector or window.zeeker.open().

<button class="open-community">Community</button>
<script
  src="https://embed.zeeker.com/api/embed/widget/trigger.js"
  data-zeeker-config="YOUR_CONFIG_ID"
  data-zeeker-mode="trigger"
  data-zeeker-selector=".open-community"
  async
></script>

In Customize → Container → Trigger, choose what the host control opens:

• Page discussion — the thread resolved for the current page.
• Community app — the community feed and app navigation.
• Community chat — the community group chat.
• MOD Chat — the current viewer's private conversation with authorized community staff.

The Group Chat and MOD Chat presets use the Anchor launcher by default with the same activation shape: a floating action on desktop and a Chat action in the mobile tray. When a publisher selects your own button, the runtime instead binds that one host-owned desktop or mobile action and does not add a second Anchor launcher.

Turn on Full screen to present the destination as an app screen instead of a side or bottom panel. For a full-screen Community app, you can hide the desktop header, show or hide mobile navigation, and enable or disable pull to refresh.

By default, trigger.js waits for the selected host control before downloading the full runtime or opening a Zeeker surface. Preload can load a destination in the background once that runtime is active. Leave it off for the lightest website integration; enable it only when the faster transition is worth loading content for visitors who may not open Zeeker. The trigger.js entry point itself remains interaction-first.

A full-app embed does not add its own close button; the host app's menu or navigation owns dismissal. It may expose ordinary full-app Social navigation. Focused inline and panel compositions do not add a global Social button. If the outside-access policy permits profile navigation, a profile action opens the signed-in user's canonical Social profile.

Threads, reactions, authentication, and community state remain shared with the normal Zeeker surfaces.

Switching modes

Two ways:

1. Configurator — change the Container mode dropdown and save. New page loads pick it up immediately (config is fetched per-boot).
2. Per-page override — data-zeeker-mode="..." on the script tag wins over the saved config.

Both options are non-destructive — switching modes preserves the thread, replies, reactions, and everything else.

Buttons & layout presets

Inside the floating and pill modes, the configurator exposes layout presets (Phase 2 launch, May 2026):

• Minimal — single button, no labels.
• Reactions — quick reaction and comment button.
• Full bar — reaction, comment, share, and save.
• Custom — pick any combination of buttons.

The host-rendered Save action uses the signed-in viewer's authenticated embed session and reports the persisted saved or unsaved state back to every visible bookmark control, including after the page is refreshed.

See Configurator → Layout presets.