> For the complete documentation index, see [llms.txt](https://docs.limio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.limio.com/ai/limio-agents/theming.md). # Theming an Agent The Presentation tab has a **Theme** section that brands the chat for a single agent: the colour of each part of the chat and the shape of the message bubbles. The tab also brands the chat's entry point, with a launcher logo, a slide-out label, and dedicated popup copy. Every setting is optional. Anything you leave unset keeps the Limio default, so a new agent looks the same as before until you change something. A theme applies wherever the agent's chat appears: the pop-out widget, the inline chat panel, the [chat embed](/ai/chat-embed/chat-embed.md) on a site outside Limio, and custom chat surfaces that adopt the agent's theme (see the [SDK reference](/ai/limio-agents/sdk-reference.md#chattheme)). The look stays the same across surfaces. As with the rest of an agent, nothing changes for visitors until you publish. ## Colours Each colour has a picker, and a **Clear** button that returns it to the default. Colours are grouped by the part of the chat they affect. ### Bubbles | Colour | What it colours | | ------------ | ----------------------------------------------------------------------------------------------- | | Accent | The brand colour: the visitor's message bubbles, the launcher, and buttons. Set this one first. | | User bubble | The visitor's bubbles only, when you want them to differ from the accent. | | Agent bubble | The background of the agent's messages. | Accent is the broad brand colour. Set it on its own and the visitor bubble, launcher and buttons all follow it. Set a finer colour only when you want that part to differ. ### Header & launcher | Colour | What it colours | | -------- | --------------------------------------------------------------------- | | Header | The bar at the top of the chat. Its text stays readable for you. | | Launcher | The floating chat button, when you want it to differ from the accent. | ### Surface | Colour | What it colours | | ---------- | ---------------------------------- | | Background | The chat panel background. | | Text | The body text. | | Border | The panel and message-box borders. | The text on each coloured bubble is picked for you, so bubble text stays readable whatever colour you choose. The one thing to check yourself is the panel **Background**: if you darken it, set **Text** to a light colour so messages stay legible. The preview shows the result straight away. ## Bubble style The **Bubble style** dropdown changes the shape of the message bubbles. | Style | Look | | -------- | ------------------------------------------------------------------------------------------------ | | Rounded | The default: fully rounded, filled bubbles. | | Tailed | A small speech tail on the corner nearest each speaker, like a messaging app. | | Flat | Squared-off corners. | | Outlined | The agent's bubbles become an outline instead of a fill; the visitor's stay filled. | | Shadowed | A soft border and drop shadow, so bubbles lift off the background. | | Bordered | A thin border on every bubble, without the shadow. | | Minimal | No bubble fill, so messages read as a plain transcript, the visitor's turn in the accent colour. | | Gradient | A subtle gradient of each bubble's colour. | ## Launcher branding Three fields brand the chat's entry point, the part of the chat a visitor sees before they open it. | Field | What it does | | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Launcher icon | Your logo in the floating launcher circle, beside the chat title once the chat is open, and in the inline chat panel's header. Set it by uploading an image; Remove clears it. If the image fails to load, the chat falls back to the standard icon. | | Launcher label | A short call-to-action, such as "Ask Limio". A few seconds after the page loads, the launcher slides the label out into a pill, holds it briefly, and collapses back. It runs once per page load, and visitors who prefer reduced motion see a static launcher. | | Popup message | Dedicated text for the greeting popup bubble, such as marketing copy. Shown only while the greeting popup is enabled; leave it blank and the popup shows the greeting. Either way, opening the chat still starts the conversation with the greeting. | ## Live preview The Presentation tab shows a live preview on the right, in a mock browser window, so you see the theme in context while you edit. It updates as you type: change a colour or the bubble style and the preview follows, along with the title, greeting, pointers, placeholder and footer. Minimise the preview from its header to see the closed state: the launcher with your logo and label, and the greeting popup teaser when you have that turned on. The label shows fully expanded in the preview; visitors see it slide out and collapse. Click the launcher to reopen it. The **Try it** button at the top of the page swaps the preview for a live test, where you can hold a real conversation with the draft agent. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.limio.com/ai/limio-agents/theming.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.