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

# HelpAlive widget appearance: accent color and launcher

> Style the HelpAlive widget your users see: the accent color, light or dark, and where the launcher sits, with a live preview.

**Appearance** is the page in the HelpAlive dashboard where you style the widget your users see in your app. You pick one accent color and HelpAlive applies it across the widget. The preview on the right shows the real widget as you change it.

Changes save to your draft. Your users see them after you press **Publish**. See [Publishing](/dashboard/publishing).

## Appearance at a glance

* You pick one accent color, and HelpAlive applies it across the widget.
* You choose **Light** or **Dark** for the widget, and the corner and spacing of the launcher.
* The defaults are light, bottom right, 24 pixels from each edge.
* The preview on the right shows the real widget as you change it.
* Changes save to your draft. Your users see them after you press **Publish**.

## Appearance settings

### Color Scheme

Choose **Light** or **Dark** for the widget.

### Accent color

* **Brand hex**: type your brand color as a hex value, or click the swatch to choose one. It is applied to the user's chat bubble, the send action, the **Next** button and the recap markers.
* **Quick palette**: common brand colors, applied with one click.
* **Dark-mode variant**: marked **Derived**, which means that it is worked out for you from your accent, so it reads at the same strength on dark surfaces.

### Launcher

* **Side**: **Bottom left** or **Bottom right**, the corner the launcher sits in.
* **Side spacing** refers to the distance from the side edge.
* **Bottom spacing** refers to the distance from the bottom edge.

## How to change the appearance

<Steps>
  <Step title="Make your changes">
    Change any setting. A bar appears at the bottom: **Unsaved appearance changes**.
  </Step>

  <Step title="Check the preview">
    Use **Chat** and **Assist** above the preview to see each state of the widget. Switch the example app between light and dark to see it on both.
  </Step>

  <Step title="Save">
    Press **Save changes**. **Cancel** throws your unsaved changes away. **Reset** puts every setting back to our defaults, which you then save.
  </Step>

  <Step title="Publish">
    Press **Publish** in the bar at the top of the dashboard, then **Publish now**.
  </Step>
</Steps>

## What the preview shows

**Chat** and **Assist** above the preview switch between the widget's states: closed, its home screen, a conversation and past chats, and each part of an assist.

## Check it works

After you publish, your app's widget picks up the change within a minute or a few page loads. The launcher sits in the corner you chose, in your accent color.

## Troubleshooting

* **Your app still shows the old style.** This is because appearance waits for **Publish**. After publishing, wait a minute and load a few pages in your app.
* **The launcher covers a control in your app.** Raise **Side spacing** or **Bottom spacing**, or move it to the other corner.

## Next

<CardGroup cols={3}>
  <Card title="Publishing" icon="upload" href="/dashboard/publishing">
    Take your changes live.
  </Card>

  <Card title="Controls" icon="sliders" href="/dashboard/controls">
    Who gets the agent, and what it does.
  </Card>

  <Card title="Assists" icon="route" href="/product/assists">
    What your users see during a walkthrough.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.