Web Widget
This guide explains how to enable, customize, and embed the voice assistant widget on your website.
Go to Widget Configurations.
Toggle Widget Enabled to ON.
The widget is now active and ready for setup.
Configure how users interact with the widget:
Conversation Mode: Voice Only Determines whether sessions start in audio, text, or hybrid mode.
Widget Display Mode: Floating Popup Controls how the widget appears on the page (floating, collapsed, or full screen).
Icon Display: Static Icon Choose between a static icon or an animated indicator.
Adjust colors and styles to match your brand.
Color Settings
Background Color
Bubble Color
Text Color
Agent Chat Bubble
Speaker Chat Bubble
Agent Text
Speaker Text
Icon Settings
Icon Size
Animation Icon Size
Widget Animated Icon
Gradient Start
Gradient End
Show Chat Icon: toggle on/off
Icon title configuration
Display text next to the widget icon:
Title Text
Title Color
Title Size
Title Padding
Title Position
Keep title visible while agent is active: optional toggle
Custom icon upload
Use the Select File button to upload your own icon and replace the default widget icon.
Embed Code
Add the widget to your website by inserting the provided code snippet:
<dq-voice agent-id='[YOUR_AGENT_ID]' api-key='[YOUR_API_KEY]'></dq-voice>
<script [script_url]></script>
Place this snippet on any page where the widget should appear.
Position Settings
Choose from multiple position options to fit your site layout.
Configure text displayed inside the widget:
Title: "Voice Assistant"
Subtitle: "Click to start a conversation"
Speak With Agent Button: "Speak with agent"
Chat With Agent Button: "Chat with agent"
Implementation Steps
Enable the widget using the toggle.
Configure experience settings (mode, display, icon).
Customize appearance (colors, sizes, gradients).
Configure title text and positioning.
Upload a custom icon (optional).
Copy the embed code.
Paste it into your website’s HTML.
Adjust widget positioning.
Test the widget to confirm functionality.
Last updated