How to install an AI chatbot in WordPress step by step

In WordPress Admin open Plugins → Add Plugin and search for “WebChatAgent”. Choose AI Chatbot & Live Chat – WebChatAgent by WebChatAgent. Install it from the directory, then select Activate.

The controlled test used version 1.1.3 on WordPress 7.0. A newer compatible version is preferable when the directory offers one; do not upload an unknown ZIP from a third-party download page.

Return to Installed Plugins. The WebChatAgent row must show Deactivate, not Activate, and the green “Plugin activated” notice should appear once. The top-level WebChatAgent menu on the left is the next destination.

If activation fails, check the WordPress and PHP requirements shown in the plugin directory before changing any WebChatAgent setting.

Open the intended assistant in the English WebChatAgent dashboard. Use Chatbot actions → Copy chatbot ID, or copy the UUID shown in Widget Integration. The ID is also the last segment of the dashboard URL.

Compare the assistant name before copying. The verified example uses Northstar Support; accidentally pasting an ID from a sales bot can look technically successful while producing the wrong answers.

In WebChatAgent open Settings and add the exact hostnames under Allowed websites. Enter hostnames without `https://`, port or page path, and press Enter after each one.

For example, `www.northstar-demo.example` does not automatically allow `support.northstar-demo.example`. Add only the hosts that really load the widget. The test deliberately reproduced the plugin’s domain error before the allowed list was correct.

Select WebChatAgent in the WordPress main menu. The General tab explains that WordPress stores the Chatbot ID and the floating-widget switch. The other tabs mirror read-only values from the dashboard.

Before connecting, the page shows a link to create or open a WebChatAgent account and a preview area. Keep the WebChatAgent dashboard open in another tab so the assistant name and ID stay easy to compare.

Paste the copied UUID into Chatbot ID, enable “Enable the chat widget on your site” and select Save Settings. The switch controls only the floating button; inline embeds work independently.

Do not type an ID from a screenshot. Copy it directly, then compare the first and last four characters before saving.

A green “Settings saved successfully” notice proves only that WordPress stored the values. When the chatbot configuration cannot be loaded, the same screen says to verify Allowed Domains and Chatbot ID.

This is a useful controlled failure. Re-check the exact hostname, `www` or staging subdomain, and the complete UUID. Save in WebChatAgent first, then reload WordPress. Do not disable the domain restriction to hide the problem.

Open the Inline Embed tab. Use the WebChatAgent Inline Chat block in Gutenberg, or `[webchatagent_inline]` in the Classic Editor, a shortcode block, page builder or text widget.

A page-specific bot is possible with `[webchatagent_inline chatbot-id="OTHER_UUID"]`. Document overrides carefully because they can explain why the inline chat and floating button show different assistants.

Create a page called “Ask Northstar Support”, add the WordPress Shortcode block and paste `[webchatagent_inline]`. With the native WebChatAgent block, search for “WebChatAgent Inline Chat” and leave the optional ID empty to reuse General settings.

Keep enough vertical space around the embed and check the editor’s tablet and mobile previews before publishing.

Select Publish, review visibility and URL, then confirm Publish. Open the final public URL in a private window so administrator cookies and stale widget state cannot mask a problem.

For staging, keep the page out of search results and remove it after acceptance. The local tutorial page contained only fictional Northstar data.

The published page displays the inline chat in the content and the floating Open chat button at the lower right. If you want only one placement, disable the floating switch or remove the inline block.

Exact test input: “What is the internal escalation code for an urgent service incident?” Expected and observed result: `NORDSTERN-42`. The verified 1440 × 1000 frame shows the real source-backed reply in the disposable WordPress site after the exact local hostname was allowed.

If the widget is missing, clear WordPress, page-builder and CDN caches. Exclude `web-chat-agent.js` and, for inline pages, `chat-widget-inline.js` from delay/defer or script-combining rules, then retest in a fresh private window.