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

# Appearance and Personalization

Livechat is Solvea’s built-in real-time chat widget that can be embedded anywhere on your website or app.

In this module, you can customize the appearance and branding of Livechat to match your brand identity.

<Frame>
  <img src="https://mintcdn.com/solvea-a5b10e8e/O-8YpAakAl1Rye6Z/images/image-58.png?fit=max&auto=format&n=O-8YpAakAl1Rye6Z&q=85&s=0903e608214bac53802ac06337963ca1" alt="Image" width="2938" height="1546" data-path="images/image-58.png" />
</Frame>

## Set Names

Configure how your Livechat agent is presented to users.

* **AI Chatbot Name**\
  The name of the AI agent shown in Livechat conversations.
* **Signature**\
  A short greeting or slogan displayed under the Name.
* **Agent Name**\
  The agent name configured in the Agent module, typically your brand name.

<Frame>
  <img src="https://mintcdn.com/solvea-a5b10e8e/SfdSl0uoNfGcFhH1/images/image-84.png?fit=max&auto=format&n=SfdSl0uoNfGcFhH1&q=85&s=117d991039cda6bd998e18bde48308c7" alt="Image" width="2938" height="1554" data-path="images/image-84.png" />
</Frame>

## Add Shortcuts

**Shortcuts** are quick action buttons displayed above the input field, with two options available:

* **Transfer to agent**

  Clicking this button allows the user to directly trigger a handoff to a human agent for support.

  Configure whether to display this button.

  <Frame>
    <img src="https://mintcdn.com/solvea-a5b10e8e/SfdSl0uoNfGcFhH1/images/image-85.png?fit=max&auto=format&n=SfdSl0uoNfGcFhH1&q=85&s=4eb9c2276f707ecd76b4fcf29474c09e" alt="Image" width="2938" height="768" data-path="images/image-85.png" />
  </Frame>
* **Feedback**

  Clicking this button enables the user to rate the conversation and leave comments.

  Configure whether to display this button.

  <Frame>
    <img src="https://mintcdn.com/solvea-a5b10e8e/SfdSl0uoNfGcFhH1/images/image-86.png?fit=max&auto=format&n=SfdSl0uoNfGcFhH1&q=85&s=e4a599c0b1ffa4502f5b9aafd6b5c13e" alt="Image" width="2938" height="772" data-path="images/image-86.png" />
  </Frame>

## Customize Appearance

Control the visual style and layout of the Livechat widget.

<Frame>
  <img src="https://mintcdn.com/solvea-a5b10e8e/SfdSl0uoNfGcFhH1/images/image-87.png?fit=max&auto=format&n=SfdSl0uoNfGcFhH1&q=85&s=a351090b633471ea680f64cf6f7fd0c2" alt="Image" width="3834" height="1816" data-path="images/image-87.png" />
</Frame>

* **Colors**

  <Columns cols={2}>
    <Card title="Primary Color">
      Affects the top gradient background, chat bubbles, send button, selected states, and button icons.

      <img src="https://mintcdn.com/solvea-a5b10e8e/SfdSl0uoNfGcFhH1/livechatthemecolor.jpg?fit=max&auto=format&n=SfdSl0uoNfGcFhH1&q=85&s=63d902babde067beaa8c23badb54ad86" alt="Livechatthemecolor" width="744" height="1366" data-path="livechatthemecolor.jpg" />
    </Card>

    <Card title="Text Color">
      Affects the brand name, agent nickname, user messages

      <img src="https://mintcdn.com/solvea-a5b10e8e/SfdSl0uoNfGcFhH1/images/image-89.png?fit=max&auto=format&n=SfdSl0uoNfGcFhH1&q=85&s=a22cfe397b75753732b53c1830e846c0" alt="Image" width="744" height="1368" data-path="images/image-89.png" />
    </Card>
  </Columns>
* **Livechat Icon**\
  The icon displayed at the bottom-right corner of the page when Livechat is minimized.
  * Choose from present icons
  * Or upload a custom image
* **Theme Style**\
  Solvea provides **10 pre-built themes**. Click **“More”** to view all available styles.

  <Frame>
    <img src="https://mintcdn.com/solvea-a5b10e8e/SfdSl0uoNfGcFhH1/images/image-90.png?fit=max&auto=format&n=SfdSl0uoNfGcFhH1&q=85&s=2f4dea44c3fc0cd1786b99fc626c9738" alt="Image" width="2938" height="1548" data-path="images/image-90.png" />
  </Frame>
* **LiveChat Dimensions**\
  Choose from **four display sizes** for the chat window.\
  Default: Medium.
* **Desktop Widget Placement**\
  Set the distance from the right and bottom edges of the screen.\
  Default spacing: 20 px.

  <Frame>
    <img src="https://mintcdn.com/solvea-a5b10e8e/SfdSl0uoNfGcFhH1/images/image-91.png?fit=max&auto=format&n=SfdSl0uoNfGcFhH1&q=85&s=0d9b322181fdf5e34abbd67ebd32947f" alt="Image" width="2938" height="724" data-path="images/image-91.png" />
  </Frame>