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

# Widget builder

> Everything a visitor sees before they type, with a live preview of each change.

The **Widget Builder** tab on a web chat inbox. Every option here changes what a visitor sees, and the panel beside it previews the change immediately — so set things here rather than guessing and reloading your own site.

The preview has two views, **Preview** and **Script**, and two screens, **Default** and **Chat**. Check both screens: most of these settings only appear on one of them.

## Identity

| Field | Placeholder / default | Where it shows |
| - | - | - |
| **Website Avatar** | — | Beside your replies in the thread |
| **Website Name** | *"Enter your website name (eg: Acme Inc)"* | The widget header |
| **Welcome Heading** | *"Hi there!"* | Default screen, largest text |
| **Welcome Tagline** | *"We make it simple to connect with us. Ask us anything, or share your feedback."* | Default screen, under the heading |

<Warning>
  **Both defaults ship as placeholder copy and both are visible to every customer.** *"Hi there!"*
  and the tagline beneath it are the two most-read strings in your widget. Leaving them is the
  single most common way a widget looks unconfigured.
</Warning>

Write the heading as a greeting in your own voice and the tagline as an invitation to be specific. *"What can we help with?"* over *"Hi there!"* — a question gets a useful first message, a greeting gets *"hi"* back.

## Appearance

<AccordionGroup>
  <Accordion title="Widget Color" icon="palette">
    Drives the launcher and the customer's own message bubbles.

    Use the colour your site already uses for primary actions. The widget should read as part of
    the page, not as a third-party component bolted to the corner — and your logo colour is often
    the wrong choice for that.
  </Accordion>

  <Accordion title="Widget Bubble Position" icon="move">
    **Left** or **Right**.

    Right is conventional and where people look. Move it left when your own UI already owns the
    bottom-right — a cart drawer, a cookie bar, a back-to-top control. Two things fighting for that
    corner on mobile is the usual cause of a widget nobody can open.
  </Accordion>

  <Accordion title="Widget Bubble Type" icon="circle">
    **Standard** — the icon alone.
    **Expanded Bubble** — the icon plus a text label.

    Expanded is more noticeable and takes more room. On a content-heavy page where support is the
    point, expanded earns its space. On a checkout, standard stays out of the way.
  </Accordion>

  <Accordion title="Widget Bubble Launcher Title" icon="type">
    The label on an expanded bubble. Default: *"Chat with us"*.

    Only shows on **Expanded Bubble**. Say what the visitor gets rather than what the button does:
    *"Track my order"* on an order-status page beats *"Chat with us"* everywhere.
  </Accordion>
</AccordionGroup>

## Reply time

Three options, and only three:

| Option | What the customer reads |
| - | - |
| **In a few minutes** | *"Typically replies in a few minutes"* |
| **In a few hours** | *"Typically replies in a few hours"* |
| **In a day** | *"Typically replies in a day"* |

<Warning>
  **This is a displayed promise, not a measured one.** Nothing enforces it and nothing compares it
  to your real response time. Set it to what you can honour on a bad Monday, not a quiet Wednesday
  — an unmet "in a few minutes" costs more goodwill than an honest "in a few hours" ever saves.
</Warning>

If you want a target that is actually measured, escalated on, and reportable, that is an [SLA policy](/automation/sla), which is a different mechanism entirely.

## What the visitor sees on each screen

Useful when you are checking the preview and wondering where a setting went.

**Default screen** — Website Avatar, Website Name, Welcome Heading, Welcome Tagline, reply time, availability (*"We are Online"* / *"We are away at the moment"*), and the **Start Conversation** button.

**Chat screen** — Website Avatar and Name in the header, the thread, and the composer with its *"Type your message"* placeholder.

The availability line comes from [business hours](/channels/business-hours) when they are configured, and from whether agents are actually online when they are not.

## Saving and shipping

**Update Widget Settings** saves, but not everything on this page reaches a widget that is already
live on a site the same way — some of it is baked into the script tag itself, and needs a fresh copy.

| Fetched at runtime — live on next page load | Baked into the script tag — needs re-pasting |
| - | - |
| Widget Color | Widget Bubble Position |
| Website Name | Widget Bubble Type |
| Welcome Heading | Widget Bubble Launcher Title |
| Welcome Tagline | |
| Reply time | |
| Website Avatar | |

<Warning>
  **Position, bubble type and launcher title do not update on their own.** A widget already running
  on your site keeps whatever the script tag it loaded was carrying. To change one of these three,
  copy the [snippet](/channels/web-chat#install) again after saving and replace the one on your
  site — the same step as installing it the first time.
</Warning>

<Tip>
  **Everything in the left-hand column above needs nothing from you.** The script tag carries only
  your website token and base URL; colour, name, welcome copy, reply time and avatar are all fetched
  from there. Adjust them on a live site without involving whoever owns the deploy.
</Tip>

## Next

<CardGroup cols={2}>
  <Card title="Pre-chat form" icon="clipboard-list" href="/channels/web-chat/pre-chat-form">
    What to ask before the conversation opens.
  </Card>

  <Card title="Web chat" icon="message-circle" href="/channels/web-chat">
    Installing the widget, and identity verification.
  </Card>

  <Card title="Inbox settings" icon="sliders-horizontal" href="/channels/inbox-settings">
    The rest of the tabs.
  </Card>

  <Card title="Business hours" icon="clock" href="/channels/business-hours">
    What drives the availability line.
  </Card>
</CardGroup>


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