Customer Support Center
A full-featured customer support plugin with live chat, in-platform WebRTC voice calls, AI chatbot, ticket system, and knowledge base — all in one embeddable widget.
Overview & Features
Everything included out of the box
💬 Live Chat
Real-time messaging between customers and agents, with typing indicators, file attachments, reply threading, and a satisfaction rating prompt when a chat ends.
🤖 AI Chatbot
An AI bot handles conversations first, drawing on your knowledge base and custom instructions. It escalates to a human agent automatically when needed.
📞 WebRTC Voice Calls
Browser-to-browser voice calls with no phone lines or third-party telephony required. Supports call recording, mute, hold, and a post-call rating prompt.
🎫 Ticket System
Customers submit tickets with a subject, category, and description. Agents reply and update status from their dashboard — no wp-admin access needed.
📚 Knowledge Base
Articles organised by emoji-tagged categories. Customers can search, browse, and vote on helpfulness. Popular articles surface automatically on the Home tab.
🌐 Bidirectional Translation
Customer and agent messages are translated into each other's language in real time. Customers pick their language from a dropdown in the widget header.
👥 Agent Dashboard
A complete frontend dashboard for agents — live sessions, ticket queues, voice callbacks, knowledge base, and profile management without wp-admin.
📊 Admin Panel
Analytics, chat transcripts, ticket management, agent management, and all plugin settings — available in wp-admin and on any frontend page via shortcode.
Installation
Getting the plugin up and running
PHP 7.4 or later required. The plugin is standalone — WooCommerce is not required, though it integrates with WooCommerce order IDs in tickets if WooCommerce is present.
1. Upload the plugin folder to /wp-content/plugins/
2. Activate from the WordPress Plugins screen
3. Go to Support Center → Settings and enter your license key
4. Set your brand name, color, and choose which tabs to show
5. Add [support_center] to any page to embed the widget
6. (Optional) Add [ support_agent_dashboard] to a private page for your agents
Shortcodes
Four shortcodes — paste any into a page or post
Embeds the complete support widget — Home tab with quick actions and popular articles, Live Chat, Voice Call, Tickets, and Help Center. Tabs disabled in Settings are hidden automatically.
Best placed on a dedicated "Support" or "Contact Us" page so customers can bookmark it. The widget is fully self-contained.
[support_center]
Renders the complete agent dashboard on any frontend page. Agents claim live sessions, reply to customers, manage their ticket queue, handle voice callbacks, and edit their own profile — all without needing wp-admin.
Restrict access. Protect this page so only logged-in agents can view it. Use a membership plugin, password protection, or set the page to private. Visitors without an agent role see a permission-denied message.
[support_agent_dashboard]
You can link to this page from wp-admin at Support Center → Settings → General → Agent Dashboard Page.
Embeds the complete admin panel — analytics, all chat transcripts, ticket management with bulk actions, voice queue, knowledge base authoring, agent management, and plugin settings. Only site administrators can view it.
Keep this page private or password-protected. Non-admin visitors see a permission-denied message, but best practice is to keep admin pages out of public sitemaps entirely.
[support_center_admin]
Renders only the knowledge base management section — creating and editing categories and articles — without exposing chat data, ticket history, or plugin settings. Ideal for KB editors who don't need full admin access.
[support_kb_admin]
Settings Reference
All configurable options under Support Center → Settings
| Setting | Default | Description |
|---|---|---|
| Brand Name | Your site name | Business name shown in the widget header |
| Brand Color | #F5A623 | Primary accent color applied to buttons, headers, active tabs, and badges throughout the widget |
| Brand Avatar | — | Logo or avatar shown in the widget header. Falls back to the first two letters of the brand name if not set. |
| Greeting Text | Hi there 👋 | Large greeting line in the widget header |
| Greeting Subtitle | How can we help you today? | Smaller line below the greeting |
| Panel Position | Right | Which side of the screen the chat panel appears on — Left, Right, or Center |
| Tab | Default | Description |
|---|---|---|
| Home | On | Quick actions, knowledge base categories, and popular articles |
| Live Chat | On | Real-time chat interface |
| Voice Call | On | Browser-to-browser WebRTC voice calling |
| Tickets | On | Ticket submission and customer ticket history |
| Help Center | On | Knowledge base browsing and search |
| Setting | Default | Description |
|---|---|---|
| Enable File Uploads | On | Allow customers and agents to attach files in chat |
| Allowed File Types | jpg, png, gif, pdf, doc, xls, txt… | Comma-separated list of accepted file extensions |
| Max File Size | 5 MB | Maximum size for a single attachment |
| Setting | Default | Description |
|---|---|---|
| Email Notifications | On | Alert agents by email when new chats or tickets arrive. Delivered asynchronously so the widget response is never delayed. |
| Ringing Tone | — | Audio file URL played on the agent's side when an incoming voice call arrives |
| Dialing Tone | — | Audio file URL played for the customer while waiting for an agent to answer |
| Setting | Default | Description |
|---|---|---|
| Agent Dashboard Page | — | Select the page where you placed [support_agent_dashboard]. Links the admin panel to that page directly. |
Custom Triggers
Open the support widget from any element on your site
The plugin watches for trigger elements anywhere on the page — including elements added after load by a page builder or custom JavaScript. Clicking any trigger opens the support widget without a page reload. No extra JavaScript required on your end.
Add the class qado-chat-trigger to any HTML element — button, link, image, or div — and clicking it opens the full support widget panel.
Contact Support
Get Help
If you prefer targeting by ID, use id="qado-chat-open". Functionally identical to the class trigger — both open the same panel.
You can use the class and the ID on different elements simultaneously — both open the same widget panel.
Open or Close from JavaScript
Two global functions let you open or close the widget from your own scripts or inline button attributes.
// Open the support widget
scTriggerOpen();
// Close the support widget
scTriggerClose();
// Inline example
How the panel works. On pages where the floating launcher is not active, a hidden support panel is added to the footer automatically. Trigger elements open this panel. On pages where the launcher is active, triggers share its panel — there is never a duplicate.
Floating Launcher
A persistent chat button fixed to a corner of the screen
When enabled, the floating launcher appears as a branded button anchored to a corner of your site. Clicking it slides open the full support widget. Restrict it to specific pages or leave it on site-wide.
| Setting | Default | Description |
|---|---|---|
| Enable Floating Launcher | Off | Show the floating button globally |
| Restrict to Pages | All pages | Enter specific page IDs (comma-separated) to show the launcher on only those pages. Leave blank for all pages. |
| Position | Bottom right | Where the button anchors — Bottom right, Bottom left, or Bottom center |
| Button Label | 💬 Support | Text shown next to the launcher icon. Leave blank for an icon-only button. |
| Custom Icon | Chat bubble | Upload or link a custom icon to replace the default chat bubble |
| Button Size | 56 px | Diameter of the launcher button in pixels |
| Horizontal Offset | 24 px | Distance from the screen edge |
| Vertical Offset | 24 px | Distance from the bottom of the screen |
Custom trigger elements (.qado-chat-trigger) still work on pages where the launcher is not shown — they open a hidden panel automatically, so customers can always reach support.
AI Chatbot
Configure your first-line bot and when it hands off to a human
When enabled, new customer conversations start with the AI bot. It answers questions using your knowledge base and any instructions you provide. When a customer needs a real person — or after a set number of exchanges — the conversation transitions smoothly to an available agent.
| Setting | Default | Description |
|---|---|---|
| Enable Bot | Off | When off, all new conversations go directly to an agent |
| Bot Name | Assistant | Display name shown on bot messages in the chat |
| Bot Avatar | — | Image shown beside bot messages |
| System Prompt | — | Instructions that define the bot's persona, tone, and scope — e.g. "You are a helpful support assistant for Acme Store. Only answer questions about orders and products." |
| Max Response Length | 1500 tokens | How long the bot's replies can be. Lower this for shorter, snappier answers. |
| Setting | Default | Description |
|---|---|---|
| Provider | OpenAI | Which AI service to use (see provider table below) |
| API Key | — | Your API key for the selected provider |
| Model | gpt-4o-mini | The specific model to call. Each provider has its own model names. |
| Custom API URL | — | For self-hosted or OpenAI-compatible services — overrides the provider's default endpoint |
Supported AI Providers
| Provider | API Key Needed | Suggested Models |
|---|---|---|
| OpenAI | Yes | gpt-4o-mini, gpt-4o |
| Anthropic Claude | Yes | claude-sonnet-4-6, claude-opus-4-6 |
| Google Gemini | Yes | gemini-2.0-flash, gemini-1.5-pro |
| Mistral AI | Yes | mistral-large, mistral-small |
| Groq | Yes | Llama 3, Mixtral (very fast inference) |
| Ollama (self-hosted) | No | Any locally hosted model |
| Any OpenAI-compatible API | Yes | LM Studio, vLLM, etc. — set a Custom API URL |
| Setting | Default | Description |
|---|---|---|
| Escalation Keywords | — | Comma-separated words that instantly trigger a handoff — e.g. human, agent, refund, urgent. Any message containing one of these switches to an agent immediately. |
| Message Threshold | 10 messages | After this many bot exchanges, the conversation automatically escalates to a human regardless of content |
| No Agents Available Message | System message | What the bot says when escalation is triggered but no agents are online |
| Fallback Message | System message | What the bot says if the AI service returns an error or empty response |
| Setting | Default | Description |
|---|---|---|
| Use Knowledge Base | On | Feed your published KB articles into the bot's context so it can answer from your own content |
| Page Reading | Off | Allow the bot to fetch and read content from specific approved URLs and include it in answers |
| Allowed URLs | — | One URL per line — pages the bot may read when Page Reading is on |
Translation
Real-time message translation between customer and agent
When translation is on, a language selector appears in the widget header. The customer picks their preferred language. Agent messages are translated before the customer sees them, and customer messages are translated for the agent — both sides always read in their own language.
| Setting | Default | Description |
|---|---|---|
| Enable Translation | Off | Turn on real-time bidirectional translation in chat |
| Translation Service | Google Translate | Which translation provider to use |
| Available Languages | — | Comma-separated language codes shown in the customer dropdown — e.g. fr, ar, yo, ha, sw |
Supported Translation Providers
| Provider | African Language Support | Notes |
|---|---|---|
| Google Translate | ✅ Yes — Yoruba, Hausa, Igbo, Swahili, and more | Recommended. Widest language coverage. Requires a Google Cloud API key. |
| DeepL | ⚠️ Limited — European languages only | Highest quality for supported pairs. Falls back gracefully for unsupported languages. Requires a DeepL API key. |
| Azure Translator | ✅ Yes | Microsoft Azure Cognitive Services. Requires an Azure API key and region selection. |
Translations are cached so identical phrases are never re-translated, keeping API costs low. The cache can be cleared at any time from Admin Panel → Settings → Maintenance.
WebRTC Voice Calls
Browser-to-browser calls with no external telephony needed
Customers and agents call each other directly through the browser — no phone lines or third-party call services required. Calls are peer-to-peer and can optionally be recorded server-side.
| Setting | Default | Description |
|---|---|---|
| Enable Voice Calls | On | Show the Voice tab and enable calling throughout the plugin |
| TURN Server URL | — | Your TURN server address. Required for calls between users behind NAT or strict firewalls — without it, calls only work on compatible networks. |
| TURN Username | — | Credential username for your TURN server |
| TURN Password | — | Credential password for your TURN server |
| Call Timeout | 60 seconds | How long an unanswered call rings before being abandoned automatically |
| Call Recording | Off | Record voice calls server-side. Recordings can be played back or deleted from the admin panel. |
HTTPS required. Browsers only grant microphone access on secure origins. Your site must have an SSL certificate for voice calls to work.
Voice queue & callbacks. When no agent is available, customers can join a waiting queue or request a callback. Agents manage the queue from their dashboard; the admin panel shows the full queue with callback status controls.
User Roles
Three support roles — assign them to any existing WordPress user
The plugin adds three roles to your WordPress site automatically. Assign them from Support Center → Admin Panel → Agents, or from the standard WordPress Users screen.
Access to the agent dashboard — picks up live chat sessions, replies to customers, manages their assigned tickets, handles voice callbacks, and edits their own profile. Cannot access plugin settings or manage other agents.
Everything a Support Agent can do, plus read-only access to plugin settings and the agents list. Cannot change settings or modify other agents' roles.
Full access — all agent and manager capabilities, plus the ability to change settings, assign and remove agent roles, view analytics, export data, and perform maintenance actions.
WordPress Administrators automatically have full access equivalent to Support Admin — no explicit role assignment needed.
Adding an Agent
1. Go to Support Center → Admin Panel → Agents
2. Click "Add Agent" and search for any WordPress user by name or email
3. Select the user and choose their role (Agent, Manager, or Admin)
4. Save — the user can now log in and access the agent dashboard
Removing an agent strips their support role but does not delete their WordPress account. All chat and ticket history tied to them is preserved.
License
Activating and managing your plugin license
A valid license is required for all features to work. The Settings and License pages remain accessible without a valid key so you can always enter or update it.
| Status | What's available |
|---|---|
| No license / Invalid | Settings and License pages only. All customer-facing output, the agent dashboard, and admin panel are disabled. An admin notice appears in wp-admin. |
| Valid license | All features — live chat, AI bot, voice calls, tickets, knowledge base, translation, agent dashboard, admin panel, floating launcher, and custom triggers. |
Enter your license key at Support Center → Settings → License. After activation, the license is re-verified periodically in the background — no manual renewal step required.
