Widget configuration

Configure the DGbot widget's appearance, position, and identity verification via script attributes and the JS API.

~10 minutes Free

Data attributes

Configure the widget's initial state via data-* attributes on the script tag:

AttributeTypeDefaultDescription
data-chatbot-idstringrequiredYour chatbot's unique identifier
data-positionstringbottom-rightWidget position: bottom-right or bottom-left
data-themestringlightWidget theme: light or dark
data-openbooleanfalseOpen the widget automatically on page load
data-hide-launcherbooleanfalseHide the launcher bubble (use with JS API to control opening)

Example — dark mode widget on the left:

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>

Identity verification

When you know who your logged-in visitor is (from your own auth system), you can pass verified user identity to DGbot. This enables personalised responses (calling the visitor by name) and secure integrations (passing the user's account data to custom API actions).

Why verification matters: Without verification, any visitor could claim to be any user by passing arbitrary data to the widget. Verification uses HMAC-SHA256 signing to prove the identity payload came from your server.

1
Find your HMAC secret

Go to Settings → Embed in the admin panel. Copy the HMAC secret — this is a server-side secret, never expose it in client-side code.

Open Settings in admin
2
Sign the user identity on your server

Your server generates an HMAC-SHA256 signature of the visitor's ID using your secret:

python
# Python example
import hmac, hashlib

def sign_visitor(visitor_id: str, hmac_secret: str) -> str:
    return hmac.new(
        hmac_secret.encode('utf-8'),
        visitor_id.encode('utf-8'),
        hashlib.sha256
    ).hexdigest()
js
// Node.js example
const crypto = require('crypto')

function signVisitor(visitorId, hmacSecret) {
  return crypto.createHmac('sha256', hmacSecret)
    .update(visitorId)
    .digest('hex')
}
3
Pass the identity to the widget

Pass the signed identity as part of widget initialisation. This is done via the JS API after the widget loads:

js
window.DGbot('identify', {
  userId: 'user_12345',
  name: 'Jane Smith',
  email: 'jane@example.com',
  userHash: 'SERVER_GENERATED_HMAC_SIGNATURE'
})

Only userId and userHash are required. name and email are optional but enable personalised responses.

JS initialization

If you prefer JS-based initialisation over data attributes, use the init command:

js
window.DGbot('init', {
  chatbotId: 'YOUR_CHATBOT_ID',
  position: 'bottom-right',
  theme: 'light',
  open: false
})

The window.DGbot function is available after the widget script loads. To safely call it before the script has finished loading, queue commands with the standard pattern:

js
window.DGbot = window.DGbot || function() {
  (window.DGbot.q = window.DGbot.q || []).push(arguments)
}
window.DGbot('init', { chatbotId: 'YOUR_CHATBOT_ID' })
Previous Install widget
Report an issue