Skip to main content

Style the Chatbot Widget

Quick Setup

Adjust the widget look and save changes in about 5 minutes.

This guide helps you update colors, text, and layout for the chatbot widget using the live preview.

Go to: Chatbot → Widget Settings

Quick Reference​

TaskWhere to clickResult
Preview the widgetGetting Started / ConversationSee how guests experience the widget
Edit the launcherLauncher sectionUpdate the button guests click
Edit header and bubblesHeader, BubblesMatch your brand style
Edit input and welcomeInput, WelcomeTune the chat experience
Save changesSaveStyles apply to the live widget
Reset to defaultsReset to DefaultsRestore the default theme

Plan Access​

  • Widget styling requires a paid plan.
  • Free-tier accounts see an upgrade prompt and cannot save styles.

To upgrade, go to Settings → Billing & Subscription.

Update Widget Styles​

  1. Go to Chatbot → Widget Settings

  2. Use the preview mode buttons:

    • Getting Started
    • Conversation

    ✓ The preview updates to match the selected mode.

  3. Open a section on the right:

    • Launcher
    • Header
    • Bubbles
    • Input
    • Welcome

  4. Update colors, labels, or icons

    ✓ Changes appear in the preview immediately.

  5. Click Save

    ✓ The widget uses your new styles.

Reset to Defaults​

  1. Click Reset to Defaults
  2. Review the preview
  3. Click Save to keep the default theme
Want to control access?

Use Chatbot → Setup → Widget & Access to manage landing pages and whitelisted domains.

Tips​

  • Keep text contrast high for readability.
  • Check both preview modes before saving.
  • Use consistent colors with your website and guest emails.

Troubleshooting​

Preview does not update​

What you see: The preview stays the same after edits.

Fix:

  1. Refresh the page
  2. Try the change again
  3. Check your internet connection

Save fails or reverts​

What you see: Styles do not persist after saving.

Fix:

  1. Click Save again
  2. Wait for the success message
  3. Confirm your plan allows Chatbot styling

Reset does not stick​

What you see: Defaults disappear after refresh.

Fix:

  1. Click Reset to Defaults
  2. Click Save

Still Stuck?​

Contact success@vouch-technologies.com if:

  • ❌ Styles do not save after multiple tries
  • ❌ The widget does not update after refresh
  • ❌ The issue lasts longer than 30 minutes

Helpful to include:

  • Screenshot of the Widget Settings page
  • The style change you attempted
  • Time the issue started