> For the complete documentation index, see [llms.txt](https://angoor-ai.gitbook.io/angoor-ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://angoor-ai.gitbook.io/angoor-ai/basics/configuration/widget.md).
# Widget
The Widgets section enables you to create customizable chat interfaces that embed AI-powered assistants on your website, providing instant customer support and engagement through beautifully designed conversational experiences.
## Widgets Dashboard
The main dashboard displays all created widgets with essential information:
* **Name:** Unique identifier for each widget
* **Website Domain:** The website URL where the widget is deployed
## Creating Widgets
### Step 1: Configure Core Settings
Click "New" to create a widget and set up basic information for identification and deployment.
#### Widget Name
Enter a descriptive identifier for internal management and organization of multiple widgets.
#### Website Domain
Specify the exact URL where the widget will be embedded to ensure proper functionality and security.
### Step 2: Customize Visual Styling
Navigate to the Styling tab to design your widget's appearance to match your brand identity.
#### Brand Color
Select from preset colors or add custom colors that will be applied to headers, buttons, and accent elements throughout the widget.
#### Floating Button
Configure the widget launcher with your logo upload (24x24px transparent PNG) and choose between Compact (logo only) or Extended (logo with text) variants.
#### Spacing
Adjust side spacing and bottom spacing (default 24px) to position the widget button optimally on your website.
#### Appearance
Upload your company logo for the chat interface and select between Default (system preference), Light, or Dark themes.
### Step 3: Enable Content Sections
Use the Sections tab to toggle which features are available to your website visitors.
#### Home Section
Enable the landing view that displays welcome message and quick action options when users first open the widget.
#### **Conversations Section (Coming soon)**
Toggle to show previous interactions and ongoing conversations for returning users to maintain context.
#### Tickets Section **(Coming soon)**
Activate support ticket functionality allowing users to create and track formal support requests.
#### **Knowledge Section** **(Coming soon)**
Enable self-service help center displaying articles and FAQs for instant answers to common questions.
### Step 4: Configure Layout Content
Set up the Layout tab to create engaging content and interactions within your widget.
#### Header Text
Customize the widget header (30 character limit) that appears at the top of the chat window to set the greeting tone.
#### Greeting Text
Write your welcome message using the rich text editor with full formatting options, links, lists, and emoji support for friendly communication.
#### Quick CTAs
Add call-to-action buttons with Title, Subtitle, and pre-configured Reply text to help users quickly access common information or start specific conversations.
#### Cards
Create visual information cards with Title, Description, and optional Cover Image to showcase products, services, or important information prominently.
### Step 5: Implement on Your Website
Access the Integration tab to get your unique embed code and deploy the widget.
#### Copy HTML Code
Get the auto-generated script tags containing your unique widget ID and configuration settings.
#### Embed on Website
Paste the code before the closing `` tag on all pages where you want the widget to appear.
#### **Test Functionality**
Refresh your website to verify the widget loads correctly and test all interactive elements across different pages and devices.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://angoor-ai.gitbook.io/angoor-ai/basics/configuration/widget.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.