> ## Documentation Index
> Fetch the complete documentation index at: https://docs.eigi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Widget & Chat

> Embed voice and video agents directly on your website

## Overview

Bring your voice AI agents directly to your website visitors. The eigi.ai widget enables instant voice or video conversations without any phone calls or downloads.

***

## Widget Capabilities

### What the Widget Offers

<CardGroup cols={2}>
  <Card title="Voice Conversations" icon="microphone">
    Crystal-clear voice calls directly in the browser
  </Card>

  <Card title="Video Avatars" icon="video">
    Face-to-face interactions with AI video avatars
  </Card>

  <Card title="Screen Sharing" icon="desktop">
    Visitors can share their screen during calls
  </Card>

  <Card title="Camera Support" icon="camera">
    Enable visitor video for personalized interactions
  </Card>
</CardGroup>

***

## Embedding the Widget

### Quick Setup

Add the widget to any website with a single script tag:

```html theme={null}
<script
  src="https://unpkg.com/@cliniq360/eigi-widget@latest/dist/eigi-widget.js"
  data-agent-id="your-agent-id"
  async
></script>
```

That's it! The widget appears automatically and is ready to use.

### Getting Your Agent ID

<Steps>
  <Step title="Create an Agent">Set up your voice agent in the platform</Step>

  <Step title="Go to Widget Settings">
    Navigate to the widget configuration section
  </Step>

  <Step title="Copy Agent ID">Copy the unique agent ID for embedding</Step>
  <Step title="Add to Website">Paste the script tag into your HTML</Step>
</Steps>

***

## Widget Configuration

### Basic Options

| Option          | Description               | Default        |
| --------------- | ------------------------- | -------------- |
| `data-agent-id` | Your agent's unique ID    | Required       |
| `data-position` | Widget position on page   | `bottom-right` |
| `data-theme`    | Light or dark theme       | `light`        |
| `data-language` | Widget interface language | `en`           |

### Position Options

<CardGroup cols={4}>
  <Card title="Bottom Right" icon="arrow-down-right">
    `bottom-right`
  </Card>

  <Card title="Bottom Left" icon="arrow-down-left">
    `bottom-left`
  </Card>

  <Card title="Top Right" icon="arrow-up-right">
    `top-right`
  </Card>

  <Card title="Top Left" icon="arrow-up-left">
    `top-left`
  </Card>
</CardGroup>

***

## Voice Mode

### Browser-Based Voice Calls

When a visitor clicks the widget:

1. Microphone permission requested (first time only)
2. Connection established instantly
3. Two-way voice conversation begins
4. Full agent capabilities available

### Voice Features

| Feature                   | Description                   |
| ------------------------- | ----------------------------- |
| **Echo Cancellation**     | Clear audio without feedback  |
| **Noise Suppression**     | Background noise filtered out |
| **Auto Gain Control**     | Consistent volume levels      |
| **Interruption Handling** | Natural conversational flow   |

***

## Video Mode

### AI Avatar Conversations

Enable video avatars for face-to-face interactions:

<Steps>
  <Step title="Configure Video Agent">
    Set up your agent with a video avatar
  </Step>

  <Step title="Enable Video Widget">Turn on video mode in widget settings</Step>
  <Step title="Choose Avatar">Select from HeyGen or Tavus avatars</Step>
  <Step title="Test Experience">Preview the video interaction</Step>
</Steps>

### Video Options

| Option                    | Description                           |
| ------------------------- | ------------------------------------- |
| **Avatar Only**           | Visitor sees avatar, no camera needed |
| **Two-Way Video**         | Both avatar and visitor camera        |
| **Avatar + Screen Share** | Avatar with visitor screen sharing    |

***

## Screen Sharing

### Guided Assistance

Let visitors share their screen for better support:

<CardGroup cols={2}>
  <Card title="Technical Support" icon="headset">
    Walk users through software issues step-by-step
  </Card>

  <Card title="Form Assistance" icon="file-lines">
    Help visitors fill out complex forms
  </Card>

  <Card title="Product Demos" icon="presentation-screen">
    Guide users through your product features
  </Card>

  <Card title="Troubleshooting" icon="wrench">
    See exactly what the user sees to solve problems
  </Card>
</CardGroup>

### How It Works

1. Agent requests screen share during conversation
2. Visitor approves and selects what to share
3. Agent can reference what's on screen
4. Both continue the voice conversation

<Info>
  Screen sharing is opt-in. Visitors control what they share and can stop
  sharing at any time.
</Info>

***

## Visitor Camera

### Two-Way Video Conversations

Enable visitor cameras for more personal interactions:

| Use Case                  | Benefit                              |
| ------------------------- | ------------------------------------ |
| **Identity Verification** | Visual confirmation during processes |
| **Document Review**       | Visitor shows documents to agent     |
| **Product Issues**        | Customer shows physical products     |
| **Sign Language**         | Accessibility support                |

### Privacy Controls

* Camera access requires explicit permission
* Visitors can disable camera anytime
* No recording without consent
* Clear visual indicators when camera is active

***

## Widget Customization

### Visual Styling

Match the widget to your brand:

| Customization    | Options                |
| ---------------- | ---------------------- |
| **Button Color** | Any hex color          |
| **Button Icon**  | Custom icon or default |
| **Button Size**  | Small, medium, large   |
| **Button Text**  | Custom label           |
| **Theme**        | Light, dark, or custom |

### Custom Branding

```html theme={null}
<script
  src="https://unpkg.com/@cliniq360/eigi-widget@latest/dist/eigi-widget.js"
  data-agent-id="your-agent-id"
  data-button-color="#4F46E5"
  data-button-text="Talk to us"
  data-theme="dark"
  async
></script>
```

***

## Chat Fallback

### When Voice Isn't Available

Provide alternatives when voice isn't suitable:

<CardGroup cols={2}>
  <Card title="Text Chat" icon="comments">
    Type-based conversation with the same AI
  </Card>

  <Card title="Callback Request" icon="phone-arrow-down-left">
    Schedule a phone call for later
  </Card>
</CardGroup>

### Automatic Fallback

The widget can automatically offer chat when:

* Microphone access is denied
* Poor audio quality detected
* User prefers typing

***

## Proactive Engagement

### Triggering the Widget

Start conversations proactively:

| Trigger          | Use Case                               |
| ---------------- | -------------------------------------- |
| **Time on Page** | Open widget after 30 seconds           |
| **Scroll Depth** | Engage when user scrolls to pricing    |
| **Exit Intent**  | Catch users about to leave             |
| **Page Visit**   | Specific pages trigger specific agents |

### Programmatic Control

Control the widget with JavaScript:

```javascript theme={null}
// Open the widget
EigiWidget.open();

// Close the widget
EigiWidget.close();

// Open with specific message
EigiWidget.open({ message: "Hi, I need help with pricing" });

// Listen for events
EigiWidget.on("call.started", () => {
  console.log("Call started");
});
```

***

## Widget Analytics

### Track Engagement

Monitor widget performance:

| Metric              | Description                        |
| ------------------- | ---------------------------------- |
| **Widget Opens**    | How often visitors open the widget |
| **Calls Started**   | Conversations initiated            |
| **Avg. Duration**   | How long conversations last        |
| **Conversion Rate** | Leads captured from widget         |
| **Bounce Rate**     | Widget opened but no call started  |

### Conversion Tracking

Connect widget events to your analytics:

```javascript theme={null}
EigiWidget.on("call.completed", (data) => {
  // Send to Google Analytics
  gtag("event", "voice_call_completed", {
    duration: data.duration,
    outcome: data.outcome,
  });
});
```

***

## Mobile Experience

### Optimized for All Devices

<CardGroup cols={2}>
  <Card title="Responsive Design" icon="mobile">
    Adapts to any screen size
  </Card>

  <Card title="Touch Friendly" icon="hand-pointer">
    Easy tap targets for mobile users
  </Card>

  <Card title="Low Bandwidth" icon="signal">
    Works on slower connections
  </Card>

  <Card title="App-Like Feel" icon="window">
    Full-screen mode on mobile
  </Card>
</CardGroup>

***

## Multi-Language Support

### Global Visitors

Support visitors in their language:

| Setting            | Description                                         |
| ------------------ | --------------------------------------------------- |
| **Widget UI**      | Button text, loading messages in visitor's language |
| **Agent Language** | AI responds in the same language                    |
| **Auto-Detection** | Detect browser language automatically               |

***

## A/B Testing

### Optimize Your Widget

Test different configurations:

* Button colors and positions
* Proactive trigger timings
* Opening messages
* Agent personalities

Track which variations convert better and iterate.

***

## Best Practices

<Tip>
  **Prominent Placement**: Position the widget where it's visible but not
  intrusive.
</Tip>

<Tip>
  **Match Your Brand**: Use colors and messaging consistent with your website.
</Tip>

<Tip>
  **Set Expectations**: Use button text that tells visitors what will happen
  ("Talk to AI Assistant").
</Tip>

<Warning>
  Test the widget experience thoroughly on different browsers and devices before
  going live.
</Warning>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Widget not appearing">
    * Verify the script tag is in your HTML - Check that the agent ID is correct
    * Confirm no JavaScript errors in console - Ensure the agent is active and
      published
  </Accordion>

  <Accordion title="No audio / microphone issues">
    * Check browser has microphone permission - Verify HTTPS (required for
      microphone access) - Test microphone with other apps - Try a different
      browser
  </Accordion>

  <Accordion title="Video not working">
    * Confirm video avatar is configured - Check camera permissions in browser -
      Ensure sufficient bandwidth - Verify agent supports video mode
  </Accordion>

  <Accordion title="Poor audio quality">
    * Check internet connection stability - Close other apps using audio - Use
      headphones to prevent echo - Try a wired connection instead of WiFi
  </Accordion>
</AccordionGroup>