Customizing the Widget Appearance & Content

This guide explains every appearance-related option, helping you design a widget that matches your brand and delivers a friendly support experience.

1. Button Appearance

A. Button Text

This is the label displayed on the floating button.

Examples:

• Help
• Support
• Need Help?
• Contact Us

Best Practices:

• 💡
  • Keep it short (1–2 words)
  • Avoid long or multi-line text for mobile users

B. Button Icon

Choose from several built-in icons:

• 💬 Chat Bubble
• ✉️ Email
• 📞 Phone
• 🆘 SOS
• 📢 Megaphone
• 👥 Users

C. Button Colors

You can customize:

• Background Color
• Text/Icon Color

Recommendations:

• 💡
  • Use brand colors for consistent identity
  • Ensure good contrast (dark background + light text)
  • Follow accessibility contrast rules (WCAG AA minimum)

2. Widget Panel Content

A. Widget Title

Displayed at the top of the opened widget panel.

Examples:

• How can we help?

• Support Center

• Need Assistance?

Purpose:
Gives users context immediately after opening the widget.

B. Welcome Message

A short greeting displayed under the title.

Effective Messages:

• “Search for answers or view your tickets.”
• “Hi! How can we help today?”

C. Search Placeholder

Shown inside the search input box when empty.

Examples:

• Search for help…
• What do you need assistance with?
• Type your question…

Purpose:
Encourages user interaction by guiding the expected input.

D. No Results Message

Displayed when search returns no results.

Best Messages:

• “No results found. Try different keywords or contact our team.”
• “We couldn’t find anything. Need more help?”