ElevenLabs Voice — AI voice & text chat for your Framer sit

Features

• 🎙️ Real-time voice conversations powered by ElevenLabs

• 💬 Text chat with markdown support

• 🎨 Fully customizable — colors, fonts, borders, corner radius

• 🔥 WebGL audio-reactive heatmap visualizer on trigger button

• 📱 Mobile overlay mode (80% height, bottom-anchored)

• 🧠 Page-aware context sharing — agent knows what page visitors are on

• 🧭 Agent-driven navigation — agent can navigate visitors to any page

• 🔊 Custom sound effects for each connection state

• ⚡ Voice settings — interruption control, turn eagerness, VAD threshold

Setup

1. Drop the component onto your page

2. Enter your ElevenLabs Agent ID

3. Customize colors and layout in the properties panel

4. Publish — your AI assistant is live

Get your Agent ID Sign up at https://try.elevenlabs.io/hlxl3hypn71z and create a Conversational AI agent. Copy the Agent ID from your dashboard.

Display Modes

• Default — floating chat window, ideal for desktop

• Mobile Overlay — 80% height bottom sheet, perfect for mobile

Customization & Support For custom integrations, contact

ed@skai.dev