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 code to your HTML file, replacing the placeholder values as needed: 
<!-- Add this to your HTML's head or before the closing body tag -->
<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",
        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"
        }
    });
});
</script>

<!-- Add this where you want the chat button to appear -->
<span id="your-anchor-id"></span>

​
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

​
CORS Configuration

For the script to work properly, ensure that your domain is whitelisted in the CORS configuration of your Dial AI instance. Contact your Dial AI administrator to add your development and production domains to the allowed origins list.

​
Customization

You can customize the appearance of the chat interface by modifying the brandVariants object. The color values follow a scale from 10 (darkest) to 160 (lightest), allowing for consistent theming throughout the interface.

​
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
  • Verify that your domain is properly whitelisted in the CORS configuration
  • 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.0">
    <title>My App with Dial AI</title>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        window.renderModal("dial-ai-button", {
            iconUrl: "/images/chat-icon.svg",
            chatId: "4a28d5dc-5c1b-432e-b5fe-a2ab50ad83d1",
            backendUrl: "https://demo.dialai.ca",
            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"
            }
        });
    });
    </script>
</head>
<body>
    <h1>Welcome to My App</h1>
    <p>Click the chat button in the bottom right to get help.</p>

    <!-- This is where the chat button will appear -->
    <span id="dial-ai-button"></span>
</body>
</html>
For most standard use cases, the script tag integration will be sufficient. However, if you need more control or have specific integration requirements, our API provides the flexibility you need.