← Examples

Floating Orb Card TS Source

The Deepgram orb in a floating card anchored to the bottom-right corner. The orb animates with voice — idle crescent, listening circle, talking mouth.

Code

import { init } from '@deepgram/agent-widget';

init({
  tokenFactory: () => fetch('/api/token').then(r => r.json()).then(d => d.token),
  agent: { /* ... */ },
  layout: 'orb',
  containerId: 'agent-orb',
});

The floating card is plain CSS — the widget mounts inside it.

Page content

This example shows the orb widget mounted inside a fixed-position card. The card floats in the bottom-right corner while the page content scrolls underneath.

The orb reacts to your voice when listening (circle pulses with mic volume) and shows a mouth shape when the agent speaks (opens and closes with output volume).

Try scrolling — the card stays anchored. Click "Talk to our agent" to start a conversation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.