Skip to main content

​
Overview

The eigi.ai Web Widget brings your voice AI agent directly to your website. With a simple embed code, visitors can start voice conversations, chat via text, and even share their screen—all without leaving your page.
See it in action! Visit eigi.ai to experience the widget live, or embed it on your own website using the code below.

​
Quick Start

​
Step 1: Configure Your Widget

From your eigi.ai Dashboard, navigate to your agent and select the Widget tab. Customize the appearance and behavior to match your brand.

​
Step 2: Copy the Embed Code

Once configured, copy the generated script tag: 
<eigi-widget agent-id="YOUR_AGENT_ID"></eigi-widget>
<script src="https://unpkg.com/@cliniq360/eigi-widget@latest/dist/eigi-widget.js"></script>

​
Step 3: Add to Your Website

Paste the code before the closing </body> tag of your HTML page, or inside your site’s layout file if using a framework like React, Next.js, or Vue.

​
Configuration Options

​
Widget Placement

Control where the widget appears on your page:
PositionDescription
bottom-rightDefault position, lower right corner
bottom-leftLower left corner
top-rightUpper right corner
top-leftUpper left corner

​
Widget Variants

Choose the widget style that fits your design:

Compact

Minimal footprint, expands on click

Medium

Balanced size with visible prompt

Full

Expanded view with chat history

​
Customization

​
Theme & Colors

Personalize every aspect of the widget appearance:
  • Primary Color: Main accent color for buttons and highlights - Secondary Color: Supporting color for secondary elements - Accent Color: Color for special emphasis and calls-to-action
  • User Message Background: Color for messages sent by visitors - Bot Message Background: Color for agent responses - System Message: Color for system notifications
  • Font Family: Choose from system fonts or custom web fonts - Font Sizes: Adjust text sizing to match your site - Text Colors: Primary, secondary, and muted text options
  • Border Radius: Control rounded corners (0-24px) - Message Box Size: Compact, medium, or expanded - Background Colors: Light and dark theme support

​
Avatar Options

Configure how your agent is visually represented:
TypeDescription
OrbAnimated gradient orb with customizable colors
ImageUpload a custom avatar image or logo

​
Features

​
Voice Calls

Enable real-time voice conversations:
1

User Clicks Widget

Visitor clicks the widget button to initiate a call
2

Microphone Permission

Browser requests microphone access (one-time)
3

Conversation Begins

Agent greets the user and the conversation flows naturally

​
Text Chat

Allow visitors to type messages: 
<eigi-widget agent-id="YOUR_AGENT_ID" enable-chat="true"></eigi-widget>
Features include:
  • Real-time message streaming
  • Typing indicators
  • Message history within the session

​
Screen Sharing

Enable visitors to share their screen during calls (perfect for support scenarios):
  • Screen Share: Share entire screen or specific window
  • Camera: Enable video for face-to-face interactions
  • Works seamlessly with voice calls

​
Real-Time Transcripts

Display live conversation transcripts during voice calls, so users can follow along visually while speaking.

​
Advanced Configuration

​
Passing Metadata

Send custom data to your agent for personalized experiences: 
<eigi-widget
  agent-id="YOUR_AGENT_ID"
  metadata='{"user_id": "12345", "plan": "premium", "name": "John Doe"}'
></eigi-widget>
Your agent receives this metadata with every interaction, enabling:
  • Personalized greetings
  • Access to user account information
  • Custom conversation flows based on user segments

​
Terms & Conditions

Display terms and conditions before starting a conversation:
  • Enable/disable T&C requirement
  • Customize the content
  • User must accept before proceeding

​
Auto-Connect

Configure the widget to start a call automatically when it loads:
  • Great for dedicated support pages
  • Immediate engagement for landing pages

​
Framework Integration

​
React

import "@cliniq360/eigi-widget";

function SupportPage() {
  return (
    <div>
      <h1>Need Help?</h1>
      <eigi-widget agent-id="YOUR_AGENT_ID" />
    </div>
  );
}

​
Next.js

// In your layout or page component
import Script from "next/script";

export default function Layout({ children }) {
  return (
    <>
      {children}
      <eigi-widget agent-id="YOUR_AGENT_ID" />
      <Script
        src="https://unpkg.com/@cliniq360/eigi-widget@latest/dist/eigi-widget.js"
        strategy="lazyOnload"
      />
    </>
  );
}

​
Vue

<template>
  <div>
    <eigi-widget agent-id="YOUR_AGENT_ID"></eigi-widget>
  </div>
</template>

<script>
import "@cliniq360/eigi-widget";
export default {
  name: "SupportWidget",
};
</script>

​
Use Cases

Customer Support

Add instant voice support to your help center. Visitors get immediate assistance without waiting for emails or tickets.

Sales Qualification

Engage website visitors in conversation to qualify leads and schedule demos automatically.

Product Guidance

Help users navigate your product or service with voice-guided assistance.

Appointment Booking

Let visitors book appointments directly through voice conversation on your site.

​
Best Practices

Placement Matters: Position the widget where it’s visible but not obtrusive. Bottom-right is the most common and expected location.
Brand Consistency: Match the widget colors to your website’s color scheme for a seamless experience.
Idle Prompts: Configure engaging idle messages that encourage visitors to interact (“Need help? Just ask!”).
Ensure your privacy policy covers AI conversations and data collection from the widget.

​
Troubleshooting

  • Verify the agent ID is correct - Check browser console for errors - Ensure the script is loaded after the widget element
  • User must grant microphone permission - HTTPS is required for microphone access - Check if another app is using the microphone
The widget uses Shadow DOM for style isolation. If issues persist, check for aggressive CSS resets on your site.

Need Help?

Contact our support team for assistance with widget integration