Theming

Colour, position, and how the widget follows light and dark mode.

Browser Embed key dev · https://api.dev.oprag.ai

The project's widget configuration carries the theme. Anything you pass to mountWidget is merged over it, so you can theme centrally and override per page.

TypeScript 
await mountWidget({
  projectId: "proj_abc123",
  embedKey: import.meta.env.PUBLIC_OPRAG_EMBED_KEY,
  apiUrl: "https://api.dev.oprag.ai",
  theme: {
    primaryColor: "#0F766E",
    position: "bottom-right",
    mode: "auto",
  },
});
FieldTypeDescription
primaryColorstringAny CSS colour. Drives the launcher and send button.
position"bottom-right" | "bottom-left"Where the floating launcher sits.
mode"auto" | "light" | "dark"auto follows the visitor's prefers-color-scheme. Default auto.

When the widget is rendered inline it inherits your layout's width, so position has no effect there — see inline & launcher.

Ready to ship?

Get started free