Platform DocumentationVideo TutorialsAdvanced GuidesAPI Reference
🎛️ How to Use Different Widget Configurations to Improve User Experience

🎛️ How to Use Different Widget Configurations to Improve User Experience

Discover how to enhance your chatbot’s interaction by adjusting various widget configurations. In this section, you’ll learn to customize design elements, optimize responsiveness, and create a more engaging and intuitive experience for your users.

Widget Configuration Location

To find your widget configuration on the ViaSay platform:

  1. Navigate to Integrate → Channels.
  2. In the User channels tab, select the widget you want to update.


Once selected, you'll land on the Format and Design tab, with additional configuration options available. (See our documentation on widgets for details.)


📌

IMPORTANT NOTE

The design preview is visual only; you cannot test chatbot functionality while customizing the design.

Customizing the Widget Format and Design

You can personalize your widget to match your company's branding with the following options:

  • Main color: Used for the bot header and backgrounds.
  • Secondary color: Applied to quick replies, links, and user messages.
  • Text fonts: Limited to fonts available on the platform.
  • Bot avatar and chat bubble position & format: Adjust as needed (⚠️ For front-end overlap issues, use Z-index).
  • Auto-open setting: Enable or disable automatic chatbot opening to increase engagement.

Make sure the widget is clearly visible to users.

Widget Layout Options

  1. Widget Bubble:

    • Standard layout, non-intrusive, adaptable to various designs and mobile-friendly.
    • Ideal for providing assistance without interrupting the user experience.


  2. Sidebar Widget:

    • Opens a sidebar, dimming the background and taking full view height.
    • Best for processes requiring user focus, like order cancellations.
    • Suitable for longer conversations or more complex interactions.


  3. Full-page Widget:

    • A fullscreen layout that mimics a web page.
    • Useful for replacing FAQs or contact forms and handling complex scenarios.


Setting Up the Greetings Section

  1. Go to Greetings Tab

    Navigate to Integrate → Channels → [Relevant widget] → Greetings.

  2. Create a Greeting Message

    Customize the initial message based on your reqirements. Example:


    Tips:

    • Use warm, welcoming language.
    • Make it clear the user is interacting with a bot.
    • Emojis can enhance tone and user engagement.

  3. Set Up Quick Replies (QRs)


    • Limit: 10 quick replies.
    • Prioritize the most common questions or actions.

  4. Publish Changes