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

# Quickstart

> Use the Webchat embed code to add a bot to your website.

Webchat makes it easy to embed a bot on your website. If you self-host your website, just follow the instructions on this page.

<Note>
  If you use a website-building tool like [WordPress](/webchat/integrations/wordpress), [Wix](/webchat/integrations/wix) or [Webflow](/webchat/integrations/webflow), see the other pages in this section for instructions on how to add your bot.
</Note>

<Info>
  You will need:

  * A [published bot](/get-started/quick-start)
  * Basic familiarity with HTML
</Info>

<Steps titleSize="h2">
  <Step title="Get your embed code">
    To embed a bot on your website, you need the bot's Webchat embed code. You can get the embed code from the Dashboard:

    1. Open your bot's Workspace and select the bot you want to embed.
    2. In the left sidebar, go to **Webchat** > **Deploy Settings**.
    3. Copy the **Embed code**:

    <Frame>
      <img alt="Embed code from Dashboard" className="block dark:hidden" src="https://mintcdn.com/botpress/ZI-0qkWaLdZHgMpF/snippets/webchat/assets/embed-code-dashboard.png?fit=max&auto=format&n=ZI-0qkWaLdZHgMpF&q=85&s=dbacbc9da04036057f8f23086996c1eb" width="1600" height="288" data-path="snippets/webchat/assets/embed-code-dashboard.png" />

      <img alt="Embed code from Dashboard" className="hidden dark:block" src="https://mintcdn.com/botpress/ZI-0qkWaLdZHgMpF/snippets/webchat/assets/embed-code-dashboard-dark.png?fit=max&auto=format&n=ZI-0qkWaLdZHgMpF&q=85&s=c0f14dc386273553dad785d593bf23e7" width="1600" height="288" data-path="snippets/webchat/assets/embed-code-dashboard-dark.png" />
    </Frame>
  </Step>

  <Step title="Add to your website">
    Next, add the Webchat embed code to the `head` section of your website's HTML. For example:

    ```html index.html {4-5} theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
    <!DOCTYPE html>
    <html>
    <head>
      <script src="https://cdn.botpress.cloud/webchat/vX.X/inject.js"></script>
      <script src="https://files.bpcontent.cloud/xxxx/xx/xx/xx/xxxxxxxxxxxxx-xxxxxxxx.js" defer></script>
    </head>
    <body>
      <!-- Website content -->
    </body>
    </html>
    ```
  </Step>

  <Step>
    You're all set! Open your website and start chatting with your bot. It should look something like this:

    <Frame>
      <img alt="Webchat" className="block dark:hidden" src="https://mintcdn.com/botpress/q8S__MXzNBiXVmVj/webchat/get-started/assets/webchat.png?fit=max&auto=format&n=q8S__MXzNBiXVmVj&q=85&s=709eb18ef646933a6c7db2903abdf9fa" width="1440" height="1202" data-path="webchat/get-started/assets/webchat.png" />

      <img alt="Webchat" className="hidden dark:block" src="https://mintcdn.com/botpress/q8S__MXzNBiXVmVj/webchat/get-started/assets/webchat-dark.png?fit=max&auto=format&n=q8S__MXzNBiXVmVj&q=85&s=8ac9a2469a6d207bcb62ec251aa692c8" width="1440" height="1202" data-path="webchat/get-started/assets/webchat-dark.png" />
    </Frame>
  </Step>
</Steps>

<Check>
  Done! Your bot is now live on your website.
</Check>

## Next steps

Now that you've added your bot, try [styling it](./configure-your-webchat) to match the rest of your website's user interface.
