Skip to content
New

Your dashboard is here — every conversation, every lead it captured, and what people keep asking about.

Take a look →

How to Add an AI Chatbot to WordPress

Give website visitors a way to ask questions, explore your services, and contact your business through chat. You can add AI Chatbot to an individual WordPress page or make it available through a floating launcher across your site.
PetalFlower studio assistant

Hi there 👋

Ask me about delivery, returns or opening hours.

Write your message...
1

Check your WordPress setup

Setup starts in the AI Chatbot editor. Once your chatbot is ready, you’ll place its installation code in WordPress.

You need an account with permission to save custom HTML and JavaScript.

  • Self-hosted WordPress: installation depends on your account permissions and website settings.
  • WordPress.com: custom JavaScript requires a plugin-enabled plan with hosting features activated.

Your theme also determines which site-wide installation options are available. Block themes use the Site Editor; classic themes may provide footer widgets or editable template files.

Create your chatbot and copy its code

Enter your website address in the AI Chatbot editor. Review the information gathered during setup, add anything visitors commonly ask about, and check the chatbot’s responses.

Choose the layout that suits your website:

  • Embedded chat window: a visible conversation area within your content.
  • Floating chatbot: a launcher visitors click to open the conversation.

Customize the appearance, save your chatbot, and copy the complete installation snippet from your dashboard.

Add an embedded chat to your page

  1. Choose a page. In your WordPress dashboard, open Pages and click Edit beneath the page title.

  2. Insert an HTML block. Use the + button to find Custom HTML, or type /html into an empty block.

  3. Paste the installation code. Open the block’s HTML editor and add the complete embedded chat snippet.

  4. Save your page. Apply the block changes, then click Update, Save, or Publish, depending on your editor.

  5. View the result. Open the published page to check the chat.

Use the Custom HTML block rather than the Code block, which displays code as text.

Add a floating chat across your website

Choose the method that matches your active theme.

  1. Go to Appearance → Customize → Widgets.

  2. Select a footer widget area used throughout your website.

  3. Add a Custom HTML widget or block.

  4. Paste your complete floating chatbot code and click Publish.

The launcher will appear on pages that load that widget area.

  1. Open Appearance → Editor.

  2. Go to Patterns and find your footer template part.

  3. Edit the footer and insert a Custom HTML block.

  4. Add the complete floating chatbot code and save.

Check pages with different templates. A landing page with its own footer may need a separate placement.

Use the theme file editor

For classic themes, AI Chatbot also documents a template-file method:

  1. Open Appearance → Theme File Editor.

  2. Select Theme Footer (footer.php).

  3. Place the complete installation snippet before </body>.

  4. Click Update File.

Direct theme edits can be overwritten by updates. Use a maintained child theme or ask your developer to handle this placement.

Install the chatbot through one method to avoid duplicate launchers.

Add a floating chat to selected pages

Follow the page instructions above, but paste the code for your floating layout into the Custom HTML block.

Repeat on each page where you want the launcher. Keep the same chatbot out of the shared footer if it should appear only on these selected pages.

Test your chatbot on the live website

Open your website in a private browser window and start a conversation. Visit several pages to confirm the chat appears where you intended.

Check that:

  • Messages are sent successfully and answers are readable.
  • The embedded interface fits within its section.
  • The launcher leaves navigation and other controls accessible.
  • Links and configured actions open the correct destinations.
  • The chat works comfortably on desktop and mobile.

Try questions that reflect real visitor needs, such as “Which service should I choose?” or “How can I request a quote?” Refine the chatbot’s knowledge if the answers need more detail.

Troubleshoot installation problems

The snippet appears as text. Confirm that you used a Custom HTML block and that your website allows JavaScript.

Part of the code disappears after saving. Ask your administrator to check editing permissions and HTML filtering.

The chatbot is missing from certain pages. Check whether those pages use a different footer or template.

Your changes aren’t visible. Save the page or template again, clear the relevant website cache, and reload.

Get help with installation

Free installation assistance is available. Send the support team your website URL, theme name, and the pages where you want the chatbot. Mention any page builder you use so the team can tailor the instructions.