Layout mode

By default the Orb Web SDK picks fullscreen or floating layout based on the viewport — phones get fullscreen, desktops get the floating chat panel. The mode config option lets you override that and lock the layout to whichever you want, on every screen size.

Values

mode accepts three values:

"auto" (default) — keep the responsive behavior. Viewport size + height media queries decide between fullscreen and floating.
"fullscreen" — always render fullscreen. The launcher is hidden and the chat takes the whole window.
"floating" — always render as a floating panel. On small phones, height-based media queries still kick in so the panel stays usable.

Setting `mode`

mode lives on orbConfig alongside connectionOptions:

<script type="text/javascript">
    window.orbConfig = {
        mode: "floating",
        connectionOptions: {
            gridUrl: "https://grid.meya.ai",
            appId: "app-...",
            integrationId: "integration.orb",
        },
    }
</script>

Behind the scenes Orb writes mode to <html data-orb-mode="...">, which gates the responsive CSS used by customizing-ux-for-mobile-and-desktop.

Trying it out

The smoke-test page in demo-app accepts a ?mode= URL parameter so you can flip between values without touching code:

https://your-host/launch_smoke.html?mode=fullscreen
https://your-host/launch_smoke.html?mode=floating
https://your-host/launch_smoke.html?mode=auto

Hard-reload between toggles so the new data-orb-mode value takes effect.

Values

Setting mode

Trying it out

Setting `mode`