@cliniq360/eigi-chat

v1.9.0

Published

3 days ago

Embeddable AI chat dialog with voice and text capabilities

Downloads

1,102

0High
0Medium
0Low

mehul28

mrunmay.eigi

chat dialog ai voice embeddable widget eigi react pipecat daily

@cliniq360/eigi-chat

Embeddable AI chat dialog with voice and text capabilities. A standalone, lightweight web component for adding AI-powered conversations to any website.

npm version

✨ Features

🎯 Full-screen Dialog - Clean modal interface with Welcome, Chat, and Talk screens
💬 Text Chat - Real-time chat with streaming AI responses
🎤 Voice Calls - Live voice conversations powered by Pipecat + Daily
🎨 Themeable - Automatically applies your agent's theme configuration
🔒 CSS Isolated - Uses Shadow DOM to prevent style conflicts with host page
📦 Self-contained - Single script bundle, no external dependencies at runtime
🌐 Universal - Works on any website, CMS, or no-code platform

📦 Installation

Via CDN (Recommended)

<eigi-chat agent-id="YOUR_AGENT_ID"></eigi-chat>
<script src="https://unpkg.com/@cliniq360/eigi-chat@latest/dist/eigi-chat.js"></script>

Via NPM

npm install @cliniq360/eigi-chat

import '@cliniq360/eigi-chat';

🚀 Quick Start

Basic HTML Usage

<!DOCTYPE html>
<html>
<body>
  <button onclick="window.EigiChat.open()">Chat with AI</button>
  <eigi-chat agent-id="YOUR_AGENT_ID"></eigi-chat>
  <script src="https://unpkg.com/@cliniq360/eigi-chat@latest/dist/eigi-chat.js"></script>
</body>
</html>

Auto-Initialize from Script Tag

<script 
  src="https://unpkg.com/@cliniq360/eigi-chat@latest/dist/eigi-chat.js"
  data-agent-id="YOUR_AGENT_ID"
  data-metadata='{"userId": "123", "sessionId": "abc"}'
></script>

📖 Global JavaScript API (window.EigiChat)

The widget exposes a global window.EigiChat object with the following methods:

Core Methods

| Method | Description | Returns | |--------|-------------|---------| | open() | Opens the dialog to the Welcome screen | void | | close() | Closes the dialog | void | | toggle() | Toggles the dialog open/close | void | | isOpen() | Checks if the dialog is currently open | boolean |

Direct Screen Access

| Method | Description | Returns | |--------|-------------|---------| | openChat() | Opens directly to Chat screen (text mode) | void | | openTalk() | Opens directly to Talk screen (voice mode) | void |

Initialization

| Method | Description | Returns | |--------|-------------|---------| | init({ agentId, metadata }) | Initialize with agent ID and optional metadata | void |

Example Usage

// Open the chat dialog
window.EigiChat.open();

// Close the dialog
window.EigiChat.close();

// Toggle open/close
window.EigiChat.toggle();

// Check if open
if (window.EigiChat.isOpen()) {
  console.log('Chat is open');
}

// Skip welcome screen and go directly to chat
window.EigiChat.openChat();

// Skip welcome screen and start a voice call
window.EigiChat.openTalk();

// Initialize programmatically (creates element if needed)
window.EigiChat.init({
  agentId: 'YOUR_AGENT_ID',
  metadata: {
    userId: '12345',
    sessionId: 'session-abc',
    customField: 'any data you need'
  }
});

🏷️ HTML Element Attributes

Element

| Attribute | Type | Required | Description | |-----------|------|----------|-------------| | agent-id | string | Yes | Your Eigi agent ID | | metadata | JSON string | No | Additional metadata to send with messages | | action | string | No | Trigger actions via attributes (for platforms that can't call JS) |

Action Attribute Values

For platforms like Wix that can't directly call JavaScript methods, you can use the action attribute:

| Action Value | Effect | |--------------|--------| | open | Opens the dialog | | close | Closes the dialog | | toggle | Toggles the dialog | | openChat | Opens directly to chat screen | | openTalk | Opens directly to voice call screen |

// Example: Setting action via JavaScript
document.querySelector('eigi-chat').setAttribute('action', 'open');

🎨 Dialog Screens

Welcome Screen

Shows the agent's avatar, name, and two call-to-action buttons:

Talk - Start a voice conversation
Chat - Start a text conversation

Chat Screen

Text-based chat interface with:

Message bubbles (user on right, agent on left)
Text input with send button
Switch to voice button in header
Streaming responses

Talk Screen

Voice call interface with:

Agent avatar with connection status indicator
Real-time transcripts (if enabled)
Mute/unmute button
End call button

🔌 Integration Examples

Vanilla JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="chat-btn" style="
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  ">
    💬 Chat with Us
  </button>

  <eigi-chat agent-id="YOUR_AGENT_ID"></eigi-chat>
  <script src="https://unpkg.com/@cliniq360/eigi-chat@latest/dist/eigi-chat.js"></script>

  <script>
    document.getElementById('chat-btn').addEventListener('click', function() {
      window.EigiChat.open();
    });
  </script>
</body>
</html>

React

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://unpkg.com/@cliniq360/eigi-chat@latest/dist/eigi-chat.js'\;
    document.body.appendChild(script);

    const chat = document.createElement('eigi-chat');
    chat.setAttribute('agent-id', 'YOUR_AGENT_ID');
    document.body.appendChild(chat);

    return () => {
      script.remove();
      chat.remove();
    };
  }, []);

  return (
    <button onClick={() => window.EigiChat?.open()}>
      Open Chat
    </button>
  );
}

Vue.js

<template>
  <button @click="openChat">Open Chat</button>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://unpkg.com/@cliniq360/eigi-chat@latest/dist/eigi-chat.js'\;
    document.body.appendChild(script);

    const chat = document.createElement('eigi-chat');
    chat.setAttribute('agent-id', 'YOUR_AGENT_ID');
    document.body.appendChild(chat);
  },
  methods: {
    openChat() {
      window.EigiChat?.open();
    }
  }
}
</script>

Next.js

'use client';
import { useEffect } from 'react';
import Script from 'next/script';

export default function ChatWidget() {
  useEffect(() => {
    const chat = document.createElement('eigi-chat');
    chat.setAttribute('agent-id', 'YOUR_AGENT_ID');
    document.body.appendChild(chat);
    return () => chat.remove();
  }, []);

  return (
    <>
      <Script 
        src="https://unpkg.com/@cliniq360/eigi-chat@latest/dist/eigi-chat.js"
        strategy="lazyOnload"
      />
      <button onClick={() => window.EigiChat?.open()}>
        Open Chat
      </button>
    </>
  );
}

🌐 No-Code Platform Integration

Wix

Wix runs Velo code in a sandboxed worker that cannot access window.EigiChat directly. Use the HTML Component Bridge pattern:

Step 1: Add Custom Code (Body End)

Go to Settings → Custom Code → Body End and add:

<script src="https://unpkg.com/@cliniq360/eigi-chat@latest/dist/eigi-chat.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var chat = document.createElement("eigi-chat");
    chat.setAttribute("agent-id", "YOUR_AGENT_ID");
    document.body.appendChild(chat);

    window.addEventListener("message", function(event) {
      if (event.data) {
        if (event.data.type === "eigiChatOpen" && window.EigiChat) {
          window.EigiChat.open();
        }
        if (event.data.type === "eigiChatClose" && window.EigiChat) {
          window.EigiChat.close();
        }
        if (event.data.type === "eigiChatOpenChat" && window.EigiChat) {
          window.EigiChat.openChat();
        }
        if (event.data.type === "eigiChatOpenTalk" && window.EigiChat) {
          window.EigiChat.openTalk();
        }
      }
    });
  });
</script>

Step 2: Add HTML Component Bridge

Add an Embed HTML component (can be 1x1 pixel, hidden):

<script>
  window.onmessage = function(event) {
    if (event.data) {
      if (event.data.type === "openEigiChat") {
        window.parent.postMessage({ type: "eigiChatOpen" }, "*");
      }
      if (event.data.type === "closeEigiChat") {
        window.parent.postMessage({ type: "eigiChatClose" }, "*");
      }
      if (event.data.type === "openEigiChatDirect") {
        window.parent.postMessage({ type: "eigiChatOpenChat" }, "*");
      }
      if (event.data.type === "openEigiTalkDirect") {
        window.parent.postMessage({ type: "eigiChatOpenTalk" }, "*");
      }
    }
  };
</script>

Step 3: Add Velo Code

$w.onReady(function () {
  $w("#chatButton").onClick(() => {
    $w("#html1").postMessage({ type: "openEigiChat" });
  });

  $w("#closeButton").onClick(() => {
    $w("#html1").postMessage({ type: "closeEigiChat" });
  });

  $w("#textChatButton").onClick(() => {
    $w("#html1").postMessage({ type: "openEigiChatDirect" });
  });

  $w("#voiceCallButton").onClick(() => {
    $w("#html1").postMessage({ type: "openEigiTalkDirect" });
  });
});

Replace #html1 with your actual HTML component ID.

Squarespace

Add via Code Injection (Settings → Advanced → Code Injection → Footer):

<eigi-chat agent-id="YOUR_AGENT_ID"></eigi-chat>
<script src="https://unpkg.com/@cliniq360/eigi-chat@latest/dist/eigi-chat.js"></script>

<button onclick="window.EigiChat.open()" style="
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 16px 24px;
  background: #3B82F6;
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  z-index: 9999;
  font-size: 16px;
">
  💬 Chat
</button>

WordPress

Add to your theme's footer or use "Insert Headers and Footers" plugin:

<eigi-chat agent-id="YOUR_AGENT_ID"></eigi-chat>
<script src="https://unpkg.com/@cliniq360/eigi-chat@latest/dist/eigi-chat.js"></script>

<script>
  document.querySelectorAll('.open-chat').forEach(function(el) {
    el.addEventListener('click', function() {
      window.EigiChat.open();
    });
  });
</script>

Then add class="open-chat" to any button or link in WordPress editor.

Webflow

Add to Site Settings → Custom Code → Footer Code:

<eigi-chat agent-id="YOUR_AGENT_ID"></eigi-chat>
<script src="https://unpkg.com/@cliniq360/eigi-chat@latest/dist/eigi-chat.js"></script>

Then add custom attribute to your button: onclick = window.EigiChat.open()

Shopify

Add to Themes → Edit Code → theme.liquid (before </body>):

<eigi-chat agent-id="YOUR_AGENT_ID"></eigi-chat>
<script src="https://unpkg.com/@cliniq360/eigi-chat@latest/dist/eigi-chat.js"></script>

Framer

Add to Site Settings → Custom Code → End of body:

<eigi-chat agent-id="YOUR_AGENT_ID"></eigi-chat>
<script src="https://unpkg.com/@cliniq360/eigi-chat@latest/dist/eigi-chat.js"></script>

Then use Embed component with:

<button onclick="window.parent.EigiChat?.open()" style="
  padding: 16px 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
">
  Chat with Us
</button>

Carrd

Add an Embed element with:

<eigi-chat agent-id="YOUR_AGENT_ID"></eigi-chat>
<script src="https://unpkg.com/@cliniq360/eigi-chat@latest/dist/eigi-chat.js"></script>
<button onclick="window.EigiChat.open()" style="
  padding: 12px 24px;
  background: #3B82F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
">
  Chat Now
</button>

🛡️ Shadow DOM & CSS Isolation

This widget uses Shadow DOM to completely isolate its styles:

✅ Your page's CSS will not affect the widget
✅ The widget's CSS will not leak to your page
✅ Multiple widgets can coexist without conflicts
✅ Theme is applied via CSS custom properties

📱 Browser Support

| Browser | Version | |---------|---------| | Chrome | 73+ | | Safari | 16.4+ | | Firefox | 101+ | | Edge | 79+ |

Older browsers use a fallback method for CSS injection.

🔧 Advanced Configuration

Passing Custom Metadata

Send additional context with every chat/call:

<eigi-chat 
  agent-id="YOUR_AGENT_ID" 
  metadata='{"userId": "user123", "plan": "premium", "page": "pricing"}'
></eigi-chat>

Or programmatically:

window.EigiChat.init({
  agentId: 'YOUR_AGENT_ID',
  metadata: {
    userId: 'user123',
    plan: 'premium',
    page: window.location.pathname
  }
});

Dynamic Agent Switching

window.EigiChat.init({
  agentId: 'DIFFERENT_AGENT_ID'
});

🛠️ Development

npm install       # Install dependencies
npm run dev       # Start development server
npm run build     # Build for production
npm run preview   # Preview production build

📄 License

MIT © eigi.ai

🆘 Support

Documentation: https://docs.eigi.ai
Issues: GitHub Issues
Email: [email protected]

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@cliniq360/eigi-chat

✨ Features

📦 Installation

Via CDN (Recommended)

Via NPM

🚀 Quick Start

Basic HTML Usage

Auto-Initialize from Script Tag

📖 Global JavaScript API (window.EigiChat)

Core Methods

Direct Screen Access

Initialization

Example Usage

🏷️ HTML Element Attributes

Element

Action Attribute Values

🎨 Dialog Screens

Welcome Screen

Chat Screen

Talk Screen

🔌 Integration Examples

Vanilla JavaScript

React

Vue.js

Next.js

🌐 No-Code Platform Integration

Wix

Step 1: Add Custom Code (Body End)

Step 2: Add HTML Component Bridge

Step 3: Add Velo Code

Squarespace

WordPress

Webflow

Shopify

Framer

Carrd

🛡️ Shadow DOM & CSS Isolation

📱 Browser Support

🔧 Advanced Configuration

Passing Custom Metadata

Dynamic Agent Switching

🛠️ Development

📄 License

🆘 Support