Widget Integration

Add the DemoAgent chat widget to your website with a single script tag. The widget creates a floating chat interface that connects visitors to your AI demo agent.

HTML Script Tag

The simplest integration. Add this before the closing </body> tag:

<script
  src="https://cdn.iraa.ai/widget.js"
  data-api-key="pk_live_YOUR_KEY"
  async>
</script>

The widget auto-initializes using the data-api-key attribute.

Programmatic Initialization

For more control, load the script without data-api-key and call DemoAgent.init() manually:

<script src="https://cdn.iraa.ai/widget.js" async></script>
<script>
  window.addEventListener('DemoAgentReady', function() {
    DemoAgent.init({
      apiKey: 'pk_live_YOUR_KEY',
      theme: 'auto',
      position: 'bottom-right'
    });
  });
</script>

React

import { useEffect } from 'react';

export function DemoAgentWidget({ apiKey }: { apiKey: string }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.iraa.ai/widget.js';
    script.async = true;
    script.dataset.apiKey = apiKey;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, [apiKey]);

  return null;
}

// Usage
<DemoAgentWidget apiKey="pk_live_YOUR_KEY" />

Next.js

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://cdn.iraa.ai/widget.js"
        data-api-key="pk_live_YOUR_KEY"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue

<script setup>
import { onMounted, onUnmounted } from 'vue';

const props = defineProps({ apiKey: String });
let script = null;

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://cdn.iraa.ai/widget.js';
  script.async = true;
  script.dataset.apiKey = props.apiKey;
  document.body.appendChild(script);
});

onUnmounted(() => {
  if (script) document.body.removeChild(script);
});
</script>

Configuration Options

Options passed to DemoAgent.init(config):

Option	Type	Default	Description
`apiKey`	`string`	required	Your public API key (`pk_live_...` or `pk_test_...`)
`apiUrl`	`string`	`https://api.iraa.ai`	API base URL (override for self-hosted)
`wsUrl`	`string`	derived from apiUrl	WebSocket URL (auto-derived if not set)
`theme`	`'light' \| 'dark' \| 'auto'`	`'auto'`	Widget color theme
`position`	`'bottom-right' \| 'bottom-left'`	`'bottom-right'`	Widget position on page

Events

DemoAgentReadyDispatched on window when the widget script is loaded and ready for init().

How It Works

The widget script loads and creates a floating action button (FAB) on the page
When the visitor clicks the FAB, a session is created via POST /api/v1/session
The agent sends an initial greeting with suggested conversation starters
A WebSocket connection is established for real-time messaging
The agent can navigate your product in a live iframe, clicking buttons, filling forms, and highlighting elements
Lead capture forms appear based on your PDP configuration triggers