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

Last updated