cat docs/theming-embedding.md
All docs Last updated

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.

Current-page awareness

The chat can be told which page it is sitting on. This is off for new agents; once you switch it on, it receives the page address (with tracking parameters, other query strings and fragments removed), its title, first heading and breadcrumbs, but never the body text, and uses them only as a hint for what your question is about. Visitors see the page title in a small line above the input when it is in play.

  • Turn it on or off for an agent in the Configuration tab ("Use the current page"). With it off, visitors keep chatting normally; the assistant just gets no page hints.
  • Private mode is not an exception. A private conversation still gets the page hint, because nothing page-derived is stored — the hint lives only in that one request. Private mode governs storage, not what the model can see in the turn you send.
  • It is a relevance hint, not a source. The assistant is told where you are; it does not read your page, and it does not fetch or verify anything from it. Only content you put in your libraries can be cited.
  • PDF-only agents get the page title as a hint too, but with no excerpt: nothing is retrieved from the browser page itself.

Embedding in an iframe (LMS, Moodle, Canvas)

The plain <iframe> snippet in the Embed tab works unchanged, with no JavaScript on your page. Add page awareness in two steps:

  1. List the exact origins of the pages you embed on in the agent's allowed origins (for example https://moodle.example.de). Wildcards, bare hostnames and empty lists are not accepted for page sharing — the chat still works from anywhere you allow it, it just will not be told the page.
  2. In the Embed tab, switch on current page awareness and paste the second snippet. It adds one script that hands the frame the page address (with tracking parameters, other query strings and fragments removed), its title, first heading and breadcrumbs.

On a single-page app the page title changes as the visitor navigates, and the chat follows automatically. If your router keeps its own page model, you can pass it directly instead:

const bridge = ChatWidget.connectIframeContext(document.querySelector('#oshu-chat-frame'));
bridge.setPageContext({ title: 'Lecture 4 — Duality', heading: 'Dual problem' });
// later, or on a page with nothing meaningful to say:
bridge.setPageContext(null);

The connection is opened by the chat frame, not by your page, and only after the agent's owner has enabled the capability. Titles are capped and sanitised, and the frame ignores anything from an origin that is not on your allowed-origins list.

Fixed launch URLs

The Embed tab can also bake a page title into the iframe URL as a #oshu-page=… fragment. Two limits worth knowing before you use it:

  • It is fixed when you generate the snippet, so it does not follow navigation on a single-page site. Use the script above if your pages change without a reload.
  • URL fragments appear in the address bar, in browser history, and often in server access logs. Never put anything sensitive in one, and leave it empty when the page title itself is private (a student name, an individual case, a draft).

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.