The SDK fits any UI. One required stylesheet, then full control — className, style, and CSS selectors.
Import this once in your app entry point. Without it, the avatar container, connectivity dot, and control buttons don't render correctly.
The canvas fills 100% of its parent container. Always give the parent explicit dimensions.
Without a sized parent, the canvas renders at zero dimensions and appears invisible. This is the most common setup mistake.
Pass className or style directly to the <Avatar> component to style its container div.
Captions, the status banner, and the thinking indicator each take a className
and a style prop on <Avatar>, so you can restyle them without reaching into
the SDK's own CSS.
Whether an overlay exists is a provider decision (transcript,
statusBanner, thinkingIndicator in the config); how it looks is an
Avatar prop. Styling an overlay you never enabled does nothing.
Overlays sit on top of an animated character, so test their contrast against the busiest frame, not a still one. Captions in particular are an accessibility feature — 4.5:1 against whatever moves behind them.
The dot is a DOM element with CSS classes you can target:
Colour alone is not an accessible status signal. If connection state matters to your users, pair the dot with text or an icon rather than relying on green-versus-red — roughly 1 in 12 men cannot reliably tell them apart.
Show or hide the floating start/stop buttons via the provider config:
controls is configured on <AvatarProvider> — not as a prop on <Avatar>.