ARDI Widget Integration Guide

Security Note: Each client receives a unique token. Keep your token confidential - it provides access to your organization's ARDI configuration.

Option 1: With Default Launcher (Recommended)

The widget includes a beautiful owl launcher with speech bubble. Just initialize with your token:

<script src="https://your-cdn.com/ardi-widget.js"></script>
<script>
  ArdiWidget.init({
    token: 'aw_xxxx_xxxxxxxx',  // Your client token
    position: 'bottom-right'
  });
</script>

Option 2: Custom Button (Hide Default Launcher)

If you want to use your own button to open ARDI:

<script src="https://your-cdn.com/ardi-widget.js"></script>
<script>
  ArdiWidget.init({
    token: 'aw_xxxx_xxxxxxxx',  // Your client token
    showLauncher: false  // Hide default launcher
  });
</script>

<!-- Your custom button -->
<button onclick="ArdiWidget.open()">
  Chat with Ardi
</button>

Available Methods

ArdiWidget.init(config) - Initialize the widget
ArdiWidget.open() - Open the chat modal
ArdiWidget.close() - Close the chat modal
ArdiWidget.destroy() - Remove the widget completely

Configuration Options

ArdiWidget.init({
  token: 'aw_xxxx_xxxxxxxx',  // Required: Your client token
  position: 'bottom-right',   // 'bottom-right' or 'bottom-left'
  showLauncher: true          // true (default) or false
});

Build Instructions

# Build the embeddable widget
npx vite build --config vite.widget.config.ts

# Output: dist-widget/ardi-widget.js