DrTalks.ai Documentation
Everything you need to get your DrTalks chat widget up and running on your website.
The block is a second way to embed the chat — inline in your page layout instead of as a floating bubble. Copy the ready snippet (with your real widget-id and site-domain) from the API Keys page in your DrTalks dashboard; the examples below use YOUR_WIDGET_ID and yoursite.com as placeholders.
<drtalks-chat-block> is a custom element that renders the chat inline, in normal document flow, at the spot where you place the tag — useful for a dedicated "Ask us" section, a sidebar, or a support page. It loads the same dashboard settings as the floating widget and can coexist with the floating widget on the same page.- Add the block
<script>once per page (it registers the<drtalks-chat-block>element). - Place a
<drtalks-chat-block widget-id="…" site-domain="…">tag wherever you want the chat to appear. - Save and publish your changes.
Basic embed:
<!-- DrTalks Chat Block -->
<script src="https://cdn.drtalks.ai/v1_0_4/drtalks-doctors-block.min.js" defer></script>
<drtalks-chat-block widget-id="YOUR_WIDGET_ID" site-domain="yoursite.com"></drtalks-chat-block>
<!-- End DrTalks Chat Block -->| Attribute | Required | Description |
|---|---|---|
widget-id | Yes | Your widget ID (copy it from the dashboard) — the same value the floating widget uses. Authenticates the chat session. |
site-domain | Yes | Your site's domain (e.g. yoursite.com) — the same value the floating widget uses. Selects which dashboard settings the block loads. |
height | No | Fixed height in pixels. Defaults to ~600px with internal message scrolling. |
fill-parent | No | Fill the parent element's height instead of a fixed height. The parent must have a definite height. |
theme | No | Override the theme: a mode (light/dark), a theme name (drtalks, slate, ocean, amber, charcoal), or mode:theme (e.g. light:ocean). |
conversation-id | No | Recommended when placing more than one block. Gives each block a stable, independent transcript that survives page reloads. |
share-context | No | Set to true to share the floating widget's conversation instead of keeping a separate one, so a visitor can continue the same chat between this block and the floating bubble. Overrides conversation-id. share-context="false" is the only "off" value. |
Fixed height:
<!-- ~800px tall instead of the ~600px default -->
<drtalks-chat-block widget-id="YOUR_WIDGET_ID" site-domain="yoursite.com" height="800"></drtalks-chat-block>Fill the parent (parent needs a definite height):
<!-- Fills its parent — the parent MUST have a definite height -->
<div style="height: 600px;">
<drtalks-chat-block widget-id="YOUR_WIDGET_ID" site-domain="yoursite.com" fill-parent></drtalks-chat-block>
</div>Themed block with an independent transcript:
<!-- Theme override + a stable, independent transcript -->
<drtalks-chat-block
widget-id="YOUR_WIDGET_ID"
site-domain="yoursite.com"
theme="dark"
conversation-id="support-page"
></drtalks-chat-block>By default each block keeps its own conversation, separate from other blocks and from the floating widget. When you place multiple blocks, give each a distinct conversation-id so their transcripts stay stable and independent. To instead share the floating widget's conversation, use share-context (below).
share-context="true" so the block and the floating bubble use the same conversation on that page.Share the floating widget transcript:
<!-- Shares the floating widget's conversation on the same page -->
<drtalks-chat-block
widget-id="YOUR_WIDGET_ID"
site-domain="yoursite.com"
share-context="true"
></drtalks-chat-block>A visitor can start a chat in the block and continue it in the floating widget (or the reverse) without losing context. It takes precedence over conversation-id.
id and call getMessages() on it to read that block's conversation from your own JavaScript.Read one block's messages:
<drtalks-chat-block
id="ask-us"
widget-id="YOUR_WIDGET_ID"
site-domain="yoursite.com"
></drtalks-chat-block>
<script>
// Read this block's transcript (completed turns only)
const block = document.querySelector('drtalks-chat-block#ask-us');
const transcript = block.getMessages();
// → [
// { role: 'user', content: 'What are your hours?', timestamp: '2026-…' },
// { role: 'assistant', content: 'We are open 9–5.', timestamp: '2026-…' },
// ]
if (transcript.length > 0) {
// e.g. show a "continue your chat" prompt
}
</script>Returns an array of { role, content, timestamp } for completed turns only — in-flight and errored messages are excluded, and it returns an empty array before any conversation starts. This mirrors the floating widget's drtalksai.getMessages(), but is scoped to the block you select.