> For the complete documentation index, see [llms.txt](https://helpdocumentation.gitbook.io/user-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helpdocumentation.gitbook.io/user-documentation/web-chat-widget/chat-widget-analytics-and-customization.md).

# Chat Widget Analytics & Customization

This guide explains how to view chat widget analytics and customize the widget’s appearance, layout, launcher, content, and other settings.

### Open the Chat Widget

1. Go to the **Chat Widget** section.
2. Select the widget you want to manage.
3. Click on the **Widget Name** to open its configuration.

### View Widget Analytics

1. Open the **Analytics** section.
2. Review the available insights, including:
   * Conversation paths
   * Daily engagement
   * Average first response time
   * Last activity sessions
   * All conversations
   * Recent conversations
3. Use the selected date range to review engagement for a specific period.

### Customize Widget Identity

1. Go to the **Customization** section.
2. Open **Identity**.
3. Update the following details as required:
   * **Title**
   * **Subtitle**
   * **Agent Name**
   * **Avatar**
4. Select an existing image from the Media Library or upload a new one.
5. Adjust the **Avatar Radius** to control the image shape.
6. Check the live preview to see the changes.

### Customize Appearance

1. Open the **Appearance** section.
2. Configure the **Primary Color** and **Font Family**.
3. Customize colors for:
   * User bubble
   * User bubble text
   * Agent bubble
   * Agent bubble text
   * Action button
   * Action button text
4. Configure the **Conversation Background** using a color or image.
5. Adjust the background image opacity if required.
6. Customize the **Neutral Palette**, including surface, text, border, muted text, and other supporting colors.

### Configure Widget Geometry

1. Open the **Geometry** section.
2. Configure:
   * Window width
   * Window height
   * Border radius
   * Shadow
   * Offset
3. Use the live preview to check the widget dimensions and appearance.

### Configure the Launcher

The launcher is the button users click to open the chat widget.

1. Open the **Launcher** section.
2. Select one of the available launcher types:
   * **Icon**
   * **Label**
   * **Rich**
3. Configure the launcher size, background, logo, logo size, and logo radius as required.

#### For Label Launcher

1. Enter the label text.
2. Configure the launcher logo and appearance.
3. Check the live preview.

#### For Rich Launcher

1. Configure the launcher heading.
2. Enable or disable the online/offline status.
3. Add or update the launcher avatar.
4. Configure **Launcher Buttons**.
5. Add button labels and define their actions, such as opening a section or URL.
6. Add **Ice Breakers** to display suggested prompts.
7. Configure the required delay for ice breakers.

### Configure Widget Layout

1. Open the **Layout** section.
2. Select the widget position:
   * Bottom Left
   * Bottom Right
3. Choose which sections should be available to users.
4. Select the **Default Section** that opens when the widget is launched.
5. Configure the navigation position.
6. Select the message header layout.
7. Enable **Expanded View** if required and define the expanded width.
8. Configure whether the widget should be **open or closed by default** when a visitor opens the website.

### Customize Home Section

1. Open the **Home** section.
2. Update the **Tagline** displayed on the home screen.
3. Customize the **Home Header** according to your requirement.
4. Check the live preview to verify the changes.

### Customize Conversation

1. Open the **Conversation** section.
2. Configure the **Welcome Message** shown when a user starts a conversation.
3. Enter a message suitable for your business.

### Configure Message Composer

1. Open the **Composer** section.
2. Customize the placeholder text displayed in the message box.
3. Select the position of composer actions.
4. Enable or disable available options such as:
   * Emojis
   * Attachments
   * Location sharing
   * Audio sharing
5. Configure applicable limits such as attachment size, recording size, or recording duration.

### Enable Commerce

1. Open the **Commerce** section.
2. Enable the commerce option if you want to provide shopping functionality inside the chat widget.
3. Configure the available commerce settings as required.

### Configure Attribution

1. Open the **Attribution** section.
2. Customize the **Powered By** text.
3. Add your brand or company name.
4. Add a URL if required.
5. Select the attribution position.
6. Choose between **Inline** or **Floating** placement.
7. Configure the alignment as required.

### Preview the Changes

The **Live Preview** displayed on the right side allows you to see your changes instantly.

Review the widget in the preview after making changes to ensure the appearance, layout, content, and behavior are as expected.

{% embed url="<https://www.youtube.com/watch?v=Y6nNR0c4jOg>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://helpdocumentation.gitbook.io/user-documentation/web-chat-widget/chat-widget-analytics-and-customization.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.