Configure your widget for the first time

Updated May 22, 2026

Open your widget settings

In your dashboard, go to Widgets in the left sidebar and click on your default widget. This opens the widget editor where you can configure everything about how the widget looks and behaves.

The editor has several tabs — for a first-time setup, you only need General, Appearance, and Home.

1. Set a name

On the General tab, the first field is Widget name. This is the name your visitors see at the top of the chat window — typically your company or product name (for example, "Acme Support" or just "Acme").

Just below it, the Widget ID / URL field auto-fills with a slug derived from your widget name. You can edit the slug there.

2. Pick your brand color

Switch to the Appearance tab. The Accents color is the main color of the widget — used for the launcher button, link highlights, and interactive elements. Click the color swatch and enter your brand's hex code, or drag the picker to the right shade.

The preview on the right updates in real time so you can see the result before saving.

3. Choose the launcher position

Still on the Appearance tab, scroll down to the Launcher section and find Position. You can place the launcher button in the bottom-right or bottom-left corner of the screen.

Bottom-right is the default and works well for most sites. Choose bottom-left if your site already has important UI elements in the bottom-right corner (a cookie banner, a back-to-top button, etc.).

4. Write your greeting

Open the Home tab. This is the screen visitors see when they first open the widget — and the greeting is the first thing they read.

You'll set two short lines:

  • Header Greeting — the big, friendly text at the top. Defaults to something like "Hi there 👋". Keep it short — one short sentence or a single phrase works best. Emoji are welcome.
  • Welcome Message — the subtitle right below the greeting. Defaults to "How can we help?". Use this to set expectations: invite a question, mention your reply time, or point visitors at a specific resource.

Both fields are short and live-preview on the right, so iterate until it sounds like you.

Save and preview

Click Save at the top of the editor. Your changes are saved immediately. To preview the widget as a visitor would see it, open the install snippet (see Install Yaplet on any website) and paste it into a test page.

What's next

The widget is configured. Next up: put it on a page and send a real message — follow Send your first message from the inbox for the full end-to-end test.

When you're ready to go deeper — custom colors for message bubbles, home screen cards, feature toggles, and connections to your knowledge base and AI chatbot — see the widget configuration articles in the Installing Yaplet section.

Did this article answer your question?