Skip to main content

Embedding the Chat Widget

Basic Installation​

Add this script tag just before the closing </body> tag:

<script
  src="https://cdn.webdialogai.com/widget.js"
  data-tenant-id="YOUR_TENANT_ID"
  async>
</script>

Configuration Options​

AttributeDescriptionDefault
data-tenant-idYour unique tenant identifier (required)—
data-positionWidget position: bottom-right or bottom-leftbottom-right
data-colorPrimary color (hex)Configured in dashboard

Example with Options​

<script
  src="https://cdn.webdialogai.com/widget.js"
  data-tenant-id="YOUR_TENANT_ID"
  data-position="bottom-left"
  data-color="#0066ff"
  async>
</script>

Single Page Applications​

The widget works automatically with React, Next.js, Vue, Angular, and other SPAs. No special configuration needed.

Troubleshooting​

Widget not appearing?

  • Ensure the script is placed before </body>
  • Check that data-tenant-id matches your dashboard
  • Open browser DevTools console for errors
  • Verify your domain is allowed in Settings > Allowed Domains