Widget | Yaplet

Configuration Tabs

Appearance Tab

Customize your widget's visual design including colors, backgrounds, and UI elements.

Branding

Upload custom logo and avatar images for your widget.

Theme & Colors

Comprehensive color system with templates and auto-generation.

Home Screen

Style the initial screen with various background effects.

Launcher

Configure the floating chat button position and icon.

Branding

Upload and manage your widget's visual identity:

Default Logo - Main company logo displayed in the widget header
Bot Avatar - Profile picture for the AI chatbot

Theme & Colors

Choose from Templates

Use pre-built color schemes or create your own. Templates provide professionally designed color combinations for different brands and styles.

Set Primary Colors

Configure the two main colors that define your theme:

Background - Primary background color
Accents - Secondary UI elements and highlights

Auto-Generate Sub-Colors

Click the sparkles icon to automatically generate all supporting colors (text, borders, buttons, etc.) that harmonize with your main colors.

Fine-Tune Advanced Colors

Expand the "Advanced Colors" section to manually adjust individual color properties for precise control over your widget's appearance.

The auto-generation feature analyzes your main colors and creates appropriate variations for optimal readability and visual hierarchy.

Home Screen

Choose from multiple background styles with unique visual effects

Some background styles include additional highlight colors that can be customized for enhanced visual impact.

Templates are available for home screen colors too, and you can sync the color scheme between home and general sections when applying templates.

Launcher

Position your chat button and choose its icon style:

Position - Bottom-right or bottom-left corner
Icon - Message bubble or AI-themed icon

General Tab

Basic Info

Set widget name and primary language.

Widget URL

Critical identifier for hosted content pages.

Connections

Integrate with Yaplet services and content.

Basic Settings

Widget Name - Internal identifier for your widget
Primary Language - Interface language (English, Hungarian, more coming soon)

The Widget ID/URL is crucial as it forms the base URL for your hosted knowledge base and documentation pages. Changing this identifier will break any existing hardcoded links to those resources.

Plan your widget URL carefully - it's intended to be permanent and affects all public-facing content links.

Connections

Link your widget to powerful Yaplet services:

AI Chatbot

Connect a VEX AI agent for automated customer conversations.

Knowledge Base

Link articles for instant AI-powered answers.

Documentation

Display technical docs within the widget.

Roadmap

Show feature requests and product roadmap.

How Connections Work:

AI Chatbot - Becomes the primary responder for visitor conversations, handling inquiries with natural language responses
Knowledge Base - Enables article search and display within the widget, plus automatically teaches all content to the connected AI for intelligent responses
Documentation - Trains the AI with technical content and optionally shows navigation links on the knowledge base home page
Roadmap - Adds a menu item to display feature requests and development progress

Each connection triggers background processes to prepare content and update the widget's capabilities.

Home Tab

Design your widget's home screen with customizable content cards and messaging.

Screen Settings

Global home screen configuration.

Content Cards

Interactive elements for user engagement.

Screen Settings

Menu Title - Text shown in the bottom navigation
Greeting Message - Large welcome text (e.g., "Hi there 👋")
Welcome Message - Subtitle below greeting
Show Team - Display agent avatars
Hide Branding - Remove "Powered by Yaplet" text

Content Cards

Add interactive cards that guide users to different features:

Message

Direct button to start a conversation.

Help Articles

Display top knowledge base articles (requires Knowledge Base connection).

Messages Tab

Configure chat interface behavior and user experience.

Reply Time

Select

Set expected response time indicators (e.g., "Typically replies instantly", "Usually replies in a few hours").

Email Collection

Toggle

Optionally collect visitor email addresses.

Feedback System

Configuration

Enable post-conversation rating and feedback collection.

Features Tab

Enable and configure additional widget capabilities.

News Section

Display company news and announcements.

Roadmap Viewer

Show feature requests and development roadmap.

Help Center

Provide access to knowledge base articles and documentation.

Real-Time Preview

All changes update the preview instantly, except for AI connections which require saving.

The preview panel shows your widget exactly as visitors will see it. Changes to:

Colors and appearance
Home screen layout
Message settings

Update immediately. Changes to AI connections, knowledge bases, and documentation require saving to take effect.

Embed Integration

Access the embed script from the top-right "Embed" button to integrate your widget into any website.

The embed script initializes the Yaplet widget with your specific configuration. Simply copy and paste it before the closing </body> tag on your website.