> For the complete documentation index, see [llms.txt](https://docs.wonderchat.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wonderchat.io/setup-guides/styling-your-chatbot/how-to-use-homepage-widget-feature.md).

# How to use Homepage Widget Feature

The Widget Homepage allows you to show a branded landing screen when users open your chat widget. It improves the experience by displaying a welcome message, system status, announcements.

### ✅ How to Enable the Widget Homepage

1. Go to **Settings → Home Page**
2. Turn **ON** the toggle in the top-right corner (**Widget Homepage**)
3. Click **Save**

Once enabled, users will see the homepage inside the widget before entering the chat.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2F3dlsislKoGnNZ4gEVru0%2Fimage.png?alt=media&amp;token=a78890c4-045a-4ec5-9070-379bf67bf4cd" alt=""><figcaption></figcaption></figure>

***

## Branding Section

This section controls the main identity and look of your widget homepage.

#### 1) Logo

Upload your company logo to personalize the widget.

* Recommended: Square logo (PNG or SVG)
* This logo appears on the homepage header area

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2F1hA3e2lVkzf3eL79ER5d%2Fimage.png?alt=media&amp;token=07f136d9-e13d-4a90-bdd0-4d0de0cf4c5a" alt=""><figcaption></figcaption></figure>

***

#### 2) Company Name

Enter your business name to display on the homepage.

Example:

**Acme Inc.**

***

#### 3) Greeting

This is the large headline shown when users open the widget.

Example:

**Hi there! 👋**

✅ Best practices:

* Keep it short and friendly
* Use an emoji if it matches your brand tone

***

#### 4) Tagline

A short subtitle shown under the greeting.

Example:

**How can we help you today?**

✅ Best practices:

* Make it action-focused (support, sales, onboarding, etc.)
* Keep it under 1 sentence

***

#### 5) Background Color

Choose the **gradient background color** for the widget homepage.

Available options are displayed as color tiles.

This affects the visual style of the homepage area behind the greeting.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2FRER7bWRky5U89AvZbInZ%2Fimage.png?alt=media&amp;token=c97a6100-0280-405b-a227-ef3fc06d0327" alt=""><figcaption></figcaption></figure>

***

## System Status

You can display a system health indicator to visitors.

#### Status Dropdown Options

Select the status:

* **Operational, Degraded or Major Outage**

#### Status Message (Optional)

Add an extra message to provide more context.

Examples:

* “All services running normally.”
* “We’re experiencing delays with responses.”

✅ This status appears in the widget preview as a status card (ex: “All systems operational”).

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fbdv1wW1wSZMCGR2O8WPr%2Fimage.png?alt=media&amp;token=a262dfc3-7458-4477-a7e6-714ad4f6b277" alt=""><figcaption></figcaption></figure>

***

## Announcements

Use announcements to highlight updates, alerts, or important messages for users.

#### Add a New Announcement

1. Go to **Announcements**
2. Click **+ Add**
3. Create your announcement content
4. Save

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2FHN1vCuY2ZxuIN5SYocW2%2Fimage.png?alt=media&amp;token=4a99baaf-76ef-4d8e-bf15-848559f4798f" alt=""><figcaption></figcaption></figure>

Examples of announcements:

* “🎉 New feature released!”
* “⚠️ Scheduled maintenance tonight at 11PM”
* “📢 Free onboarding sessions available”

***

## Homepage Content (Example Questions + Quick Links)

This section displays content configured in your **Chat Menu settings**, and then shown automatically on the homepage.

#### Example Questions

These are suggested messages users can tap to start conversations faster.

Example ideas:

* “How do I get started?”
* “Can I talk to support?”
* “What pricing plans do you offer?”

#### Quick Links

Clickable shortcuts inside the widget homepage (ex: Help Center, Contact page, Pricing page).

Example ideas:

* “Pricing”
* “Documentation”
* “Book a demo”

#### Editing Homepage Content

In this section, click **Edit in Chat Menu** to manage:

* Example Questions
* Quick Links

✅ After you update them in **Chat Menu**, they will automatically appear on the homepage.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2F8rZ3XFPJj2hLrYsVMkMP%2Fimage.png?alt=media&amp;token=41d83cb7-7247-418b-bc9c-778bd0633023" alt=""><figcaption></figcaption></figure>

***

## Live Preview

On the right side of the screen, Wonderchat shows a **real-time preview** of your chat widget homepage.

This lets you confirm the design, greeting text, and status display before saving changes.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2FObL20LRZiNQkbarw9BTC%2Fimage.png?alt=media&amp;token=60da3cad-3982-4175-a70b-166974269813" alt=""><figcaption></figcaption></figure>

***

## Save Your Changes

Always click **Save** (bottom-left) to apply your homepage configuration to the live widget.