How to Add a Chatbot to Your Website (WordPress, Shopify, Wix & More)
Step-by-step guide to adding an AI chatbot to any website. Covers WordPress, Shopify, Wix, Squarespace, and custom sites in under 10 minutes.
Asad Ali
Founder & CEO
March 30, 2026
Step-by-step guide to adding an AI chatbot to any website. Covers WordPress, Shopify, Wix, Squarespace, and custom sites in under 10 minutes.
73% of customers expect an instant response when they contact a business online. Not in an hour. Not in five minutes. Instantly. That expectation is only growing, and most support teams cannot staff around the clock to meet it. A chatbot can. And you can add one to your website in under 10 minutes, regardless of the platform you use.
This guide walks you through three integration methods, six platform-specific tutorials, and the customization and testing steps to get your chatbot live and working today. We use Chatsy as the primary example throughout, but the core steps apply to any chatbot platform.
Disclosure: We built Chatsy, which is used as an example in this guide.
There are three integration methods, each suited to different needs:
| Method | Best For | Difficulty | Time |
|---|---|---|---|
| Widget embed (script tag) | Most websites, floating chat bubble | Easy | 2 minutes |
| iFrame embed | Inline placement within a page section | Easy | 5 minutes |
| API integration | Custom frontends, mobile apps, advanced workflows | Intermediate | 30+ minutes |
Most people should start with the widget embed. It is a single line of code that adds a chat bubble to every page on your site. The other methods exist for specific use cases we cover below.
This walkthrough reflects current best practice as of April 2026, compiled from:
Where steps differ across vendors (e.g., placement of API keys, webhook configuration, embed snippet behavior), we flagged the discrepancy and showed both. We avoided claims we could not reproduce in a real test environment.
Before you install anything, make sure you have the following ready:
The widget embed is the most common method. You paste a single script tag into your site, and a chat bubble appears in the bottom-right corner of every page. Visitors click it to open a conversation.
Step 1: Log into your Chatsy dashboard and navigate to Settings > Embed.
Step 2: Copy your embed script. It looks like this:
html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
Replace YOUR_AGENT_ID with your actual agent ID from the dashboard.
Step 3: Paste this script into your website's HTML, just before the closing </body> tag. Alternatively, add it inside the <head> section. The defer attribute ensures the script loads without blocking your page.
Step 4: Save and publish your changes. Visit your site, and you should see the chat widget in the bottom-right corner.
That is it. The widget handles everything: the chat interface, message history, typing indicators, and mobile responsiveness. You configure the appearance and behavior from your Chatsy dashboard without touching code again.
Use an iFrame when you want the chatbot embedded inline on a specific page rather than as a floating bubble. This is useful for dedicated support pages, help centers, or landing pages where you want the chat interface to be a visible part of the page layout.
html<iframe src="https://chatsy.app/chatbot-iframe/YOUR_AGENT_ID" width="100%" height="600" style="border: none; border-radius: 12px;" title="Chat with us" ></iframe>
You can adjust the width and height to fit your page layout. Place the iFrame inside any container element on your page. It works on all platforms that allow custom HTML.
One trade-off: the iFrame method does not follow visitors across pages the way the widget does. It only appears where you place it. For most businesses, the widget embed is the better default.
The API method is for developers building custom chat interfaces, mobile apps, or complex workflows where the standard widget does not fit. Instead of using a pre-built UI, you send and receive messages programmatically through the Chatsy API.
This method requires writing code. You make HTTP requests to the API endpoint, handle responses, and build your own chat interface. It gives you full control over the user experience but requires significantly more effort than the other two methods.
The API approach is ideal when you need to:
A basic API integration involves sending a POST request with the user's message and receiving the chatbot's response as JSON. You then render that response in whatever UI you have built. Most platforms provide SDKs or client libraries to simplify this process.
For most websites, start with the widget embed. You can always migrate to the API later if your needs outgrow the standard widget.
WordPress powers over 40% of the web, so this is where most people start. You have two options: install a plugin or add the embed code manually.
Using a plugin is the fastest method and does not require any coding. The plugin handles script loading, and most provide a settings page where you can configure the widget without leaving WordPress.
For a detailed walkthrough, see our WordPress integration guide.
If there is no plugin available, or you prefer manual control:
footer.php file for your active theme.</body> tag:html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
Alternatively, if you are using a block theme or the Full Site Editor, add a Custom HTML block to your site's footer template and paste the script there.
Important: If you update or switch your WordPress theme, you may need to re-add the script. Consider using a plugin like Insert Headers and Footers to make your code persistent across theme changes.
Shopify stores benefit enormously from chatbots. They handle product questions, order status inquiries, and shipping questions around the clock, which directly impacts conversion rates.
App Store installations are managed through Shopify's admin panel, making updates and removal straightforward.
If your chatbot platform is not listed in the Shopify App Store, add the code manually:
theme.liquid.</body> tag.</body>:html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
The chatbot will now appear on every page of your Shopify store. If you use a headless Shopify setup (Hydrogen or a custom storefront), treat it as a custom site and follow the instructions in the Custom HTML/React/Next.js section below.
For more details, see our Shopify integration guide.
Wix does not allow direct HTML editing in the traditional sense, but it provides a custom code feature that works for chatbot embeds.
html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
The chatbot widget will appear on your Wix site after a few moments. You may need to publish your site or clear the Wix cache before the changes are visible to visitors.
One thing to be aware of: Wix's editor preview does not always render custom scripts. If you do not see the widget in the editor, check your published live site instead.
For additional guidance, see our Wix integration guide.
Squarespace has a built-in code injection feature that makes adding a chatbot straightforward.
html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
The chatbot widget will now appear on every page of your Squarespace site.
If you want the chatbot to appear only on specific pages instead of site-wide, use a Code Block within the page editor:
Keep in mind that Squarespace's code injection is available on Business and Commerce plans. If you are on a Personal plan, you will need to upgrade to use this feature.
For the full walkthrough, see our Squarespace integration guide.
Webflow gives you fine-grained control over custom code, making chatbot installation clean and simple.
</body> tag), paste the embed script:html<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
The widget will appear on every page of your Webflow site after publishing. Custom code in Webflow only runs on the published site, not in the Designer preview, so you will need to publish and check the live URL to confirm the widget is working.
If you want the chatbot on specific pages only, use Webflow's page-level custom code instead:
</body> tag field.For complete instructions, see our Webflow integration guide.
If you manage your own code, you have the most flexibility. Here is how to add a chatbot to each type of custom site.
Add the script tag to your HTML file, just before the closing </body> tag:
html<!DOCTYPE html> <html> <head> <title>Your Website</title> </head> <body> <!-- Your page content --> <script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script> </body> </html>
That is all. The script loads asynchronously and does not affect your page load speed.
Add the script tag to your public/index.html file, the same way you would with plain HTML. Alternatively, load it dynamically in your root component:
jsximport { useEffect } from 'react'; function App() { useEffect(() => { const script = document.createElement('script'); script.src = 'https://chatsy.app/api/embed-script/YOUR_AGENT_ID'; script.defer = true; document.body.appendChild(script); return () => { document.body.removeChild(script); }; }, []); return <div>{/* Your app */}</div>; }
In Next.js, use the built-in next/script component. Add it to your root layout file (app/layout.tsx or pages/_app.tsx):
tsximport Script from 'next/script'; export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" strategy="lazyOnload" /> </body> </html> ); }
The lazyOnload strategy ensures the chatbot script loads after the page is fully interactive, keeping your Core Web Vitals scores intact.
Once the chatbot is installed, customize it so it fits your brand and actually helps visitors. Most customization is done from your chatbot platform's dashboard, not in code.
Match the chat widget to your site's color scheme. In Chatsy, go to Settings > Appearance to set your primary color, text color, and background. A widget that looks like it belongs on your site builds more trust than a generic one.
The first message visitors see matters. Avoid generic greetings like "Hello! How can I help you?" Instead, be specific: "Hi there. Ask me anything about our pricing, features, or how to get started." A clear greeting sets expectations and encourages engagement.
The default bottom-right position works for most sites. If your site has a floating action button or other element in that corner, move the chatbot to the bottom-left. Make sure it does not overlap with cookie banners, back-to-top buttons, or other fixed elements.
If your audience is multilingual, configure the chatbot to detect the visitor's browser language and respond accordingly. Chatsy supports automatic language detection for over 50 languages. Set the default language in your dashboard under Settings > General.
If you have live agents, configure the chatbot to show availability status. When agents are offline, the chatbot should let visitors know and offer to collect their email for follow-up. This prevents frustration from unanswered live chat requests.
After helping thousands of businesses install chatbots, these are the five mistakes we see most often. Avoid them to save yourself time and frustration.
Adding a chatbot that cannot answer your customers' questions is worse than having no chatbot at all. Visitors will try it once, get a useless response, and never trust it again. Before going live, upload your help articles, FAQs, and product documentation. Test the 20 most common questions your support team receives. If the chatbot cannot answer them accurately, keep training before you launch. A well-trained chatbot that handles 80% of questions correctly on day one will build trust. One that guesses wrong will lose it permanently. See our guide on common chatbot mistakes for more on this.
Some businesses make the widget tiny, transparent, or tucked away in a submenu. If customers cannot find it, they will not use it. Keep the widget visible in a standard position (bottom-right or bottom-left corner). Use a contrasting color so it stands out from your background.
AI chatbots are good, but they are not perfect. Some questions require a human -- complex billing disputes, sensitive account issues, or situations where the customer is upset and needs empathy that AI cannot deliver. If your chatbot has no escalation path, frustrated customers will leave your site instead of getting help. Configure handoff rules so conversations route to a live agent when the chatbot is unsure, when the customer explicitly asks for a human, or when the topic involves billing, refunds, or account security. A smooth handoff preserves the conversation context so the customer does not have to repeat themselves.
Over half of web traffic is mobile, and for e-commerce sites that number is often closer to 70%. Test your chatbot on an actual phone, not just a browser's responsive mode. Make sure the widget does not cover critical page elements like "Add to Cart" buttons or navigation menus. Verify the chat window is usable on small screens, that text is readable without zooming, and that the close button is easy to tap. Most modern chatbot widgets are responsive by default, but always verify on both iOS and Android devices before going live.
If you install the chatbot via a plugin and also paste the embed code manually, you will get duplicate widgets. This causes visual glitches, double messages, and a poor experience. Pick one installation method and stick with it.
Before announcing your chatbot to the world, run through this checklist:
Functionality:
Appearance:
Performance:
Edge Cases:
If everything checks out, you are ready to go live.
Hold off if you have not written any source content for the bot to ground on: an empty knowledge base produces an empty bot, and no embed code can fix that. Hold off if your conversion path is already well-tuned and chat would only add UI noise (clean pricing page, fast checkout, low support volume): adding a widget for the sake of having one can hurt mobile conversion. And hold off if you cannot commit at least an hour a week to reviewing transcripts in the first month: a launched-and-forgotten chatbot decays fast and starts looking dumber than it is. Better to delay launch than ship one and abandon it.
No. The embed script uses the defer attribute, which means it loads after your page content has finished rendering. The script itself is lightweight (typically under 50 KB). It should not have a measurable impact on your Core Web Vitals or page load speed.
Yes. Most chatbot platforms, including Chatsy, let you create multiple agents under a single account. Each agent gets its own embed code and can be trained on different content. This is useful if you run several brands or properties.
Not for the widget embed method. If you can copy and paste a line of code into your website's settings, you can install a chatbot. The platform-specific sections above provide step-by-step instructions for each CMS. For the API integration method, you will need development experience.
Remove the embed script from wherever you placed it: your theme file, code injection settings, or plugin. If you installed through a plugin, deactivating and deleting the plugin will remove the chatbot. The removal takes effect immediately once you save and publish.
Yes. Most chatbot platforms let you configure the chatbot to ask for a visitor's name and email before or during the conversation. In Chatsy, you can set this up under Settings > Lead Capture. Collected information syncs to your dashboard and can be exported or pushed to your CRM via integrations.
You now have a chatbot running on your website. Here is what to do next:
If you have not created your chatbot yet, start with Chatsy for free. You can have a trained, customized chatbot live on your site in under 10 minutes.
A complete guide to adding live chat to your website. From choosing a platform to installing the widget, customizing it, training AI, and going live: with platform-specific instructions for Shopify, WordPress, Webflow, and custom sites.