# Web Widget

This guide explains how to enable, customize, and embed the voice assistant widget on your website.

1. Go to Widget Configurations.
2. Toggle Widget Enabled to ON.
3. 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.\
  ![](/files/5Hv8srovivTDVFtK0J75)

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.

![](/files/pDHWrffFV74xi19OuZn4)

#### Position Settings&#x20;

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&#x20;

1. Enable the widget using the toggle.
2. Configure experience settings (mode, display, icon).
3. Customize appearance (colors, sizes, gradients).
4. Configure title text and positioning.
5. Upload a custom icon (optional).
6. Copy the embed code.
7. Paste it into your website’s HTML.
8. Adjust widget positioning.
9. Test the widget to confirm functionality.\ <br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dataqueue.gitbook.io/voicehub-docs/agent-design-and-usage/embed-with-web-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.