AutoRAG Widget Integration Guide

Method 1: Simple Embedding

Add these two lines to your HTML:

<script src="https://your-domain.pages.dev/autorag-widget.min.js"></script>
<autorag-widget></autorag-widget>

Method 2: With Configuration

Customize the widget with attributes:

<script src="https://your-domain.pages.dev/autorag-widget.min.js"></script>
<autorag-widget
  language="de"
  dignity="doctor"
  product="product-a"
  model="openai|gpt-4o-mini"
  theme="dark"
  position="bottom-left"
  button-text="Hilfe benötigt?"
  header-title="Support Chat"
></autorag-widget>

Method 3: Programmatic Configuration

Configure via JavaScript before loading:

<script>
window.AutoRAGConfig = {
  language: 'en',
  dignity: 'nurse',
  product: 'product-a',
  provider: 'openai',
  model: 'gpt-5-mini',
  theme: 'light',
  position: 'bottom-right',
  buttonText: 'Need Help?',
  headerTitle: 'Support Assistant',
  autoInit: true
};
</script>
<script src="https://your-domain.pages.dev/autorag-widget.min.js"></script>

Method 4: Iframe Embedding (Legacy)

For complete isolation or legacy browser support:

<iframe
  src="https://your-domain.pages.dev/iframe.html?language=en&dignity=general&product=product-a"
  width="400"
  height="600"
  frameborder="0"
></iframe>

Available Configuration Options

• language: en, de, fr, it
• dignity: doctor, nurse, therapist, pharmacist, general
• product: product-a, product-b
• provider: workers-ai, openai, anthropic
• model: Model identifier
• theme: light, dark
• position: bottom-right, bottom-left, top-right, top-left
• button-text: Custom button text
• header-title: Custom header title
• api-url: Custom API endpoint (for self-hosted)

Event Listeners

Listen to widget events:

<script>
const widget = document.querySelector('autorag-widget');

widget.addEventListener('widget-opened', (e) => {
  console.log('Chat opened', e.detail);
});

widget.addEventListener('widget-closed', (e) => {
  console.log('Chat closed', e.detail);
});

widget.addEventListener('message-sent', (e) => {
  console.log('Message sent', e.detail);
});

widget.addEventListener('widget-error', (e) => {
  console.error('Error occurred', e.detail);
});
</script>