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 lets you control how your chat widget looks and behaves. Any changes you make are reflected immediately in the live preview, allowing you to review your configuration before saving.

Customize Widget Settings​

1

Choose Widget Theme Color

Choose Widget Theme Color

Customize your widget's Theme color to match your brand identity.

  1. Navigate to Dashboard → Widget Customization.
  2. Locate the Theme Color setting.
  3. Choose your preferred color using the color picker.
2

Set the Assistant Name

Set the Assistant Name

Choose the name displayed at the top of your chat widget.

  1. Open Dashboard → Widget Customization.
  2. Locate the Widget Name field.
  3. Enter the name you want your visitors to see.
3

Upload a Widget Logo

Upload a Widget Logo

Personalize your widget by adding your company or brand logo.

  1. Open Dashboard → Widget Customization.
  2. Locate the Widget Logo section.
  3. Upload an image.
Note
  • Recommended image size: 40 × 40 px
  • Use a 1:1 aspect ratio.
  • Maximum file size: 1 MB.
  • Animated GIF logos are supported.
4

Customize the Welcome Message

Customize the Welcome Message

Create a friendly greeting that welcomes visitors when they open your chat widget.

  1. Open Dashboard → Widget Customization.
  2. Locate the Welcome Message field.
  3. Enter your preferred greeting.

Tip: Keep your welcome message short, clear, and inviting.

Example messages

  • 👋 Hi! How can I help you today?
  • Welcome! Feel free to ask me anything.
  • Hello! I'm here to answer your questions.
  • Need assistance? Start a conversation with me.
5

Show or Hide the Widget on Mobile

Show or Hide the Widget on Mobile

Control whether your chat widget is visible on mobile devices using the Hide Widget on Mobile switch.

  1. Open Dashboard → Widget Customization.
  2. Locate the Hide Widget on Mobile option.
  3. Toggle the switch according to your preference:
    • Enabled - The widget is hidden on mobile devices.
    • Disabled - The widget remains visible on mobile devices.
  4. Click Save Changes.

The updated visibility setting is applied immediately after saving.

Good to Know

This setting only affects mobile devices. The widget will continue to appear on desktop browsers unless you change its visibility separately.

6

Adjust Widget Position on Mobile

Adjust Widget Position on Mobile

Control where the chat widget appears on mobile devices by adjusting its horizontal and vertical position.

  1. Open Dashboard → Widget Customization.
  2. Locate the Position on Mobile section.
  3. Adjust the following values as needed:
    • Horizontal (px) – Moves the widget left or right.
    • Vertical (px) – Moves the widget up or down.
  4. Use the + and − buttons to fine-tune the position.
  5. Click Save Changes.

The widget position is updated immediately after saving.

Good to Know
  • Position values are measured in pixels (px).
  • Changes only apply to mobile devices and do not affect the widget position on desktop.
  • Use the preview panel to ensure the widget doesn't overlap important content on your website.