Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.dialai.ca/llms.txt

Use this file to discover all available pages before exploring further.

Web POC Edit tab in light mode
Dialai chat links can be embedded in any web application via a standard HTML <iframe>. Use this when you want the AI agent to live inside an existing site — customer portal, support page, in-app help — without leaving the surrounding context. If you want a floating chat button that pops a modal instead of embedding inline, see Script Tag Integration. For backend-driven flows that bypass the embedded widget entirely, see API Integration. A chat link is a UUID-keyed Web Point of Contact. Create one and you can embed it anywhere.
1

Open Points of Contact

Navigate to Agent > Points of Contact > Web.
2

Click Create

Pick Web as the channel type. Fill in a friendly name and select the flow you want this chat link to run.
3

Save and open the link

The new link appears in the Web POC table. Click the edit (pencil) icon to open the configuration panel.
The Edit tab controls what the chat link does:
  • The Code — the UUID that uniquely identifies the link. Use this in your embed URL.
  • Link Name — a human-readable label that shows up in transcripts and the conversations list.
  • Draft Flow — the flow this chat link runs.
  • Version — pin to a specific published flow version. Leave empty to track the draft live.
  • Voice — synthetic voice for any audio-mode conversations on this link.
  • Settable Internal Parameters — keys the client is allowed to set when starting a chat (e.g. UI preferences).
  • Extra Internal Parameters — keys baked into every chat created via this link. The client cannot override these.
For passing trusted user identity (e.g. a verified userId) into the chat, see Passing Context Securely. Never put trusted values in Settable Internal Parameters — those are client-controlled.
Web POC Generate tab in light mode
The Generate tab produces the live URL you embed. Configure:
  • Override Theme — Dynamic (follows the visitor’s browser theme) or fixed Light/Dark.
  • Disable Logos — hide tenant branding for white-label embeds.
  • Fast Launch Chat — open the chat immediately on page load instead of waiting for the visitor to click.
  • Extra Context Params — query-string parameters appended to the URL. Used by start-up functions to look up information before the first turn. Only useful when paired with Settable Internal Parameters on the Edit tab.
The Link field at the bottom is the final embed URL. Copy it. The simplest embed is a fixed-size iframe: 
<iframe
  src="https://your-instance.dialai.ca/your-tenant/chat/00000000-0000-0000-0000-000000000000"
  width="1000"
  height="1000"
></iframe>
Replace the URL with the one from the Generate tab, and adjust width/height to fit your page.

​
Toggling on a button click

For a “click to open chat” pattern, mount/unmount the iframe on demand. Chat context is preserved between iframe reloads as long as the visitor’s session cookie is intact. 
document.getElementById("toggle-chat").addEventListener("click", () => {
  const id = "dial-ai-chat";
  const existing = document.getElementById(id);
  if (existing) {
    existing.remove();
    return;
  }
  const iframe = document.createElement("iframe");
  iframe.id = id;
  iframe.src = "https://your-instance.dialai.ca/your-tenant/chat/00000000-0000-0000-0000-000000000000";
  iframe.width = "500";
  iframe.height = "500";
  document.getElementById("root").append(iframe);
});

​
iframe vs script tag

Use iframe when…Use script tag when…
You want chat embedded inline in your layout.You want a floating button + modal.
You’re OK with iframe-sandbox limitations.You want native styling and a smaller bundle footprint.
You’re embedding inside another iframe-friendly host.You’re embedding inside a SPA where DOM control is straightforward.

​
CSP and X-Frame-Options

The chat URL ships with a Content-Security-Policy-Report-Only header that allows frame-ancestors 'self' https://*.hansencx.com. The report-only policy means the platform logs violations but doesn’t block — if your embed origin is outside the allow-list you’ll see violation reports in browser dev tools, not a blocked iframe. If you need your embed origin allowed in an enforced policy, contact your account representative to extend the platform’s CSP. Your embedding page does not need any special headers unless your own CSP restricts iframe sources — in that case, allow https://your-instance.dialai.ca in your page’s frame-src directive.

​
Tips

  • Use a stable Version when embedding into production. Tracking the draft means the chat behavior can change at any time without you knowing.
  • Set Link Name before you copy the URL. It shows up in Conversations and makes it much easier to attribute traffic.
  • Test the embed on a staging URL before production — some browsers and corporate firewalls block third-party iframes even when CSP allows them.

Script tag integration

Floating button + modal instead of inline iframe.

API integration

Skip the widget entirely and use the REST API.

Passing context securely

How to pass verified user identity into the chat.

Points of Contact: Web

Manage Web POCs.