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
Configure policy linksWelcome → Configure TermsShow Privacy Policy and Terms Of Service links
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. In Welcome, click Configure Terms if you need policy links above Getting Started.

    ✓ A modal opens with policy controls.

  6. In Terms & Policies:

    • Vouch Policy (Required) stays enabled and cannot be changed.
    • Turn on Privacy Policy or Terms Of Service as needed.
    • Add the policy URL, or upload a .pdf or .md file.

    ✓ Uploaded files fill the policy URL automatically.

  7. Click Done.

  8. 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.
  • Keep policy names short so the policy line stays clear on mobile screens.
  • 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

Policy upload fails​

What you see: Upload shows an error in the Terms modal.

Fix:

  1. Use .pdf or .md files only
  2. Keep file size under 6 MB
  3. Retry the upload, then click Save

What you see: Privacy Policy or Terms Of Service is missing in preview.

Fix:

  1. Open Welcome → Configure Terms
  2. Turn on the policy toggle
  3. Add a valid URL and click Done
  4. Click Save

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