cat docs/theming-embedding.md
All docs

Theming and embedding

Every agent has a Theme tab for appearance and an Embed tab for installation. Changes preview live as you make them.

Theming

The Theme tab is grouped to match how you usually work:

  • Layout — pick a colour preset, then size the window. Width goes up to 800 px and height up to 1000 px; these apply to the floating and sidebar layouts on desktop. Mobile always uses the full viewport, and the full-page layout fills its container.
  • Colours — the header, chat bubbles, input, and chrome. Switch on the advanced editor for the full palette including borders, opacities, and shadows.
  • Content & text — the header title and subtitle, the opening welcome message, and the input placeholder.
  • Effects — the launcher icon plus fine-grained opacity and shadow controls.
  • Hosted page — the background for the standalone shareable page (see below).

You don't have to fill in everything. Start from a preset and adjust only what you want.

Embedding on your site

Open the Embed tab and copy the snippet. Paste it just before the closing </body> tag on any page where the chat should appear. The launcher loads asynchronously and won't block your page.

Layout options include a floating launcher, a docked sidebar, a full-page view, and an inline block placed wherever you drop a container. The Embed tab shows the exact snippet for each.

If your site sends a strict Content-Security-Policy, you may need to allow the Oshu script and connection origins. The Embed tab lists the directives to add.

Shareable hosted page

Don't have a site to embed on, or want a direct link? Enable public page on the agent. Oshu serves a standalone page for that agent at its own URL, and the dashboard gives you a copy-paste link and a QR code to share. The page is generated for you — no hosting required.

See also: Agents and Getting started.