# Customizing what users see on live chat

### **Live chat settings overview**

On the **Connect channels** page, under **Chat Channels**, locate **Live chat** and click **Edit**.

<div data-with-frame="true"><figure><img src="https://4165927833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWHGGlctFzoGEVhyOAO17%2Fuploads%2FtxBOYTsqIQ45y3rtmIjs%2Fimage.png?alt=media&#x26;token=d3062296-d254-462f-8b22-7e4b0cd4d799" alt=""><figcaption></figcaption></figure></div>

You will be taken to the live chat configuration page. This page is where you control how the widget looks, behaves, and appears to visitors.

The page is divided into the following sections: [**Chat view**](#chat-view),  [**Pre-chat form**](#pre-chat-form), [**Offline view**](#offline-view), [**Suggested questions**](#suggested-questions), and [**Preview**](#preview).

***

#### Chat view

This section controls what visitors see when the chat widget is open.

<div data-with-frame="true"><figure><img src="https://4165927833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWHGGlctFzoGEVhyOAO17%2Fuploads%2FWbFIwR7GJzKM6d76LAx3%2Fimage.png?alt=media&#x26;token=a1675ab4-e86b-432a-8bcb-d04b1834ac77" alt=""><figcaption></figcaption></figure></div>

You can configure:

* **Public name**: The name shown to visitors in the chat
* **Description**: A short subtitle or context displayed below the name
* **Initial greeting**: The first message shown when the chat opens

These settings define how your chat presents itself and sets expectations for the conversation.

***

#### **Customize appearance**

<div data-with-frame="true"><figure><img src="https://4165927833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWHGGlctFzoGEVhyOAO17%2Fuploads%2FsvRPtdqbK6orpcZ0S8uf%2Fimage.png?alt=media&#x26;token=9c4c397b-506e-4bdb-8dfe-3f1253b260b8" alt=""><figcaption></figcaption></figure></div>

In the upper right, click **Customize appearance** to open the appearance settings. From here, you can:

<div data-with-frame="true"><figure><img src="https://4165927833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWHGGlctFzoGEVhyOAO17%2Fuploads%2FkzpBTvii7CB1FcYy3spU%2Fimage.png?alt=media&#x26;token=db9d0567-0f63-49e7-a89f-56defd41eaf2" alt=""><figcaption></figcaption></figure></div>

* Upload or remove a **profile picture**
* Upload a **banner image** (JPG or PNG, under 5 MB)
* Set the **button color** and **text color**
* Choose the **widget position** (left or right)
* Add optional **label text** that appears next to the closed chat icon\
  Click **Save** to apply your changes.

***

#### Pre-chat form&#xD;

The pre-chat form is disabled by default. When enabled, it allows you to collect information from visitors before a conversation starts.

<div data-with-frame="true"><figure><img src="https://4165927833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWHGGlctFzoGEVhyOAO17%2Fuploads%2FYLKKlusxq2k0KSO3K6SH%2Fimage.png?alt=media&#x26;token=8bb2dcbd-3314-4434-ac46-e7a7920b117b" alt=""><figcaption></figcaption></figure></div>

You can:

* Customize the form header text
* Choose which fields to collect:
  * Name
  * Email
  * Phone number

Enabling the pre-chat form helps ensure every conversation includes customer contact details for follow-up. However, requiring information up front may also reduce the number of chats started, as some visitors may prefer to begin a conversation without sharing their details.

***

#### Offline view&#xD;

When no agents are available, the chat automatically switches to Offline View. This allows visitors to leave their information so your team can follow up later.

<div data-with-frame="true"><figure><img src="https://4165927833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWHGGlctFzoGEVhyOAO17%2Fuploads%2FBn7TGmlCmdrG1ZbU7EJf%2Fimage.png?alt=media&#x26;token=fb4608b1-c688-4868-9362-287d46534775" alt=""><figcaption></figcaption></figure></div>

Fields displayed:

* Header – Default: “We’re offline”
* Message – Default: “Please provide your contact information so we can get in touch with you.”

You can customize both the header and message to match your branding or provide additional instructions to visitors.

***

#### Suggested questions

Suggested questions help visitors start a conversation quickly.

<div data-with-frame="true"><figure><img src="https://4165927833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWHGGlctFzoGEVhyOAO17%2Fuploads%2FE4jXPV5pDpJZEcwTAkrg%2Fimage.png?alt=media&#x26;token=8e4543ec-f9f4-4f61-8cb3-423a79350139" alt=""><figcaption></figcaption></figure></div>

In this section, you can:

* Add predefined questions
* Edit existing questions
* Reorder questions by dragging them

These questions appear in the chat widget and act as conversation starters.

***

#### Preview

On the right side of the live chat configuration page, you’ll see the **Preview** panel. This lets you view your changes in real time before publishing.

<div data-with-frame="true"><figure><img src="https://4165927833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWHGGlctFzoGEVhyOAO17%2Fuploads%2FZppYV2Zn02757DPegtGQ%2Fimage.png?alt=media&#x26;token=9d318784-5807-4e77-930e-083c0c94678e" alt=""><figcaption></figcaption></figure></div>

You can switch between three preview modes:

* **Chat view** – See how the main conversation interface will appear to customers.
* **Chat for**m – Preview the pre-chat form that collects visitor information before starting a chat.
* **Offline view** – See what visitors see when no agent is available.

Use the toggle at the bottom of the preview panel to switch between display formats:

<div data-with-frame="true"><figure><img src="https://4165927833-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWHGGlctFzoGEVhyOAO17%2Fuploads%2FkuaYfyBLAbUXfd6lVfW2%2Fimage.png?alt=media&#x26;token=8600043f-cb11-4376-90ca-f02245e91030" alt=""><figcaption></figcaption></figure></div>

* **Full page** – Shows the chat in a larger, full-screen view.
* **Embed** – Shows the chat as a compact widget, as it will appear on your website.

This feature helps ensure your chat looks and functions exactly as intended across different views and situations.
