> 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

<figure><img src="/files/I18QlRuG15z8V2sxPYyL" alt=""><figcaption></figcaption></figure>

## Creating Widgets

### Step 1: Configure Core Settings

Click "New" to create a widget and set up basic information for identification and deployment.

<figure><img src="/files/b2prQUdJtxGsh6pexx24" alt=""><figcaption></figcaption></figure>

#### Widget Name

Enter a descriptive identifier for internal management and organization of multiple widgets.

#### Website Domain&#x20;

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.

<figure><img src="/files/XQYmfE1nK2tk6IS9cZBO" alt=""><figcaption></figcaption></figure>

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

Configure the widget launcher with your logo upload (24x24px transparent PNG) and choose between Compact (logo only) or Extended (logo with text) variants.

#### Spacing&#x20;

Adjust side spacing and bottom spacing (default 24px) to position the widget button optimally on your website.

#### Appearance&#x20;

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.

<figure><img src="/files/jrhMcGuMJ82UCRyfLYW1" alt=""><figcaption></figcaption></figure>

#### 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.

<figure><img src="/files/TyTxmd7D4kqCeziyyIzs" alt=""><figcaption></figcaption></figure>

#### 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.

<figure><img src="/files/JNxcoAzGOkqZAnthfa2P" alt=""><figcaption></figcaption></figure>

#### Copy HTML Code

Get the auto-generated script tags containing your unique widget ID and configuration settings.

#### Embed on Website&#x20;

Paste the code before the closing `</head>` 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.