Skip to main content
Once you’ve created and customized your bot, the final step is deploying it on your website. Botric provides an embed code that you add to your site’s HTML to display the chat widget.

​
Getting the Embed Code

1

Open your bot

Go to Engagement > Chat Agent and click on the bot you want to deploy.
2

Navigate to Deploy

Click the Deploy or Embed tab in your bot’s settings.
3

Copy the embed code

Click Copy Code to copy the embed snippet to your clipboard.The embed code looks similar to this:
<!-- Botric Chat Widget -->
<script
  src="https://widget.botric.ai/chat.js"
  data-bot-id="YOUR_BOT_ID"
  async
></script>

​
Installation

Paste the embed code just before the closing </body> tag in your HTML:
<html>
  <head>
    <!-- your head content -->
  </head>
  <body>
    <!-- your page content -->

    <!-- Botric Chat Widget -->
    <script
      src="https://widget.botric.ai/chat.js"
      data-bot-id="YOUR_BOT_ID"
      async
    ></script>
  </body>
</html>

​
Verifying Deployment

After adding the embed code:
  1. Visit your website in a browser.
  2. Look for the chat bubble icon in the bottom-right corner.
  3. Click the bubble to open the widget and send a test message.
  4. Verify the bot responds using your configured knowledge sources.
Open your browser’s developer console (F12) and check for any errors if the widget doesn’t appear. Common issues include script blocking by ad blockers or content security policies.

​
Troubleshooting

  • Verify the embed code is placed before </body>, not inside <head>.
  • Check that the data-bot-id value matches your bot’s ID.
  • Disable ad blockers or browser extensions that may block third-party scripts.
  • Ensure your site’s Content Security Policy (CSP) allows scripts from widget.botric.ai.
  • Confirm your bot has at least one Knowledge Source linked.
  • Check that the knowledge source has been fully crawled and indexed.
  • Test the bot in Botric’s built-in preview before checking the live widget.
  • Your site’s CSS may conflict with the widget. The widget uses an iframe to isolate styles, but some global styles can still affect the bubble icon.
  • Re-check your widget customization settings.

​
Next Steps

Customize Widget

Adjust the widget’s appearance.

View Leads

See leads captured by your bot.

Knowledge Sources

Manage what your bot knows.

Chat Agent Overview

Return to Chat Agent overview.