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

# Widget Setup

> How to add your chat agent widget to your website using code snippets, WordPress, or website builders

Once you've configured your chat agent, the next step is to set up the widget on your website. This guide walks you through the process of getting your widget code and adding it to various platforms.

## Get Your Widget Code

Click on the **Integration** tab in your Chat Settings to get the code you need:

### Website Widget Code

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

<Steps>
  <Step title="Copy the widget code">
    You'll see a code box with the widget script. Click the **Copy** button to copy the code 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 widget 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 widget 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 widget 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 Your Chat Agent Widget

After you've added the widget 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 agent">
    Click on the chat agent button. You should see the welcome message. Try asking a question. Check if the chat agent responds appropriately.
  </Step>

  <Step title="Test lead capture (if enabled)">
    Start a conversation. Answer the lead capture questions. Verify that the thank you message appears.
  </Step>

  <Step title="Test quick questions (if added)">
    Click on one of the quick question buttons. Verify that the chat agent responds correctly.
  </Step>
</Steps>

## 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 Code Not Copying">
    **What to do:**

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