Widget Customization

Dashboard Configuration

1. Go to Settings > Widget in your dashboard
2. Customize colors, position, greeting, title, logo, and suggested questions
3. Preview changes in real-time
4. Click Save

Configuration Options

All settings are managed via the dashboard.

Setting	Description	Default
Primary Color	Brand color for the widget header, buttons, and visitor message bubbles	#6366f1 (Indigo)
Position	Where the widget appears on the page	bottom-right
Title	Widget header title	Chat Support
Greeting	Welcome message shown when the widget opens	Auto-generated
Logo URL	Custom logo displayed in the widget header	WebDialogAI logo
Show Branding	Display "Powered by WebDialogAI" in the widget	true
Suggested Questions	Quick-reply chips shown below the greeting	Empty

Suggested Questions

Add up to several pre-defined questions that visitors can click to start a conversation instantly. These appear as clickable chips in the chat window.

{
  "suggestedQuestions": [
    "What are your hours?",
    "Do you deliver?",
    "How do I track my order?"
  ]
}

Widget Features

The widget includes the following built-in features:

AI Chat

Visitors get instant AI-powered responses based on your knowledge base.

Agent Handover

When the AI can't confidently answer, the conversation is automatically routed to a human agent. The visitor sees a queue position and estimated wait time.

Queue Management

While waiting for an agent:

• Position tracking — shows queue position (#1, #2, etc.) and estimated wait time
• Continue with AI — visitors can keep chatting with the AI while waiting
• Leave a message — submit name, email, and message for offline follow-up

Product Cards

The AI can display product recommendations as interactive cards with images, descriptions, prices, and call-to-action buttons. Products come from your catalog or an external API.

Typing Indicators

Real-time typing indicators show when agents are composing a response.

CSAT Ratings

After an agent ends a conversation, visitors are prompted to rate their experience (1–5 stars) with optional text feedback.

Timeout Handling

If a visitor is inactive while connected to an agent, they receive an "Are you still there?" prompt. If they don't respond within the grace period, the conversation auto-ends and the agent is released.

Geolocation

The widget optionally captures browser geolocation (with user permission) to provide location-aware responses.

Conversation History

Returning visitors see their previous messages when they reopen the widget (tied to their session ID).

JavaScript API

Control the widget programmatically from your page:

// Open the widget
window.WebDialogAI.open();

// Close the widget
window.WebDialogAI.close();

// Toggle open/close
window.WebDialogAI.toggle();