> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yourhomie.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Appearance

> Style the chat interface and launcher to match your brand, with a live preview as you edit.

Appearance controls how your assistant looks on your store: the colors, header, fonts, and content of the chat window, and the icon, color, position, and hint text of the launcher button. A live preview updates as you edit, so you can see every change before publishing.

## Style the interface

<Steps>
  <Step title="Open Appearance">
    Go to **Assistants** in the [homie platform](https://app.yourhomie.ai), select your assistant, and open **Settings → Style**.
  </Step>

  <Step title="Adjust the interface">
    Set the display name and headline, colors, header image, message placeholder, greeting message, suggested messages, and fonts of the chat window. The preview reflects each change instantly.
  </Step>

  <Step title="Configure the launcher">
    Choose the launcher icon (keep the default or upload your own), and set its color, rounding, size, image padding, screen-edge spacing, position, and hint text.
  </Step>

  <Step title="Check the preview and save">
    Confirm the look in the live preview, then save to publish your changes.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/homieai/m0ZcYuq9OdpATfdE/images/Bildschirmfoto-2026-07-01-um-10.00.58.png?fit=max&auto=format&n=m0ZcYuq9OdpATfdE&q=85&s=b8fb385b931f9d34d5388f0bfc15909a" alt="Bildschirmfoto 2026 07 01 Um 10 00 58" width="2578" height="1608" data-path="images/Bildschirmfoto-2026-07-01-um-10.00.58.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/homieai/m0ZcYuq9OdpATfdE/images/Bildschirmfoto-2026-07-01-um-10.01.46.png?fit=max&auto=format&n=m0ZcYuq9OdpATfdE&q=85&s=f66885bf5c8f0ff69be22675da7e5cac" alt="Bildschirmfoto 2026 07 01 Um 10 01 46" width="2576" height="1478" data-path="images/Bildschirmfoto-2026-07-01-um-10.01.46.png" />
</Frame>

## Interface options

| Option                      | What it controls                                                                    |
| --------------------------- | ----------------------------------------------------------------------------------- |
| **Display name / Headline** | The name and optional custom headline shown in the chat header.                     |
| **Colors**                  | The primary color, plus optional header, background, and user-message colors.       |
| **Header image**            | An optional image shown in the chat header.                                         |
| **Message placeholder**     | The placeholder text in the chat input field.                                       |
| **Greeting message**        | The first message shown when the chat opens.                                        |
| **Suggested messages**      | Sample prompts that help visitors start a conversation, optionally in random order. |
| **Fonts**                   | The primary and secondary fonts.                                                    |
| **Footer**                  | Optional footer content shown in the chat window (e.g. link to privacy policy).     |

## Launcher options

| Option                    | What it controls                                                           |
| ------------------------- | -------------------------------------------------------------------------- |
| **Icon image**            | The launcher icon — keep the default or upload your own image.             |
| **Color**                 | The launcher background color.                                             |
| **Rounding**              | Make the launcher fully rounded, or set individual corner radii.           |
| **Size**                  | The launcher button size.                                                  |
| **Image padding**         | The spacing between the icon image and the button edge.                    |
| **Side & bottom spacing** | The launcher's distance from the edge of the screen, in pixels or percent. |
| **Position**              | Launcher position, left or right.                                          |
| **Hint text**             | An optional label shown when a visitor hovers over the launcher.           |

<Tip>
  Match your accent color and launcher to your storefront so the assistant feels like a native part of your site.
</Tip>

## Next steps

<CardGroup cols={2}>
  <Card title="Control widget behavior" icon="window" href="/en/user-guide/assistants/widget-behavior">
    Set the display mode and the Activation message.
  </Card>

  <Card title="Translate the interface" icon="language" href="/en/user-guide/assistants/translations">
    Localize launcher labels and chat strings.
  </Card>
</CardGroup>