Back to Blog

How to Embed an AI Chatbot on Your WordPress Website (Step-by-Step)

10 min read

Add an AI chatbot to your WordPress site in under 30 minutes. Two methods — plugin or theme file. Copy the ready-made code from the Customization tab, paste it, and you're live. No developer needed.

How to Embed an AI Chatbot on Your WordPress Website (Step-by-Step)

Your WordPress Site Is Working Hard — Your Support Isn't

Your WordPress website is live around the clock. It takes traffic at 2 AM, attracts visitors on weekends, and gets discovered by people in time zones your team has never thought about.

But the moment a visitor has a question — about your pricing, your product, how to get started — there is nobody there to answer it. They hit a contact form. They wait. And most of them leave before you ever respond.

An AI chatbot fixes this entirely. Train it on your business content, embed it on your WordPress site, and it answers customer questions instantly — 24/7, without anyone on your team lifting a finger.

The good news: adding an AI chatbot to WordPress does not require a developer. It does not require coding knowledge. It requires one script tag placed in the right location — and this guide shows you exactly how to do it, two different ways, so you can choose whichever method suits your setup.

By the end of this guide your chatbot will be live on every page of your WordPress site, answering visitor questions automatically.

What You Need Before You Start

Before touching your WordPress dashboard, you need three things ready. Getting these right upfront means the embedding process takes minutes, not hours.

1. A customsupportai.com Account With a Trained Chatbot

If you have not created your chatbot yet, go to customsupportai.com and sign up — no credit card required on the free plan. Once inside, create your chatbot and train it on your business content. You can train it using your website URL, PDF documents, uploaded files, or custom text typed directly into the dashboard.

Do not skip the training step. A chatbot embedded on your site with no training content will not give useful answers. Train it first, embed it second.

2. Your Embed Code From the Customization Tab

Go to the Customization tab in your customsupportai.com dashboard. You will see a ready-made embed code — already configured with your chatbot. Copy it. That is all you need. No replacement, no editing. The code is ready to paste directly into your WordPress site.

3. Your Domain Added in Settings

This is a step most guides skip — and it is the most common reason chatbots do not appear after embedding. Before your widget will display on your site, you need to add your domain in the chatbot Settings tab inside your customsupportai.com dashboard. Add your domain exactly as it appears in your browser — for example yourdomain.com and www.yourdomain.com. If you use both versions of your URL, add both.

If you skip this step, you will see a "Domain not allowed" error and the widget will not appear — even if your embed code is placed correctly.

The Embed Code — Copy, Paste, Done

The embed code for customsupportai.com is a single line of HTML. Go to the Customization tab, copy the ready-made code — it is already configured with your chatbot — and paste it just before the closing body tag on your site. That is all it takes to make the chat widget appear on every page. The two methods below show you exactly where to paste it in WordPress.

Method 1: Using the Insert Headers and Footers Plugin (Recommended)

This is the easiest and safest method. You install a free WordPress plugin that gives you a dedicated box to paste footer scripts — no theme file editing, no risk of breaking your site.

Step 1: Install the Plugin

From your WordPress dashboard, go to Plugins → Add New. Search for "Insert Headers and Footers" — look for the plugin by WPBeginner (it has over 1 million active installations). Click Install Now and then Activate.

Step 2: Open the Plugin Settings

Once activated, go to Settings → Insert Headers and Footers in your WordPress dashboard left sidebar. You will see two text boxes: one for header scripts and one for footer scripts.

Step 3: Paste Your Embed Code in the Footer Box

Click inside the Scripts in Footer box — this outputs just before the closing body tag, which is exactly where the embed code needs to go. Paste the code you copied from the Customization tab. It is ready to use — no changes needed.

Step 4: Save

Click the Save button. That is it.

Step 5: Verify It Is Working

Open your WordPress website in a new browser tab. Within a few seconds you should see the chat bubble appear in the bottom-right corner of the page. Click it — the chat window should open and display your welcome message. If the bubble does not appear, check the troubleshooting section at the end of this guide.

Method 2: Editing the Theme footer.php File (For Technical Users)

This method edits your WordPress theme's footer file directly. It achieves the same result as Method 1 without needing a plugin. Use this method if you prefer to keep your plugin count low or are comfortable navigating theme files.

Important: If you update or change your WordPress theme in the future, this edit may be removed. Consider using a child theme to prevent this — or use Method 1 if you want a safer, more permanent solution.

Step 1: Open the Theme File Editor

From your WordPress dashboard, go to Appearance → Theme File Editor. If you do not see Theme File Editor in your menu, it may have been disabled by your hosting provider for security reasons. In that case, use Method 1 instead.

Step 2: Open footer.php

On the right side of the Theme File Editor, you will see a list of theme files. Click on footer.php to open it.

Step 3: Find the Closing Body Tag

Inside footer.php, look for either <?php wp_footer(); ?> or the actual closing tag </body>. Depending on your theme, you will see one or both.

Step 4: Paste the Embed Code

Add your embed code just before <?php wp_footer(); ?> or </body> — whichever appears in your file. Paste the ready-made code from your Customization tab. Click Update File at the bottom of the editor.

Step 5: Verify It Is Working

Open your WordPress website in a new browser tab. The chat bubble should appear in the bottom-right corner within a few seconds. Click it to confirm the chat window opens and your welcome message displays correctly.

How to Verify Everything Is Working Correctly

Once embedded using either method, run through this quick checklist to confirm your chatbot is fully operational.

  • Chat bubble appears in the bottom-right corner of your website
  • Clicking it opens the chat window
  • Your welcome message displays correctly
  • Sending a test message gets a response from the AI

If the widget is not appearing: Confirm your domain is added in the Settings tab of your customsupportai.com dashboard — this is the most common cause. Double-check that you pasted the exact code from the Customization tab. Check that the script is placed before the closing body tag and not inside the head section. Try opening your site in an incognito or private browser window to rule out caching issues.

If you see "Domain not allowed": Go to your customsupportai.com dashboard → Settings tab → add your exact domain. If your site uses both yourdomain.com and www.yourdomain.com, add both entries separately.

If the widget appears on some pages but not others: This means the script is placed on specific pages rather than in a shared footer. Make sure you used the plugin footer box (Method 1) or the footer.php file (Method 2) — both apply the script site-wide.

What Your Visitors Experience After Embedding

Once your chatbot is live, here is what happens from your visitor's perspective: A visitor lands on any page of your WordPress site. In the bottom-right corner, they see a small chat bubble — styled to match your brand colours and configured with the welcome message you set up in your Customization tab.

They click it. The chat window opens. They type a question — about your pricing, your product, how to get started, anything your chatbot has been trained on. The AI responds in seconds, accurately, using the content from your knowledge base.

If the question is something the AI cannot answer confidently, it escalates to your team with the full conversation history intact — so your team picks up exactly where the bot left off, with full context, without the customer repeating themselves.

This happens on every page of your site. At every hour of the day. In the visitor's own language — customsupportai.com supports 100+ languages with automatic detection, so international visitors get responses in their native language without any additional setup.

Common Mistakes to Avoid

  • Embedding before adding your domain in Settings — The widget will not appear until your domain is registered in the customsupportai.com Settings tab. This step must happen before embedding, not after.
  • Pasting the code in the wrong location — The script must go just before the closing body tag. Placing it in the head section or inside a page content area will either cause errors or only show the widget on that specific page.
  • Copying the code manually instead of from the Customization tab — Always copy the ready-made code directly from the Customization tab. Do not type it manually or modify it. A single character error means the widget will not load correctly.
  • Embedding without training the chatbot first — A chatbot with no training content gives vague or unhelpful answers. Train it on your website content, FAQs, and documentation before going live.
  • Forgetting to test on mobile — A significant share of your WordPress visitors are on phones. After embedding, open your site on a mobile device and confirm the chat bubble appears correctly.
  • Not updating the chatbot after site changes — When you update your pricing, add new features, or change your policies, your chatbot's training content needs to reflect those changes. Set a reminder to review and update your knowledge base whenever significant changes happen on your site.

Key Takeaways

  • One script tag is all it takes to add a fully functional AI chatbot to every page of your WordPress site — no developer, no complex configuration.
  • Add your domain in the Settings tab first. This is the step most people miss and the most common reason the widget does not appear.
  • Two methods available: the Insert Headers and Footers plugin (easiest, safest, recommended for most users) and direct footer.php editing (for technical users who prefer no extra plugins).
  • Your embed code comes ready-made from the Customization tab of your customsupportai.com dashboard. Copy it and paste it — no replacement or editing needed.
  • Test immediately after embedding — visual check, test message, and mobile check. Fix any issues before real visitors encounter them.
  • Train your chatbot before embedding. The quality of your chatbot's answers depends entirely on the quality of your training content.

Get Your WordPress Chatbot Live Today

The steps in this guide take under 30 minutes from start to finish — including creating your account, training your chatbot, and embedding it on your WordPress site.

Once it is live, your website answers customer questions around the clock. Visitors get instant, accurate responses. Your team handles only the complex conversations that genuinely need a person. And your WordPress site becomes an active support channel instead of a passive information page.

  • Go to customsupportai.com and create your free account — no credit card required
  • Create your chatbot and train it using your website URL, PDFs, documents, or custom text
  • Copy your ready-made embed code from the Customization tab
  • Add your domain in the Settings tab
  • Use Method 1 or Method 2 above to paste the code on your WordPress site
  • Verify the widget appears and test it with a real question

That is the complete process. Your chatbot can be live on your WordPress site before you finish your next coffee. Create your free account at customsupportai.com — no credit card needed.

Ready to Transform Your Customer Support?

Start building your AI customer support chatbot today. No coding required, no technical expertise needed.

Get Started Free