Widget | Yaplet

Creating a New Widget

Click Add new on the Widgets page to open the creation modal. You can choose between:

AI Setup — provide your website URL and let AI configure colors, branding, and companions automatically
Default / Color Template — pick a preset color theme (or start blank) and move to the companion checklist

Both paths show a widget name input plus a companion checklist where you decide what to set up alongside the widget:

AI Chatbot — creates a chatbot and links it to the widget (AI Setup also trains it on your site)
Knowledge Base — creates a knowledge base and links it
Documentation — creates a documentation site and links it
Roadmap — creates a Feature Request board with a default form and links it

The widget name you enter derives default names for all companions. You can expand Customize names to override any of them. For Default / Color Template, you can also click Skip — just the widget to uncheck everything.

In AI Setup, the widget name input is optional — leave it blank and AI will derive names from the company name detected on your website.

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.

AI Color Extraction

Automatically extract matching colors from any website using AI.

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

AI Color Extraction

Instead of manually picking colors, you can let AI analyze any website and automatically extract a matching color palette for your widget.

Enter a website URL

Type any website URL into the input field (e.g., your company's homepage).

Click Extract Colors

The system takes a screenshot of the website and sends it to an AI model along with the page's metadata (title, description, theme color).

Colors are applied automatically

The AI extracts 7 key colors — including background, accent, home screen header/body, and decorative highlights — and also selects the best background decoration style for your widget. All extracted colors are applied to the live preview immediately.

Review and save

Check the preview to make sure the colors look right. The changes are applied to the preview but still require saving to take effect.

AI Color Extraction uses your organization's AI credits. Each extraction consumes a small amount of credits based on your configured AI model.

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.

Inbox Access

Control which agents see this widget's conversations.

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.

Each connection has a dropdown to select an existing item, a + button to create a new one on the spot, and a disconnect button to unlink it. When you click +, a modal opens where you enter a name — the new item is created, linked to the widget, and selected automatically.

If several connections are missing, click Set up missing companions at the bottom of the section. This opens a single modal with name inputs for every unlinked connection, pre-filled from the widget name. Click Create to provision all of them at once.

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.

Inbox Access

Decide which agents should see this widget's conversations in their Inbox. The list shows every member of your organization with a toggle — flip it on to grant access, off to restrict. Click Save to apply.

Owners and admins always have access and show an "Always has access" badge with a disabled toggle — they cannot be restricted
Agents only see the widget's chats, visitors, and notifications (web and mobile push) when their toggle is on
Changes take effect instantly for push notifications and reach the dashboard within a few minutes (or immediately after the next auth refresh)

When you create a new widget, only you (the creator) get access automatically. Other agents stay restricted until an admin grants them access on this tab or on the Organizations page.

This restriction is inbox-only — it doesn't hide the widget from other dashboard pages (analytics, widget settings, outreach, etc.). If you need to block a teammate from editing a widget too, use role permissions instead.

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.

Automate with AI: You can also create and configure widgets using Copilot or any MCP-compatible client. Just describe what you want — "Create a widget with blue theme and connect my chatbot" — and the AI handles it. See the Widget Tools reference for all available operations.