# Widget The **Widget** channel is used to embed an interactive chat directly on your website or system. #### Steps to Create 1. Select **Type: Widget**. 2. Name the channel (e.g., *Official Widget*). 3. Assign a responder (Agent or Squad). 4. Optionally, add a custom prompt. 5. Set the response delay. 6. Click **Create Channel**. Once created, the channel exposes a **Widget Configuration Page** containing: | Section | Description | | ------------------------- | ---------------------------------------------------------------------------- | | **Configuration Code** | JavaScript snippet that must be copied and pasted into your site or web app. | | **Theme Controls** | Switch between **Light Mode** and **Dark Mode** versions. | | **Customization Options** | Modify colors for background, text, and buttons. | | **Open on Load** | Option to auto-open the widget when the page loads. | ```html ``` > ⚙️ Use the “Copy” button to copy the full script into your HTML `` section.\ > Once deployed, your website visitors will be able to chat directly with your Agent. ## **Customization Notes** For **Widget Channels**, Zaia provides a live customization environment: * Modify message bubble colors and text colors. * Adjust button color to match your branding. * Switch between Light and Dark previews. * Instantly preview all UI changes before saving. Each customization option is applied independently per channel, allowing multiple widget styles for different sites or environments. --- # 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://docs.zaia.app/channels/channel-types/widget.md?ask= ``` 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.