How to add an AI chatbot to WordPress

Ways to add a chatbot to WordPress

This guide shows the widget way with Elfsight AI Chatbot, then what building your own involves.

Create the chatbot

1. 1.

   Pick a template and enter your URL

   Open the editor, choose a template and paste your WordPress site’s address. The chatbot reads up to 200 of your pages. No website yet? Enter your business details by hand.

2. 2.

   Add knowledge

   Upload files (PDF, DOCX, PPTX, TXT, JSON, HTML, MD), write Q&A pairs for prices and policies, and add text blocks for anything not on the site.

3. 3.

   Set the agent

   Name and picture, role, tone (Friendly, Professional, Casual, Direct or your own), answer length, welcome message and suggested questions, and conversation rules for what it should and shouldn’t answer.

4. 4.

   Turn on skills

   Collect contacts, send a follow-up when a visitor goes quiet, show action buttons, and offer your team’s contacts when the agent can’t help.

5. 5.

   Match your theme

   Choose one of six themes, an accent color and a font close to your WordPress theme’s.

More on each step in how to add an AI chatbot to your website.

Add the chatbot to every page of WordPress

A floating chat usually belongs on every page. Click Add to website in the editor, copy the code, then use one of these:

1. 1.

   A header and footer plugin

   Install a code snippets plugin such as WPCode from Plugins → Add New, open its header and footer settings, paste the code into the footer box and save. The safest way: it survives theme updates.

2. 2.

   The footer of a block theme

   Go to Appearance → Editor → Patterns → Footer, add a Custom HTML block, paste the code and save.

3. 3.

   A widget area of a classic theme

   Go to Appearance → Widgets (or Customize → Widgets), add a Custom HTML widget to a footer area, paste the code and publish.

To keep the chat off some pages — checkout, for example — use the chatbot’s visibility settings instead of removing the code.

Add the chatbot to one WordPress page

1. 1.

   Open the page

   In WordPress go to Pages, hover over the page and click Edit.

2. 2.

   Add a Custom HTML block

   Click +, find Custom HTML and place it where the chat should appear. In the classic editor switch to the Text tab instead.

3. 3.

   Paste the code and update

   Paste the chatbot code and click Update. An embedded chat shows in that spot; a floating one opens from the corner of that page only.

Page builders work the same way: Elementor’s HTML widget, Divi’s Code module. See Elementor AI chatbot and WooCommerce AI chatbot for stores.

WordPress.com or WordPress.org?

On a self-hosted WordPress.org site any of the ways above works. On WordPress.com, adding scripts and plugins needs the Business plan or higher; on lower plans the code is stripped or shows as plain text.

Where to show the chatbot on your site

• Pages where people get stuck — pricing, contact, product and checkout pages are where questions come up.

• Bottom right is the default visitors look for; move it left or to the bottom center if it covers a cart or cookie button.

• Greeting and suggested questions work better than a bare button: they tell visitors what the chat can do.

• An embedded chat fits a help or contact page where the chat is the page’s main content.

• Show or hide by page and device in the chatbot’s settings, so the same code serves the whole site.

Build your own chatbot with the OpenAI API

If you need full control, you can build a chatbot on an AI model’s API. It takes four pieces:

1. 1.

   An API key

   Create one in the provider’s developer platform and keep it secret — never put it in page code.

2. 2.

   A backend

   A small server script that receives the visitor’s message, calls the API and returns the answer. It needs hosting and HTTPS.

3. 3.

   A chat interface

   HTML and JavaScript for the chat window, added through a code snippets plugin or a Custom HTML block.

4. 4.

   Your knowledge

   Out of the box the model knows nothing about your business; you have to feed it your content and keep it current.

You also maintain everything yourself: API limits and costs, model changes, security, mobile layout. For most WordPress sites a ready-made widget is faster and cheaper to run.

Tips for a better WordPress chatbot

• Train it on real questions. Load your top 20 questions with answers, current prices and policies, and remove outdated versions.

• Give it a voice. Set the tone and add a few conversation rules so it sounds like your brand, not a generic bot.

• Set a fallback. Offer your team’s contacts when the agent can’t answer or the visitor asks for a person.

• Read the chats. Chats and leads are in your dashboard, and transcripts can be sent to your email — check them weekly and fill the gaps.

• Test on phones. Check that the launcher doesn’t cover menus or buttons on small screens.

• Update your privacy policy. Mention the chatbot and the contact details it collects, and say in the chat footer that answers come from AI.

Troubleshooting

1. 1.

   The chatbot doesn’t appear

   Check that the code is on the page you’re viewing, then clear your caching plugin and CDN cache. Optimization plugins that delay or combine JavaScript can block it — exclude the chatbot’s script from them.

2. 2.

   The code shows as text

   It was pasted into a Paragraph block or the Visual tab. Use a Custom HTML block or the classic editor’s Text tab; on WordPress.com, check your plan.

3. 3.

   It shows on pages where it shouldn’t

   Set page rules in the chatbot’s visibility settings, or move the code from the site-wide footer to single pages.

4. 4.

   Answers are wrong or vague

   Add the missing facts as Q&A pairs or text blocks, remove contradicting files, and tighten the conversation rules.

Full guide with screenshots: Adding Elfsight widget to WordPress ↗ · Prefer not to do it yourself? Request free installation ↗