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

# Add a Webchat Widget to Your Website with ChatbotX

> Create a ChatbotX Webchat widget, set authorized domains, customize appearance, configure conversation starters, copy the embed code, and test it live.

Webchat lets you place a fully customizable chat widget directly on your website. In ChatbotX, you can create a Webchat, choose a Welcome Flow, add authorized domains, configure conversation starters, adjust the widget design, and copy the embed code to install it on your site — all without any external API credentials.

## Prerequisites

Before you begin, make sure you have:

* A ChatbotX installation
* A website where you can paste the embed code

<Note>
  Unlike Facebook or Zalo, Webchat does not require any credential configuration in the Super Admin panel. You can create and configure a widget directly from the channel settings.
</Note>

***

## Step 1: Create a Webchat

You can create a Webchat in either of these two ways:

### Method 1 — From the Analytics / Create Inbox flow

<Steps>
  <Step title="Open Analytics">
    From the left menu, choose **Analytics**.
  </Step>

  <Step title="Start the inbox creation flow">
    Click **Create Inbox** to begin adding a new channel.
  </Step>

  <Step title="Choose Webchat">
    Select **Webchat** from the channel list.
  </Step>

  <Step title="Continue">
    Click **Continue** to open the Webchat creation screen.
  </Step>

  <Step title="Name and create the Webchat">
    Enter the Webchat name, then click **Create Webchat**.
  </Step>
</Steps>

### Method 2 — From the Channels management area

<Steps>
  <Step title="Open Settings">
    From the left menu, choose **Settings**.
  </Step>

  <Step title="Open the Channels tab">
    Select **Channels** to view the list of supported channels.
  </Step>

  <Step title="Find Webchat">
    Find **Webchat** in the channel list and click **Manage**.
  </Step>

  <Step title="Create a new Webchat">
    Click **Add Webchat**.
  </Step>
</Steps>

***

## Step 2: Configure the Webchat

After naming your Webchat, configure the settings below before clicking **Create Webchat**.

### Basic Settings

| Field            | Required | Description                                                                                                         |
| ---------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
| **Name**         | Yes      | Internal name to distinguish this widget if you run multiple sites or widget versions                               |
| **Welcome Flow** | No       | A Flow that runs automatically when a visitor opens the widget. Leave empty if you don't need an automatic greeting |

### Engagement Features

| Feature                   | Description                                                                                                                                                                         |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Authorized Domains**    | Domains or subdomains allowed to load the widget. Click **Add Authorized Domain** to add one. The embed code only works on approved domains                                         |
| **Conversation Starters** | Quick-reply prompts that help visitors start a conversation, for example, *Pricing*, *Book a consultation*, or *Ask about a product*. Click **Add Conversation Starter** to add one |
| **Persistent Menus**      | Menu items that stay visible throughout the conversation. Useful when you want visitors to always see their main options. Click **Add Persistent Menu** to add one                  |

### Appearance

| Setting                | Description                                                                                                                      |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| **Brand Color**        | Main color of the widget. Pick from the color picker or enter a hex code (for example, `#007BFF`)                                |
| **Show Header**        | Toggle the widget header on or off                                                                                               |
| **Show Personal Logo** | Toggle a custom logo in the widget on or off                                                                                     |
| **Show Message Input** | Toggle the text input box on or off. When disabled, visitors can only interact through Conversation Starters or Persistent Menus |
| **Custom CSS**         | Optional. Add your own CSS to match the widget to your website's design                                                          |

For example, to change the page background color:

```css theme={null}
body { background-color: #000; }
```

After filling in the required fields, click **Create Webchat** to create the new channel.

***

## Step 3: Get the Embed Code

After the Webchat is created, go to **Channels → Webchat**.

<Steps>
  <Step title="Open the Embed Code window">
    For each Webchat row in the list, click the **embed code icon** to open the **Embed Code** window.
  </Step>

  <Step title="Copy the embed code">
    Copy the code from the **Embed Code** field and paste it into your website's HTML — typically just before the closing `</body>` tag.
  </Step>
</Steps>

<Warning>
  The embed code only works on domains listed under **Authorized Domains**. If the Webchat widget does not appear after embedding, check your Authorized Domains configuration first.
</Warning>

***

## Step 4: Test the Webchat

From the **Channels → Webchat** list, click **Test Now** to open a live preview of the widget. Use this to confirm:

* That the Welcome Flow runs as expected when the widget opens
* That visitors can see Conversation Starters, Persistent Menus, or the message input based on the options you enabled

<Tip>
  If you need to make changes after creation — such as updating the Welcome Flow or adjusting the brand color — go to **Settings → Channels → Webchat**, find your widget in the list, and click the settings icon to edit it.
</Tip>