Skip to main content
Dial AI can be easily integrated into your application using a simple script tag. This method provides a floating chat button that opens a modal when clicked, allowing users to interact with Grace without leaving your application.

​
Prerequisites

Before you begin, you’ll need:
  • A Dial AI chat ID (see Creating a Chat ID below)
  • The backend URL for your Dial AI instance
  • A unique anchor ID for mounting the chat button

​
Creating a Chat ID

To generate a chat ID for your integration:
  1. Navigate to the Flows section in your Dial AI dashboard
  2. Locate the flow you want to use for the chat
  3. Click the “Share” button in the top-right corner
  4. Click “Generate” to create a new chat ID
  5. Copy the generated chat ID to use in your integration
Generate Chat Link

​
Basic Integration

Add the following to your HTML file, replacing the placeholder values as needed:
  1. Load the widget script in your <head> tag:
<script defer type="module" src="https://cdn.dialai.ca/v1/esm/{version}/dial-ai.js"></script>
Replace {version} with a specific release version (e.g. 0.0.1329) from the versions manifest.
  1. Add the mount point and initialization script:
<!-- Mount point for the chat widget (renders in the bottom right) -->
<span id="your-anchor-id"></span>

<script>
document.addEventListener("DOMContentLoaded", function() {
    window.renderModal("your-anchor-id", {
        iconUrl: "https://www.yourdomain.com/path/to/icon.svg",
        chatId: "YOUR_CHAT_ID",
        backendUrl: "https://your-dialai-instance.com"
    });
});
</script>

​
Configuration Options

The renderModal function accepts the following configuration options:
  • iconUrl (string, required): URL to the icon that will be displayed in the chat button
  • chatId (string, required): Your unique Dial AI chat identifier
  • backendUrl (string, required): The base URL of your Dial AI instance
  • brandVariants (object, optional): Custom color scheme for the chat interface (see Brand Variants below)

​
Brand Variants

By default, the widget uses the theme configured for the chat link’s tenant. If you need to override this to match your site’s branding, pass a brandVariants object with color values on a scale from 10 (darkest) to 160 (lightest): 
brandVariants: {
    10: "#001018",
    20: "#002030",
    30: "#003049",
    40: "#004062",
    50: "#00507a",
    60: "#006093",
    70: "#0070ab",
    80: "#0080c4",
    90: "#0090dc",
    100: "#00a1f5",
    110: "#10adfe",
    120: "#2bb6ff",
    130: "#45bfff",
    140: "#60c8ff",
    150: "#7ad1ff",
    160: "#95dafe"
}
Omit brandVariants to use the tenant’s default theme.

​
CORS Configuration

The widget script is served from our CDN with permissive CORS headers (Access-Control-Allow-Origin: *), so it can be loaded from any domain without additional configuration.

​
Troubleshooting

  • If the chat button doesn’t appear, check your browser’s console for any error messages
  • Ensure the anchor element with the specified ID exists in the DOM when the script runs
  • Make sure the chat ID and backend URL are correct

​
Example Implementation

Here’s a complete example of how to integrate the chat button into a simple HTML page: 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My App with Dial AI</title>
    <script defer type="module" src="https://cdn.dialai.ca/v1/esm/0.0.1329/dial-ai.js"></script>
</head>
<body>
    <h1>Welcome to My App</h1>
    <p>Click the chat button in the bottom right to get help.</p>

    <!-- Mount point for the chat widget -->
    <span id="dial-ai-button"></span>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
        window.renderModal("dial-ai-button", {
            iconUrl: "https://cdn.dialai.ca/v1/esm/0.0.1329/favicon.ico",
            chatId: "00000000-0000-0000-0000-000000000000",
            backendUrl: "https://demo.dialai.ca"
        });
    });
    </script>
</body>
</html>

​
Versions

The widget is hosted on our CDN at https://cdn.dialai.ca/v1/esm/{version}/dial-ai.js. You can find available versions in the versions manifest. Pin to a specific release version to avoid unexpected changes.

​
ESM vs UMD

The widget is available in two module formats:
  • ESM (recommended) — loaded with <script type="module">. This is the current format used for all new releases (/v1/esm/{version}/dial-ai.js).
  • UMD (legacy) — loaded with a plain <script> tag. Older releases (pre-0.0.1323) were published in UMD format and remain available at /v1/umd/dial-ai-{version}.umd.js for backward compatibility.
New integrations should use the ESM format. Existing UMD integrations will continue to work but will not receive new releases.