Skip to main content
The AmpUp Chat Widget is a drop-in React component that adds AI-powered voice and text chat to any website. It connects to ElevenLabs Conversational AI agents and provides a branded chat interface with both voice calling and text messaging.

​
Prerequisites

React 18 or higher
An ElevenLabs Conversational AI agent ID

​
Installation

Install the package from npm: 
npm install @ampup/chat-widget
The widget requires react and react-dom as peer dependencies. If your project doesn’t already have them:
npm install react react-dom

​
Quick Start

Import the component and render it anywhere in your app: 
import { ChatWidget } from "@ampup/chat-widget";

function App() {
  return <ChatWidget agentId="your_elevenlabs_agent_id" />;
}
A floating chat button appears in the bottom-right corner. Users can click it to open the widget and choose between voice call or text chat to interact with your AI agent.

​
How It Works

  1. The <ChatWidget> uses the useConversation hook from @elevenlabs/react to manage two separate sessions — one for voice calls and one for text chat.
  2. A WebSocket proxy intercepts the ElevenLabs connection to read transcripts and inject context updates in real time.
  3. The widget renders a complete chat UI — floating action button, agent card with avatar, voice call controls with timer, and a full text chat interface — all as inline React components.

​
Features

Voice Calls

One-click voice calls with real-time audio visualization, call timer, and automatic transcript capture.

Text Chat

Full text chat with message bubbles, typing input, and real-time agent responses.

SPA Navigation

Built-in navigateToPage and scrollToSection client tools let the agent navigate users around your app.

Dynamic Context

Pass dynamic variables to your agent so it has context about the current user, page, or application state.