How to add a chatbot to WordPress

ChatAgents is an AI chatbot builder that can address customer concerns, set appointments, answer account-related questions, generate leads, log internal requests, and more.

Create a fully-functional AI chatbot with our $0 plan (free forever).

Chatbots are a great way to retain website visitors. They keep users engaged and, when done right, can improve your brand's online credibility.

Placing a chatbot on WordPress is as easy as copy-pasting your chatbot's embed code onto your website's backend.

There are two ways to do this:

1. Using a plugin to inject the code into your site.
2. Adding the code manually to your theme files.

You can also embed the chatbot using Elementor.

Copy your chatbot embed code

This section will vary depending on your chatbot builder. In this guide, we'll use ChatAgents as the example.

To get started:

1. In your dashboard, go to Agent Channels > Website.
2. Toggle on Enable Embed.
3. In the Embed Code section, click Copy.

You’ll use this code in one of the methods below.

Method 1: Add the chatbot using a plugin

This method is recommended if you’d prefer not to edit theme files directly.

1. In your WordPress dashboard, go to Plugins > Add New
2. Search for and install a plugin like Insert Headers and Footers
3. Once installed, go to Settings > Insert Headers and Footers
4. Paste your embed code into the Scripts in Footer field
5. Click Save

Your chatbot will now load across all pages of your website.

Method 2: Add the chatbot manually to your theme

You can also add the embed code directly to your theme’s footer.

1. In your WordPress dashboard, go to Appearance > Theme File Editor
2. In the file list on the right, open footer.php under your active theme
3. Scroll to the bottom of the file
4. Paste the embed code just before the closing </body> tag
5. Click Update File to save

This will also load the chatbot across your site.

Note: If your theme updates in the future, you may need to re-add the code unless you're using a child theme.

Add the chatbot using Elementor

If you're using Elementor, you can add the chatbot to any part of your website using the HTML widget.

1. Open your WordPress dashboard and go to Pages (or Templates, if you're editing a global section like the footer)
2. Click Edit with Elementor on the page or section you want to modify
3. In the Elementor panel, search for the HTML widget
4. Drag the HTML widget into the section where you'd like the chatbot to appear (commonly the footer)
5. In the widget’s code field, paste your ChatAgents embed code
6. Click Update to save your changes
7. Visit your site to confirm that the chatbot appears as expected

Tip: To show the chatbot across your entire site, consider adding the HTML widget and embed code to a global footer template using Elementor Pro.

Want to restrict the chatbot to logged-in users?

If your chatbot is designed for members, staff, or customers only, you can enable the Authorized User Only setting in ChatAgents. This hides the chatbot from all site visitors unless they're logged in to your platform.

To set this up:

• Go to Agent Channels > General in your dashboard
• Scroll to the Authorization section
• Toggle on Authorized User Only and copy the Secret Key

To learn more about how this feature works and how to pass user data securely, see:
Create an AI Chatbot for Logged-In Users

Once embedded, your chatbot will start responding based on your configuration. You can adjust its tone, data sources, or AI model anytime from your ChatAgents dashboard.