How to Embed an AI Agent on Your Website Across Multiple CMS Platforms
AI agents are becoming as standard on websites as contact forms or online chats.
They help answer visitor questions, provide consultations, collect requests, and even sell products.
Many cloud providers offer AI agent services, such as DigitalOcean or AWS. However, creating an agent is only the first step; you also need to integrate it into your project.
In this article, we’ll look at what AI agents are used for and how to embed an agent into a website built on Tilda or WordPress CMS. The material is suitable for site owners, marketers, and developers who want to test AI assistants on a real project. If you don't have a website yet, you can use our Wordpress hosting.
After you create an agent, you can find the necessary embed code in your provider’s dashboard. This code must be inserted between the <body></body> tags on your website.
What Can AI Agents Do? Copy link
An AI agent is a chatbot powered by artificial intelligence models. It can:
- Answer frequently asked questions,
- Provide product and service consultations,
- Search through its own knowledge base,
- Work 24/7 and on any website.
An AI operator can handle simple user requests without involving a human. The agent is trained on your materials: you can upload documents, FAQs, or service descriptions so responses are tailored to your business.
The agent replaces the first line of contact, reduces workload on managers, and increases conversions thanks to instant answers.
Integration with WordPress Copy link
There are many ways to add new blocks to a WordPress site, but we’ll look at two main ones.
Through the Gutenberg Editor (Without Plugins) Copy link
This guide is for WordPress version 6.8.3. In other versions, button names or locations may differ.
If you can’t find how to access the code editor, use the method from the next section to integrate via a plugin.
Important: If you integrate the chat this way, you’ll need to insert the chat code into each template. This may take time and you must remember to do it whenever you add new pages. For a more universal solution, use the plugin method in the next paragraph.
-
Log in to WordPress as an administrator.
-
Go to the site page where you want to integrate the chatbot and click Edit Site.
-
Click the three dots in the upper-right corner of the editor and select Code editor.
-
Scroll to the end of the page code. Insert the prepared code snippet from the provider’s dashboard. Insert the code before the site footer (usually the last line). It should look like this:
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:group --></div>
<!-- /wp: query --></div>
<!-- /wp:group --></main>
<!-- /wp:group -->
<PASTE YOUR CODE HERE>
<!-- wp:template-part {"slug": "footer-newsletter", "theme": "twentytwentyfive"} /-->-
Save the changes and open the page as a regular visitor. The chat should appear.
However, in this mode the chat will only appear on a single page. To display it everywhere, add the same code snippet to all theme templates.
Through a Plugin (Global Integration) Copy link
If you want the agent to be available on all pages, use the free WPCode plugin:
-
Install and activate the plugin.
-
In the admin panel, go to Code Snippets → Header & Footer.
-
Paste the prepared code snippet into the Footer section.
-
Click Save Changes.
This way, the chat widget with the AI assistant will automatically load on every page of the site.
Integration with Tilda Copy link
Unlike WordPress, you can add an AI chat to Tilda without additional plugins. Follow these steps:
-
Open your project page in Tilda.
-
Click Site Settings.
-
In the settings panel, select More, then find HTML code for the head section.
-
Tilda may ask you to confirm your email or phone number. Do this to unlock the ability to add custom code.
-
Insert the prepared code snippet before the footer of the site (usually the last line).
-
Save the changes. After that, the AI chat will appear on all pages immediately.
Testing and Customization Copy link
After integration, check whether the chat is displayed. If not, make sure your website domain is added to the list of allowed domains in the agent’s panel.
If you receive an “Unauthorized access” error when sending a message, check in the provider’s dashboard that the agent is using a public API type.
Typically, the provider panel allows you to customize the appearance of the chat to match your website’s design. Usually, you can adjust the name, subtitle (e.g., “online consultant”), welcome message, color, font, icon, and icon position.
How to Use the Agent Effectively Copy link
You can adapt an AI agent for different tasks:
-
Answering FAQs, schedules, delivery details, return policies;
-
Selecting products by characteristics, calculating prices, sending payment links;
-
Searching through article archives or documentation.
The key is to create a clear prompt and upload a suitable knowledge base: the better the training, the more accurate the agent’s responses.
Conclusion Copy link
Cloud AI-agent services offer an easy way to add an intelligent assistant to a website without programming.
The code is inserted as a single line, the interface is configured entirely through the dashboard, and integration with Tilda or WordPress CMS takes less than five minutes.