# 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="https://1498739645-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9LCwJgTgcJ0hBsgJLqUA%2Fuploads%2FI1zvdnRAgRuYHVwF5JYm%2Fimage.png?alt=media&#x26;token=17b342eb-fff8-4baa-857a-c325ee63cdea" 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="https://1498739645-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9LCwJgTgcJ0hBsgJLqUA%2Fuploads%2FqvLgYaQkWUrl8fB7miUk%2Fimage.png?alt=media&#x26;token=552950d1-5182-460b-a42d-f046c8b39dcc" 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="https://1498739645-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9LCwJgTgcJ0hBsgJLqUA%2Fuploads%2F7VT2K2LTeszQDwCoQeGH%2Fimage.png?alt=media&#x26;token=4e8b4502-7881-49f7-be95-4abeaf13d3bd" 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="https://1498739645-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9LCwJgTgcJ0hBsgJLqUA%2Fuploads%2FVe3LJMllrrcE96j667f8%2Fimage.png?alt=media&#x26;token=c362ea29-f25f-4d15-9093-18212b7aa52e" 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="https://1498739645-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9LCwJgTgcJ0hBsgJLqUA%2Fuploads%2FcoRrBVX5GHALCVHiLqjA%2Fimage.png?alt=media&#x26;token=50088b1d-644b-459a-9833-31804059fbaf" 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="https://1498739645-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9LCwJgTgcJ0hBsgJLqUA%2Fuploads%2FnNclPDxVi3tiPxGUyh1G%2Fimage.png?alt=media&#x26;token=c6bb9deb-d3e6-46f3-ab56-b0c3f08222a0" 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.
