Skip to main content

Style the Chatbot Widget

Quick Setup

This takes about 5 minutes. You can update the live widget and save changes from the floating bar.

This guide helps you change the chatbot widget's images, colors, text, and auto-open behavior.

Go to: Chatbot → Widget Settings

Quick Reference​

TaskWhere to clickResult
Preview the widgetGetting Started / ConversationSee how guests experience each layout
Edit the launcher iconImages & BrandingChange the floating button guests click
Edit the bot avatarImages & BrandingChange the image inside the chat
Adjust auto-open behaviorLauncher (Chat Button)Control when the widget opens on desktop and mobile
Edit header and message colorsHeader, Bubbles, InputMatch your brand style
Edit welcome text and policy linksWelcome ScreenControl the first screen guests see
Save or discard changesFloating bar at bottom of pageApply or revert your current edits

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 Images & Branding to update the visual assets.

  4. Use Launcher Icon for the floating button image.

  5. Use Bot Avatar for the image inside the chat.

    ✓ These images serve different parts of the widget.

  6. Open Launcher (Chat Button) to adjust auto-open behavior.

  7. Choose a setting for Desktop and Mobile.

  8. If you choose Enable with delay, select a delay in seconds.

    ✓ The widget uses the selected open behavior for each device type.

  9. Open Header, Bubbles, Input, and Welcome Screen to update text and colors.

  10. Open the Terms & policies section in Welcome Screen.

  11. Turn on Privacy Policy or Terms Of Service as needed.

  12. Enter a URL or upload a .pdf or .md file.

✓ Uploaded files fill the policy URL automatically.

  1. Click Save chatbot style settings in the floating bar.

✓ The button appears after you make changes.

Understand The Images​

Use the right image in the right place.

ImageWhere it appearsWhat it affects
Launcher IconFloating button outside the chatThe button guests click to open chat
Bot AvatarHeader, bot messages, and welcome screenThe face guests see inside the conversation
Need the old launcher avatar?

If you saved older widget styles, the first save moves that image into Bot Avatar automatically.

Manage Policies​

  1. Open Welcome Screen.

  2. Open the Terms & policies section.

  3. Leave Vouch Policy enabled.

  4. Turn on Privacy Policy or Terms Of Service when needed.

  5. Add a label and a URL, or upload a .pdf or .md file.

  6. Click Save chatbot style settings.

    ✓ The preview shows the enabled links on the welcome screen.

Keep Changes Or Revert Them​

The page uses a floating action bar at the bottom.

  • Click Save chatbot style settings to keep your edits.
  • Click Discard changes to return to the last saved version.
What you see

You only see the floating bar after you change a field.

Tips​

  • Keep text contrast high for readability.
  • Check both preview modes before saving.
  • Keep policy names short so the links fit on mobile screens.
  • Use consistent colors with your website and guest emails.
  • Attachment button styling is not editable on this page.

Troubleshooting​

Preview does not update​

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

Fix:

  1. Switch between Getting Started and Conversation
  2. Refresh the page
  3. Try the change again

Save fails or reverts​

What you see: Styles do not persist after saving.

Fix:

  1. Click Save chatbot style settings again
  2. Wait for the success message
  3. Confirm your plan allows widget styling

Wrong image appears​

What you see: The floating button changes, but the chat avatar does not.

Fix:

  1. Open Images & Branding
  2. Edit Launcher Icon for the floating button
  3. Edit Bot Avatar for the in-chat image
  4. Save your changes

Upload returns busy​

What you see: An image or policy upload fails with a busy message.

Fix:

  1. Wait 10 seconds
  2. Try the upload again
  3. If several staff are uploading at once, stagger the uploads
  4. If it keeps happening, contact support

Policy upload fails​

What you see: Upload shows an error under the policy field.

Fix:

  1. Use .pdf or .md files only
  2. Keep the file small enough to upload
  3. If the upload says busy, wait 10 seconds and try again
  4. Retry the upload, then click Save chatbot style settings

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

Fix:

  1. Open Welcome Screen
  2. Turn on the policy toggle
  3. Add a valid URL
  4. Save the settings again

Discard does not restore the page​

What you see: The page still shows unsaved edits after you click Discard changes.

Fix:

  1. Wait for the controls to refresh
  2. Try Discard changes again
  3. Refresh the page if needed

Still Stuck?​

Contact success@vouch-technologies.com if:

  • ❌ Styles do not save after multiple tries
  • ❌ The preview does not refresh after saving
  • ❌ 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