How to add a chatbot on WordPress

Create a no-code AI chatbot for free.

Having a chatbot widget on your WordPress website is a great way to engage your visitors and quickly address their concerns. And with an AI-powered chatbot, you can even address them instantly, 24/7.

Adding a chatbot, with or without AI, is as easy as pasting the chatbot's embed code in your website's code.

There are two ways to do this:

1. Use a plugin to place the code onto your site.
2. Add the code manually to your theme files.

You can also embed the chatbot using Elementor.

Copy your chatbot embed code

This section will depend on your chatbot platform, but for this guide, we'll use ChatAgents as an example.

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

Method 1: Add the chatbot using a plugin

Use this if you'd prefer not to tinker with your site's theme files.

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

Method 2: Add the chatbot manually to your theme

If you prefer not to add more plugins to your site, you can also embed the code directly to your theme files.

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 the full guide.