NexaDesk

Widget Customization

Match the chat widget to your brand with colors, gradients, and layout options

The NexaDesk chat widget is fully customizable to match your brand. Configure colors, gradients, position, messages, and behavior from the visual builder in your dashboard.

Visual Builder

Navigate to Chatbots > [Your Bot] > Widget to access the visual widget builder. Changes preview in real time on the right side of the screen.

Appearance Options

  • Primary Color — The main accent color for the widget bubble, header, and send button
  • Gradient — Apply a gradient to the widget header (choose start and end colors, direction)
  • Text Color — Override the header text color for contrast
  • Background — Light or dark widget background

  • Bottom Right (default) — Standard position for most websites
  • Bottom Left — For RTL layouts or when the right side is occupied

  • Circle — Default rounded chat bubble
  • Pill — Extended bubble with text label (e.g., "Chat with us")
  • Custom Icon — Upload your own bubble icon

  • Default — 380px wide, 520px tall
  • Compact — 320px wide, 440px tall
  • Large — 440px wide, 600px tall

Content Options

The first message visitors see when opening the chat. Supports plain text only. Keep it under 200 characters for best display.

The hint text in the message input field (e.g., "Type your message...").

Upload a custom avatar image for the chatbot. Recommended size: 64x64px. If not set, NexaDesk uses a default bot icon.

Toggle the "Powered by NexaDesk" branding in the widget footer. Available on paid plans.

Behavior Options

Configure the widget to open automatically after a delay:

  • Disabled — Widget stays closed until clicked
  • After N seconds — Opens automatically after a set time on page
  • On scroll — Opens when the visitor scrolls past a threshold

Display a message bubble above the widget to encourage visitors to engage. Configure the message text and display delay.

Enable or disable the notification sound when a new message arrives.

When no agents are available:

  • Show a contact form to collect the visitor's email and message
  • Display a custom offline message
  • Continue AI-only mode (if the chatbot is configured to handle queries independently)

Advanced: CSS Override

For pixel-perfect control, inject custom CSS that overrides the widget's default styles. Access this under Widget > Advanced > Custom CSS.

css
/* Example: round the widget corners more */
.nexadesk-widget-container {
  border-radius: 24px !important;
}

Warning: Custom CSS is applied as-is. Test thoroughly across browsers and devices.

PreviousKnowledge BaseNextWordPress