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

# Widget Appearance

> Customize the storefront chat widget button, modal, and greeting message to match your brand.

The chat widget's appearance is fully configurable from the Galantis dashboard. Every visual element — button position, color, font, label text, and the greeting shown to customers — is controlled through **Inbox → Widget Settings** and applied automatically to your storefront when saved.

## What these settings control

* Button position and type
* Button colors, font, and CTA text
* Greeting message shown before the customer sends their first message
* Display rules for which pages show the widget

## How to access

<Steps>
  <Step title="Open the Galantis dashboard">
    Go to **Inbox → Widget Settings**.
  </Step>

  <Step title="Adjust the desired settings">
    Configure the appearance options described below.
  </Step>

  <Step title="Save">
    Changes are applied to your storefront immediately after saving.
  </Step>
</Steps>

## Settings

<Tabs>
  <Tab title="Button">
    **Button position**: Controls where the chat button appears on the page.

    * **Right** — Bottom-right corner. Default and recommended for most themes.
    * **Left** — Bottom-left corner. Use when right-side elements conflict with the button.
    * **Custom** — Precise placement via CSS offset. Use when neither default position fits your layout.

    ***

    **Button type**: Determines the visual style of the button.

    * **Pre-designed** — Uses Galantis's built-in button styles. Quickest to set up and optimized for visibility.
    * **Custom** — Fully custom button design. Recommended for stores with strict brand guidelines.

    ***

    **Button background color**: Sets the fill color of the chat button. Enter a hex value to match your brand color.

    ***

    **Button font**: Sets the typeface used for the button label. Enter a custom font family name. Ensure the font is loaded by your Shopify theme — the widget inherits fonts available on the page.

    ***

    **Button text**: The CTA label displayed on or beside the button. Keep this short and action-oriented. Common values: `Chat with us`, `Need help?`, `Talk to us`.

    <Tip>
      Short, direct labels perform better than long phrases. The button is a small element — labels beyond 20 characters are likely to be truncated on mobile.
    </Tip>
  </Tab>

  <Tab title="Greeting">
    **Greeting message**: The opening message shown to the customer inside the chat widget before they send their first message. This is not a WhatsApp message — it is displayed within the widget UI as a prompt to encourage the customer to start a conversation.

    Use the greeting to set expectations: let the customer know who they are messaging and roughly when to expect a reply.

    Example values:

    * `Hi! 👋 Chat with us on WhatsApp — we usually reply within a few minutes.`
    * `Have a question? We're here to help.`

    <Note>
      The greeting message is not sent as a WhatsApp message and does not consume a conversation credit. It is purely a UI element within the widget.
    </Note>
  </Tab>

  <Tab title="Display Rules">
    **Display rules**: Controls which pages on your storefront show the chat widget. By default, the widget appears on all pages.

    Configure display rules to show or hide the widget on specific pages — for example, hiding it on the checkout page to avoid distraction during purchase, or showing it only on product pages where pre-purchase questions are most likely.
  </Tab>
</Tabs>

## Best practices

* **Match your brand color exactly.** The chat button is a persistent element on every page. A color that clashes with your theme will feel inconsistent and may reduce click rates.
* **Test on mobile.** Button position and label length behave differently on small screens. Verify your configuration on a real mobile device, not just a desktop browser resize.
* **Keep greeting messages concise.** One or two sentences is sufficient. The goal is to invite the customer to write — not to front-load information before they have asked a question.
* **Use custom position with care.** CSS offset values interact with your theme's layout and may conflict with other fixed elements. Test after any theme update that changes footer or fixed-bar positioning.
* **Align button font with your theme.** If your theme uses a custom font, enter the same font family name in the button font setting to ensure typographic consistency.

## Related guides

* [Storefront Widget](./storefront-widget) — Installation and verification steps
* [Conversation Lifecycle](./conversation-lifecycle) — What happens after a customer sends their first message