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

# Web Chat

> Create the Web Chat channel, configure the widget experience, and add it to your website

Web Chat is the website widget. Create it under **Deploy → Channels**, configure **Chat Settings** and **Appearance**, then copy the embed code from **Deploy Script**.

Agent prompts, tools, and routing live on the linked [chat workflow](/docs/build/workflows) under **Build**. Project-wide API keys, rate limits, and handover agents are under [Admin → Settings](/docs/admin/settings).

## Connect

<Steps>
  <Step title="Open Channels">
    In the project sidebar, select **Deploy → Channels**.
  </Step>

  <Step title="Create Web Chat">
    Select **Web Chat**. Enter a **Channel Name**. The identifier is set to `website`. Create the channel.
  </Step>

  <Step title="Open channel settings">
    Open the new channel. Use the tabs below to link a workflow, set messages, brand the widget, then copy embed code from **Deploy Script**.
  </Step>
</Steps>

<Check>
  The Channels list shows Web Chat as connected. You can copy the website integration code from **Deploy Script**.
</Check>

## Configure Chat Settings

Open the channel and select the **Chat Settings** tab.

### Chat workflow

Required. Prompts, tools, and routing come from an **active** chat workflow.

Select a workflow from the dropdown. If none appear, create and activate a Chat Flow under [Build → Workflows](/docs/build/workflows), then return here.

### Welcome message

The first message visitors see when they open the chat widget. Keep it short and friendly.

Example: `Hi, I'm the AI Agent. How can I help you today?`

### Hello message

Greeting shown when a visitor starts a fresh conversation session.

Example: `Hello! How can I help you today?`

### Quick questions

Pre-defined questions shown as clickable chips at the start of new sessions. Click **Add**, type a question (for example, `What are your pricing plans?`), and repeat for common asks.

<Tip>
  Use questions your customers ask most often.
</Tip>

<Check>
  Click **Save** after you finish Chat Settings.
</Check>

## Customize Appearance

Open the **Appearance** tab to brand the widget.

### Agent name

The name shown in the chat interface. Examples: `Support Bot`, `Sarah`, `AI Assistant`.

### Bot icon

Upload an image that represents your agent (max 50KB). It appears in the widget. Optionally use the same icon for the launcher button if that option is available.

### Primary color

Theme color for buttons and highlights. Pick a color or enter a hex code (for example, `#204677`) that matches your site.

### Widget position

Where the floating button appears: **Left** or **Right**. Most sites use the right side.

<Check>
  Click **Save** after you finish Appearance.
</Check>

## Get your website integration code

Click on the **Deploy Script** tab in your channel settings to get the code you need:

### Website Integration Code

A small piece of code that adds your chat agent widget to your website.

<Steps>
  <Step title="Copy the website integration code">
    You'll see **Website Integration Code**. Click **Copy** to copy the snippet to your clipboard. The code will look something like this:

    ```html theme={null}
    <script id="widget" data-project="your-project-id" src="https://widget.botcadence.com/widget.min.js"></script>
    ```
  </Step>
</Steps>

### Add It to Your Website

<Tabs>
  <Tab title="HTML Websites">
    <Steps>
      <Step title="Open your HTML file">
        Open your website's HTML file in a text editor.
      </Step>

      <Step title="Find the body tag">
        Find the `</body>` tag (usually near the end of the file).
      </Step>

      <Step title="Paste the code">
        Paste the website integration code just before the `</body>` tag.
      </Step>

      <Step title="Save and upload">
        Save the file and upload the updated file to your web server.
      </Step>
    </Steps>
  </Tab>

  <Tab title="WordPress">
    <Steps>
      <Step title="Access WordPress dashboard">
        Go to your WordPress dashboard.
      </Step>

      <Step title="Navigate to theme editor">
        Navigate to **Appearance** → **Theme Editor** (or use a plugin like "Insert Headers and Footers").
      </Step>

      <Step title="Find footer file">
        Find the footer.php file or use the plugin's footer section.
      </Step>

      <Step title="Paste the code">
        Paste the website integration code before the closing `</body>` tag.
      </Step>

      <Step title="Save">
        Click **Save**.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Website Builders">
    <Steps>
      <Step title="Access settings">
        Go to your website's settings or code injection section.
      </Step>

      <Step title="Find code injection">
        Look for "Footer Code" or "Before `</body>` tag" option.
      </Step>

      <Step title="Paste the code">
        Paste the website integration code there.
      </Step>

      <Step title="Save">
        Save your changes.
      </Step>
    </Steps>
  </Tab>
</Tabs>

### Alternative: Iframe Integration

If you prefer, you can also use an iframe code. Click **Copy** next to the iframe code. This creates a standalone chat window you can embed anywhere. Useful if you want more control over the chat window size and placement.

<Check>
  After adding the code to your website, your chat agent widget will appear as a floating button on your site!
</Check>

## Test the widget

After you've added the website integration code to your website:

<Steps>
  <Step title="Visit your website">
    Open your website in a web browser. Look for the chat agent button in the bottom corner (left or right, depending on your setting).
  </Step>

  <Step title="Test the chat">
    Click the button. You should see the welcome message. Ask a question and confirm the agent replies using your linked workflow.
  </Step>

  <Step title="Test quick questions (if added)">
    Click one of the quick question chips and verify the conversation starts as expected.
  </Step>
</Steps>

<Tip>
  Before go-live, also exercise the workflow in [Build → Playground](/docs/build/playground).
</Tip>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Chat agent widget doesn't appear on website">
    **Possible reasons and solutions:**

    * **Code not added correctly:** Make sure the code is placed just before the `</body>` tag
    * **Website caching:** Clear your browser cache or wait a few minutes for changes to take effect
    * **Code placement:** The code must be in the HTML, not in a CSS or JavaScript file
    * **Check browser console:** Open your browser's developer tools (F12) and check for any error messages
  </Accordion>

  <Accordion title="Widget appears but doesn't respond">
    **What to check:**

    * An active chat workflow is selected under **Chat Settings**
    * You clicked **Save** after linking the workflow
    * The workflow is published/active under [Build → Workflows](/docs/build/workflows)
  </Accordion>

  <Accordion title="Website integration code not copying">
    **What to do:**

    * Try refreshing the page
    * Make sure you have permission to view the **Deploy Script** tab
    * Try using a different web browser
    * Check if your browser allows clipboard access
  </Accordion>
</AccordionGroup>

## What's next?

* Monitor chats in [Operate → Conversations](/docs/operate/conversations)
* Improve prompts and tools in [Build → Workflows](/docs/build/workflows)
* Add documents in [Build → Knowledge Base](/docs/build/knowledge-base)
* Review metrics in [Insights](/docs/insights)