Voice UI Customization
Control how users speak and listen to your AI agent. Configure sizes, visuals, waveform appearance, and widget behavior so the voice UI matches your product’s tone and accessibility needs.
Widget size
The Voice Widget can be tailored to fit the look and feel of your website with just a few quick adjustments. You can choose the overall widget size and the shape style, and both of these options apply to the two main widget elements:
- The primary voice panel — where the 3D avatar, soundwave, language selector, and visual elements appear.
- The launcher button — the smaller widget that users click to open the main voice panel.
Both elements automatically adjust based on the size and shape you select.
Select Size
You can pick from three preset sizes, depending on how compact or prominent you want the voice widget to appear:
- Small – the most compact option for minimal layouts or tight spaces.
- Medium – a balanced size that fits comfortably on most websites.
- Large – ideal when you want the voice agent to stand out more visually.
Select Shape
To match your brand style, you can choose from multiple shape styles. Each shape changes the look of both the launcher button and the main voice panel:
- Rounded
- Square
- Pill
- Circle
- Dashed
- Double Border
- Shadow
- Outline
In short, these size and shape options let you decide whether your voice widget should look clean and simple, bold and eye-catching, or somewhere in between — all without any technical effort.
Launcher Widget Style
The Launcher Widget Style section lets you fine-tune how your voice agent’s launch button looks and feels. This button is what users click to open the full voice panel, so you can shape it to match your website’s design perfectly.
Select Style
You can choose between two ready-made launcher styles:
- Style 1 – clean and minimal
- Style 2 – slightly more expressive
Both styles adjust the layout of the launcher button and how the mic icon is displayed.
Button Size
You can pick from three preset button sizes:
- 1 – compact
- 2 – medium
- 3 – large
Each size changes how big the launcher button appears on the screen, so you can choose what blends best with your page.
Custom Colors
To match your brand, you can set your own colors:
- Custom Button Color – changes the launcher’s background color
- Custom Button Text Color – updates the text label and the mic icon color
Both colors apply instantly, giving you full control over the button’s visual style.
Button Shape
You can choose the outline style you want for your launcher button. Each shape gives the button a different personality — clean, playful, sharp, or soft. Pick the one that feels right for your design.
Mic Icon Style
The launcher includes a microphone icon, and you can choose how it appears:
- Classic – simple, familiar look
- Shadow – adds depth for a more modern feel
- Hexagon – a bold, geometric style
These mic styles give you one more way to customize how your voice widget stands out.
Background
The Background Color setting lets you match the voice widget to your website’s design. Simply choose any custom color, and it will apply to both the launcher widget and the main widget panel. Pick a shade that blends smoothly with your site’s overall look
Waveform Style
The Waveform Style setting controls how the voice activity looks inside the widget. You can choose from the available animated waveforms—both video and image-based—that react to the TTS audio in real time. If you prefer something more branded, you can also upload your own logo or artwork to use as the waveform display. This gives you full freedom to match the visual style of your voice agent with your brand identity.
widget icons
Cover docked vs. floating modes, edge attachment, entry/exit animations, and collapsed states. Recommend sensible defaults and explain how to expose options via props or CSS variables.