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.

Order Tracking

Visitors can check their order status by asking questions like "Where is my order #12345?" The AI detects order queries, collects the visitor's email if needed, and looks up order data via your external API. Results are displayed as order cards showing order ID, status, items, shipping info, tracking link, and estimated delivery date.

Setup: Go to Settings > AI Configuration > Order Tracking, select "External API", and configure your order API endpoint. Your API must accept GET requests with email and order_number query parameters and return a JSON response with an orders array.

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();