# Customize the chat widget's appearance and content

URL: https://aihio.ai/en/help/ai-agent/appearance\
Description: Set the widget's identity, colors and welcome messages, then check the result on different screens.

The chat widget's appearance helps customers recognize your service. Its welcome message explains what your AI agent helps with. Changing appearance does not change the agent's data sources or response instructions.

## Before you start

Open the agent editor in Oma Aihio. You need permission to change the agent's settings. Prepare an appropriate image and a short welcome message. Some customizations require a plan or add-on; check any field restrictions before planning your change.

Saved settings can affect a widget already in use. Keep a record of the current values if you may need to restore them.

## Choose the right tab

Select **Appearance** in the agent workspace. Settings are organized into expandable groups; Content and Style are not separate workspace tabs.

| Group               | What it contains                                                           |
| ------------------- | -------------------------------------------------------------------------- |
| **Content**         | Name, images, welcome message, initial messages and conversation starters. |
| **Capabilities**    | Available widget capabilities, such as voice input and branding.           |
| **Style**           | Theme and colors, including the launcher's color.                          |
| **Typography**      | Widget text settings.                                                      |
| **Floating button** | Launcher appearance, positioning and window size.                          |
| **Languages**       | Widget interface languages and language selection.                         |

## Customize and check

1. **Make your service recognizable**

   Open **Appearance → Content** and set the name and image. Choose an
   appropriate theme and colors in **Style**. Check that the text and launcher
   remain distinguishable against your website's background.
2. **Explain what the agent helps with**

   Open **Content**. Write a brief welcome message and add conversation
   starters that the agent has information to answer. Avoid promising actions
   you have not enabled.
3. **Save and try it on your website**

   Select **Save** and wait for confirmation. Reopen the widget on your website
   and check its name, image, welcome content and launcher. Repeat the check on
   a phone.

## Example welcome content

Adapt the text to your actual service. For example, for product guidance:

| Content                      | Editable example                                                                    |
| ---------------------------- | ----------------------------------------------------------------------------------- |
| Welcome message              | Hello! I am the company's AI assistant. I help with product and delivery questions. |
| Conversation starter         | How do I choose the right product?                                                  |
| Another conversation starter | Where can I find your delivery terms?                                               |

Test every starter: the agent needs information relevant to it. Add booking or order processing only when the corresponding action is configured and tested.

> **Tip — Check the launcher against the actual page:**
>
> The launcher can use a different color from the header. Check contrast over
> light and dark areas of your website and make sure it does not cover important
> content. The editor preview does not replace a check on the actual site.

## If you use multiple languages

Choose the language version before editing welcome text or other localized content. Missing translations may use the default-language content. Widget interface language and agent response language are separate settings; see [languages and localization](/en/help/ai-agent/languages).

## If a change does not appear

- Check the save confirmation and confirm that the website embeds the correct agent.
- Refresh the website and reopen the widget.
- If only one language appears unchanged, check that language version and the default language.
- If text is hard to read or an image is cropped poorly, choose a clearer color or image. Restore the previous values and save if needed.

A working preview is only the first check. Other website elements can affect how easily customers find the chat widget.

## Show sources and offer voice input

**Appearance → Content** includes **Show sources**. Enable it, save and test a question whose answer uses a web source. Check the answer's source link and destination. Not all knowledge-base content has a publicly accessible page; a citation alone does not guarantee correctness.

**Appearance → Capabilities** includes voice input. Check availability in the workspace, enable it and save. Test on the actual website with microphone permission, and check the recognized text before sending. If permission is missing or recognition fails, the customer can type their message. Voice input converts speech to text; it does not provide a telephone channel or spoken replies.

## Check the theme and visitor preferences

The **Style** group provides light, dark and automatic color modes. Test automatic mode on the embedding website too: the dashboard's own theme is a separate setting. Check text contrast, keyboard focus, links and forms in both color modes.

New-message sound and language selection in the visitor menu are visitor preferences. Sound also depends on the browser allowing playback; a silent browser does not establish that a message is missing. AI replies appear progressively, and consecutive messages from the same sender can form one bubble group. Check the completed answer rather than treating unfinished text as the result.

The AI label on the first AI reply tells customers that AI is being used. It cannot be removed through appearance settings. On a small screen, also check the launcher, scrolling, message field and completion of any action card. Checking appearance does not replace [testing the agent's replies](/en/help/ai-agent/testing).

## Feature availability

Also check availability and any applicable add-on in your workspace. This table gives minimum tiers for these features; it is not a workspace usage limit or a list of every integration.

| Feature              | Minimum tier                    |
| -------------------- | ------------------------------- |
| White label branding | Enterprise or applicable add-on |
| Show sources         | Starter                         |
| Voice input          | Starter                         |
## Next steps

- [Publish](/en/help/ai-agent/publish) — Publish an AI agent as a chat widget or an embedded conversation.