> 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

### ✅ 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="/files/cHtcZ1h7OLkBjog9iPtn" 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="/files/JbLLHgiUjq7hgmSo3c78" 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="/files/Ohl9qQkzjyoCIwCIpSs6" 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="/files/3o8278wK2n5OscJC5zpx" 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="/files/bTR8rV2oLP5LTZgjCY0d" 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 **General 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 General** to manage:

* Example Questions
* Quick Links

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

<figure><img src="/files/Ezc4TXkJtWd6tBDn6qdp" 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="/files/8Q0kCKqWxjVB09aqxbLP" alt=""><figcaption></figcaption></figure>

***

## Save Your Changes

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