Getting Started

Configure the Yaplet chat widget for the first time, and learn which tab of the widget designer holds each setting.

Haven't installed the widget yet? Head to the Installation guide for the embed code and platform-specific setup instructions.

First-Time Configuration

Everything below happens in the widget designer, which you open from Brand → Chat widget. The designer is split into six tabs — Design, Home, Messages, Features, Install and Languages — 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 Design tab, the Widget section asks for a Widget color, one to three Brand colors, and whether they run on Buttons & messages as one color or a gradient. Everything else is calculated from them and checked for readability, so there is nothing to generate or fine-tune. Starting points, in the section's header, applies one of twelve finished looks if you would rather pick than choose. The preview updates as you go. See Color System for what each choice does.

Or let AI do the first pass

Still on Design, the Redesign with AI button in the Widget section's header asks for a website address, reads it, and proposes a whole design to match — colors, Home screen background, corners, card style and launcher look — plus quick buttons about your business. 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 Design, the first two rows of the Widget section are the Logo (shown at the top of the home screen) and the Bot avatar (shown beside AI messages). Both open Your images, the shared image library for your whole organization — 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. Write the texts in your own language; the other languages are behind the globe button next to each field. Learn about all the options in Greeting, Welcome & Team Display.

Choose the Home screen background

Back on Design, the Home screen section builds what sits behind the greeting out of four layers you can mix freely — Color, Photo, Glow and Lines — with Reaches for how far down they go. The Cards and Corners rows, at the end of the Widget section above it, set the shape of everything. See Home Screen Background for what each option draws.

Configure home screen cards

On the Home tab, Home Cards decides which cards appear under the fixed AI Assistant box: help articles, documentation, news, a direct message CTA, external links, or form triggers. Reorder them with the Move Up / Move Down arrows. Full details in Home Screen Cards.

Set up your menu tabs

Home and Messages are always in the floating dock. The Help, News and Roadmap tabs have show/hide switches on the Features tab, with the feature each belongs to. Tab names are fixed and said in each visitor's language. See Branding, Menu & Dark Mode.

You don't have to complete every step before going live. The widget works out of the box with sensible defaults — you can refine the look and content over time.

Where to Find Widget Settings

The widget designer has six tabs, and every widget setting is on exactly one of them:

TabWhat it controlsLearn more
DesignLogo and bot avatar, widget color, brand colors, buttons & messages, cards, corners, the Home screen background layers, launcher, Starting points, Redesign with AIAppearance & Theming
HomeHeader greeting, welcome message, team avatars, home cardsHome Screen
MessagesExpected reply time, email capture, satisfaction ratingsLive Chat
FeaturesWidget name, start screen, session replays, the Help tab, News, Roadmap, inbox access, and deleting the widgetNews & Roadmap
InstallThe embed code and identity verificationInstallation
LanguagesWhich languages your own texts are written in, what is still missing, and the two language switchesWidget Languages
Three things are not widget settings. Your public web address and the interface language belong to the brand and are set under Brand settings. Which knowledge base the widget's Help tab shows is decided under Brand → Knowledge — the Features tab only controls whether the tab appears at all.
For a full walkthrough of the widget designer, see the Chat Widget dashboard documentation.

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.

News & Roadmap

Share product updates and let visitors vote on upcoming features through the built-in roadmap board.

Forms & Surveys

Collect visitor data with multi-step forms, rating scales, and file uploads — triggered by agents, AI workflows, or surveys.