Skip to main content

Web Widget UX

Choose theme, design, and avatar to reflect your hotel brand, colors, and more

Andy Dharmani avatar
Written by Andy Dharmani
Updated over 2 weeks ago

Introduction

Creating a seamless and branded digital experience for your hotel guests starts with a customized web widget. With Myma.ai, you can tailor every aspect of the chatbot interface to match your property's identity; from colors and themes to avatar design and multilingual options. This guide outlines the available customization settings to help you create a chatbot experience that feels truly your own!


Accessing Widget Settings

Navigate to Settings → Channels → Connected Channels in your Myma.ai Dashboard. Locate the Web Widget integration to begin making adjustments.

Web Widget is the overall widget that integrates into your website, and the AI Chatbot opens inside the Web Widget.


Customization Options

Web Widget offers the following customizations

1. Widget Theme

  • Widget Layout (Square or Rounded)

  • Font

  • Frame Color

2. Avatar

  • Upload your own avatar or select from curated options

  • Customize avatar name, size, and design (JPG/PNG, ideally 80x80 to 200x200 pixels)

3. Widget Components

  • Assistant Name

  • Title

  • Subtitle

  • Button Color & Text Color

4. Nudges

  • Add proactive nudges to greet and engage website visitors

5. Multi-Language Settings

  • Enable multilingual support so the assistant can respond in the guest's preferred language

6. External Links

  • Add quick-access buttons to key resources such as booking engines or FAQs

7. Pre & Post Chat Form

  • Collect important guest details before or after a chat session

8. AI Chatbot Appearance: Myma offers the following customizations:

  • Background color

  • Visitor message background and text color

  • Digital assistant background and text color

  • Send icon color


Themes

You have a few choices for selecting what suits your brand and use case. These include:

  • Web Widget with Menus (Standard Size)

  • Web Widget with Menus (Large Size)

  • Web Widget with Suggested Questions

  • Full Screen with Suggested Questions

  • Web Widget Straight to Chat

  • Full Screen Straight to Chat

Rounded vs Square Widget Layout

Avatar

The Avatar should be uploaded to Web Widget and the Website AI Chatbot both. A well-designed avatar can bring your digital assistant to life. Avatars can reflect your brand’s personality, culture, or even specific hotel characters. Remember to update the avatar image under both the Web Widget and AI Chatbot configurations.

We have provided examples of avatars from around the world. However, whatever your marketing needs may be, we can adapt to meet them.

The Avatar file can be a JPG or PNG, ideally between 80x80 pixels to 200x200 pixels.

The avatar can be updated by navigating to Settings → Channels → Connected Channels. Find the Web Widget integration and update the avatar image under the Appearance tab.

External Links

Pre-Chat Form

AI Chatbot Appearance Options


Conclusion

With Myma.ai's Web Widget UX customization features, your chatbot can become an extension of your hotel brand. Whether you're focused on design, personalization, accessibility, or multilingual support, these tools make it easy to launch a visually consistent and guest-friendly chatbot experience. Use this guide to set up and fine-tune your web widget so every interaction feels seamless and on-brand.


Did this answer your question?