Embed the widget

Get the DGbot chat widget live on your website in under 5 minutes with a single script tag.

~5 minutes Free

Get the embed snippet

1
Open Deploy → Embed widget

Go to Deploy → Embed widget in the admin panel to find your unique embed snippet.

Open Embed settings in admin
deploy/embed-snippet Screenshot needed — save as: _assets/images/deploy/embed-snippet.png

Your unique embed snippet with your Chatbot ID pre-filled.

2
Copy the script tag

Click Copy snippet. The snippet looks like this — with your own data-chatbot-id:

html
<script
  src="https://dgbot.dgtech.co.in/static/widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  defer
></script>

Install on your website

Add the script tag to every page where you want the widget to appear — or to your site-wide template so it shows everywhere.

1
Paste the snippet before the closing body tag

Open your website's HTML and paste the snippet just before :

html
    <!-- DGbot Widget -->
    <script
      src="https://dgbot.dgtech.co.in/static/widget.js"
      data-chatbot-id="YOUR_CHATBOT_ID"
      defer
    ></script>
  </body>
</html>

For platform-specific instructions, see the WordPress guide or Shopify guide in the Developer section.

Verify the install

1
Visit your website

Open your website in a browser. You should see the DGbot chat launcher in the bottom-right corner.

deploy/widget-launcher Screenshot needed — save as: _assets/images/deploy/widget-launcher.png

The DGbot chat launcher appears in the bottom-right corner. Click it to open the widget.

2
Test a conversation

Click the launcher to open the chat widget. Send a test message. The bot should respond using your trained content.

Widget takes a second to load
The widget loads asynchronously with the defer attribute, so it appears after the page content. This is intentional — it does not affect page performance.

Script options

You can customise widget behaviour with additional data-* attributes:

AttributeDefaultDescription
data-chatbot-id(required)Your unique chatbot identifier
data-positionbottom-rightWidget position: bottom-right or bottom-left
data-themelightWidget theme: light or dark
data-openfalseOpen the widget automatically on page load

Example with options:

html
<script
  src="https://dgbot.dgtech.co.in/static/widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-position="bottom-left"
  data-theme="dark"
  defer
></script>

Troubleshooting

Widget doesn't appear — Check the browser console for errors. Common causes: typo in the chatbot ID, the script tag is inside without defer, or a Content Security Policy (CSP) blocking the script source.

Widget appears but doesn't respond — The chatbot ID is correct but the chatbot may not have any sources yet. Add at least one training source and wait for it to show a Ready badge.

Widget appears on some pages but not others — The snippet is not in your global template. Add it to your site's base layout or _layouts/default.html to ensure it loads on every page.

Widget installed!
The chat bubble should now appear on your website. Test it by visiting your site and starting a conversation.
Previous AI model
Report an issue