Getting Started
Configure the Yaplet chat widget for the first time, and learn which tab of the widget designer holds each setting.
First-Time Configuration
Everything below happens in the widget designer, which you open from Brand → Chat widget. The designer is split into five tabs — Appearance, Home, Messages, Features and Install — with a live preview beside them. Nothing you change is applied to your website until you press Save Changes.
Set your brand colors
On the Appearance tab, open Theme & Colors. Set the two main colors — Background and Accents — then either press Auto-Generate to derive the rest from them, or open Templates to start from a ready-made palette. The preview updates as you go. See Color System for what every color variable does.
Or let AI do the first pass
Still on Appearance, the Redesign with AI button asks for a website address, reads it, and proposes colors, a background style and a greeting to match. The result lands in the form and the preview only — nothing is written to your live widget until you press Save Changes, so you can look first and discard it by leaving the page. On the free plan you get three AI setup runs in total, and a preview you never save still uses one of them.
Choose your logo and bot avatar
On Appearance, the Branding section holds the Default Logo (shown at the top of the home screen) and the Bot Avatar (shown on AI messages). Both open Your images, the shared image library for your whole organisation — pick an image that is already there, or upload a new one and it stays available everywhere next time. See Branding, Menu & Dark Mode.
Write the greeting
Go to the Home tab, Home Screen Settings. This is where the header greeting, the welcome message and the "show team avatars" switch live. Learn about all the options in Greeting, Welcome & Team Display.
Choose a background style
Back on Appearance, the Home Screen section sets the background style. There are nine: Default, Blobs, Spotlight, Gradient, Ripple, Grid, Full Image, Small Image and None. See Background Styles for a visual comparison.
Configure home screen cards
On the Home tab, Home Cards decides which cards appear on the home screen: the AI ask bar, help articles, news, a direct message CTA, external links, or form triggers. Reorder them by dragging. Full details in Home Screen Cards.
Set up your menu tabs
Each tab's label and its show/hide switch sit with the feature that owns it: Home on the Home tab, Messages on the Messages tab, and News, Roadmap and the Help tab on the Features tab. See Branding, Menu & Dark Mode.
Where to Find Widget Settings
The widget designer has five tabs, and every widget setting is on exactly one of them:
| Tab | What it controls | Learn more |
|---|---|---|
| Appearance | Colors, launcher button, logo and bot avatar, home-screen background, Redesign with AI | Appearance & Theming |
| Home | Header greeting, welcome message, team avatars, home cards | Home Screen |
| Messages | Chat tab label, expected reply time, email capture, satisfaction ratings | Live Chat |
| Features | Widget name, session replays, News, Roadmap, the Help tab, inbox access, and deleting the widget | News & Roadmap |
| Install | The embed code and identity verification | Installation |
What to Set Up Next
Once the widget is live on your site, explore these features to get the most out of it:
AI Chatbot
Set up AI-powered conversations with streaming responses, conversation starters, and automatic agent handoff.
Knowledge Base
Add help articles so visitors can find answers on their own — browsable by category with full-text search.