Skip to main content

Customize Your Chat Widget

Personalize your chat widget to match your brand. Configure its appearance, logo, welcome message, and display preferences before publishing it to your website.

Overview​

The Widget Customization page controls how your widget looks and behaves. Changes are reflected in the preview so you can review them before saving.

1

Choose Widget Theme Color

Screenshot for step 1: Choose Widget Theme Color
  1. Open Dashboard > Widget Customization.
  2. Locate the Theme Color setting.
  3. Choose your preferred color using the color picker.
  4. Save the change and confirm it in the preview panel.
2

Upload a Widget Logo

Screenshot for step 2: Upload a Widget Logo
  1. Open Dashboard > Widget Customization.
  2. Locate the Widget Logo section.
  3. Upload a square image file.
  4. Review the logo in the preview before saving.

Recommended image size: 40 x 40 px. Keep the file under 1 MB and use a clean square crop.

3

Set the Assistant Name

Screenshot for step 3: Set the Assistant Name
  1. Open Dashboard > Widget Customization.
  2. Locate the Widget Name field.
  3. Enter the name you want visitors to see.
  4. Save and confirm the header still fits cleanly on mobile.
4

Customize the Welcome Message

Screenshot for step 4: Customize the Welcome Message
  1. Open Dashboard > Widget Customization.
  2. Locate the Welcome Message field.
  3. Enter a short greeting.
  4. Save and test how it wraps in the widget.

Recommended examples:

  • Hi, how can I help you today?
  • Welcome. Ask me anything about our products or services.
  • Need help getting started? I can point you in the right direction.
5

Show or Hide the Widget on Mobile

Screenshot for step 5: Show or Hide the Widget on Mobile
  1. Open Dashboard > Widget Customization.
  2. Locate the Hide Widget on Mobile option.
  3. Turn it on if you do not want the widget visible on mobile devices.
  4. Save and test on a real phone.
6

Adjust Widget Position on Mobile

Screenshot for step 6: Adjust Widget Position on Mobile
  1. Open Dashboard > Widget Customization.
  2. Locate Position on Mobile.
  3. Adjust horizontal and vertical offsets in pixels.
  4. Save and test that the launcher does not overlap important page controls.

Field Reference​

SettingPurposeRecommended defaultPractical guidance
Theme ColorSets the primary accent colorBrand primary colorUse a color that keeps button text and icons readable
Widget LogoShows your logo in the widget headerTransparent square logoAvoid busy or low-contrast marks
Widget NameLabels the assistantShort assistant or brand nameKeep it concise so it does not wrap awkwardly
Welcome MessageGreets the visitorOne short sentenceKeep it under two sentences
Hide Widget on MobileControls mobile visibilityOffTurn on only if the widget blocks a critical mobile flow
Mobile PositionMoves the launcher on mobileDefault placementTest on both small and large phone screens
Default LanguageSets the initial widget languageMain audience languageMatch the primary language of your training content

Character and Layout Guidance​

  • Keep the widget name short enough to fit on one line where possible.
  • Keep the welcome message concise so the first view is not text-heavy.
  • Re-test the widget after any logo or color change on both light and dark page backgrounds.
  • If multiple teammates edit the widget, preview and save changes one at a time to avoid confusion about what changed.