​
Installation

Adding the chat widget to your website requires only two steps:

  1. Configure the widget settings
  2. Add the widget script to your page

​
HTML Implementation

<script>
  // Configure your chat widget
  window.CHAT_WIDGET_CONFIG = {
    agent_id: "YOUR_AGENT_ID", // Replace with your agent ID
    company_name: "Your Company",
    primary_color: "#000000",
    primary_text_color: "#ffffff",
    position: "bottom-right",
    tagline: "Ready when you are.",
    icon_url: "https://your-icon-url.com/icon.png",
    secondary_color: "rgb(245 245 245)",
    secondary_text_color: "#000000",
    org_id: "YOUR_ORG_ID" // Optional
  };
</script>

<script src="https://widget.gigaml.com/inject-gigaml.js" defer></script>

Important: The configuration object must be named CHAT_WIDGET_CONFIG for the widget to function properly. Using any other variable name will prevent the widget from loading correctly.

​
Single-Page Application (SPA) Implementation

For React, Angular, Vue, or other SPAs:

// In your main layout component or index file
useEffect(() => {
  // Define the configuration
  window.CHAT_WIDGET_CONFIG = {
    agent_id: "YOUR_AGENT_ID",
    company_name: "Your Company",
    primary_color: "#000000",
    primary_text_color: "#ffffff",
    position: "bottom-right",
    tagline: "Ready when you are.",
    icon_url: "https://your-icon-url.com/icon.png",
    secondary_color: "rgb(245 245 245)",
    secondary_text_color: "#000000",
    org_id: "YOUR_ORG_ID" // Optional
  };
  
  // Load the script
  const script = document.createElement('script');
  script.src = "https://widget.gigaml.com/inject-gigaml.js";
  script.defer = true;
  document.head.appendChild(script);
  
  // Clean up on component unmount
  return () => {
    if (script.parentNode) {
      document.head.removeChild(script);
    }
  };
}, []);

​
Finding Your Agent ID

To connect your chat widget to your AI agent, you’ll need your agent ID. You can find this in the Getting Started guide.

​
Configuration Options

ParameterTypeRequiredDescription
agent_idstringYesYour unique GigaML agent ID
company_namestringYesYour company name displayed in the widget
primary_colorstringYesMain color for buttons and highlights (hex or rgb)
primary_text_colorstringYesText color for primary elements
secondary_colorstringYesSecondary color for the widget (hex or rgb)
secondary_text_colorstringYesText color for secondary elements
taglinestringYesShort tagline displayed in the widget
icon_urlstringYesURL to your company icon or logo
positionstringNoWidget position: “bottom-right” (default), “bottom-left”, “top-right”, “top-left”
org_idstringNoYour organization ID if applicable

​
Variable Naming Requirement

The chat widget configuration must be assigned to a global variable named exactly CHAT_WIDGET_CONFIG. This is a strict requirement for the widget to function properly.

// CORRECT - This will work
window.CHAT_WIDGET_CONFIG = { /* configuration */ };

// INCORRECT - These will NOT work
window.chatWidgetConfig = { /* configuration */ };
window.CHAT_CONFIG = { /* configuration */ };
const config = { /* configuration */ };

​
Implementation Example from GigaML

Here’s how the chat widget is implemented in the GigaML application itself, which serves as a reference implementation:

// From workflows/frontend/app/(dashboard)/agents/detail/components/chat-window/components/chat-widget.tsx
useEffect(() => {
  if (typeof window === "undefined") return;
  // Ensure environment variables are set on window before script execution
  window.CHAT_WIDGET_CONFIG = {
    agent_id: "agent_version_6e8a9dd9-5185-4b75-9a10-6a4338c0d97e",
    company_name: "GigaML",
    tagline: "Ready when you are.",
    icon_url: "https://gigaml-logo.s3.us-east-1.amazonaws.com/testLogo.png",
    primary_color: "#000",
    primary_text_color: "#fff",
    secondary_color: "rgb(245 245 245)",
    secondary_text_color: "#000",
  };
}, []);

​
Adding the Widget to Your Site

To add the chat widget to your website, follow these steps:

​
For Static Websites (HTML)

  1. Add the configuration script in the <head> or <body> section of your HTML:
<script>
  window.CHAT_WIDGET_CONFIG = {
    agent_id: "YOUR_AGENT_ID",
    company_name: "Your Company",
    // Add other required configuration options
  };
</script>
  1. Add the widget script right after your configuration:
<script src="https://widget.gigaml.com/inject-gigaml.js" defer></script>

​
For React Applications

  1. Create a component for the chat widget:
import { useEffect } from 'react';

const ChatWidget = () => {
  useEffect(() => {
    if (typeof window === "undefined") return;
    
    // Configure the widget
    window.CHAT_WIDGET_CONFIG = {
      agent_id: "YOUR_AGENT_ID",
      company_name: "Your Company",
      // Add other required configuration options
    };
    
    // Load the script
    const script = document.createElement('script');
    script.src = "https://widget.gigaml.com/inject-gigaml.js";
    script.defer = true;
    document.head.appendChild(script);
    
    // Clean up on unmount
    return () => {
      if (script.parentNode) {
        document.head.removeChild(script);
      }
    };
  }, []);
  
  return null; // This component doesn't render anything
};

export default ChatWidget;
  1. Import and use the component in your layout or main component:
import ChatWidget from './ChatWidget';

const App = () => {
  return (
    <div>
      {/* Your app content */}
      <ChatWidget />
    </div>
  );
};

​
Complete Example

Here’s a complete example of how to integrate the chat widget into your website:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website</title>
  
  <!-- Chat Widget Configuration -->
  <script>
    window.CHAT_WIDGET_CONFIG = {
      agent_id: "YOUR_AGENT_ID",
      company_name: "GigaML Demo",
      primary_color: "#1E90FF",
      primary_text_color: "#ffffff",
      secondary_color: "rgb(245 245 245)",
      secondary_text_color: "#000000",
      tagline: "Ready when you are.",
      icon_url: "https://your-icon-url.com/icon.png",
      position: "bottom-right",
      org_id: "YOUR_ORG_ID" // Optional
    };
  </script>
  
  <!-- Chat Widget Script -->
  <script src="https://widget.gigaml.com/inject-gigaml.js" defer></script>
</head>
<body>
  <!-- Your website content -->
</body>
</html>

​
Troubleshooting

If the chat widget isn’t appearing on your site, check the following:

  1. Verify that your agent ID is correct
  2. Ensure the configuration object is named exactly CHAT_WIDGET_CONFIG
  3. Make sure the script is loading properly (check network tab in developer tools)
  4. Check browser console for any error messages