Add an AI Chatbot to Your Website in 5 Minutes

You Don't Need a Developer for This Adding a chatbot to your website used to require a developer, an API integration, and a weekend of troubleshooting. In 2026, it takes less time than making a cup of coffee. The process is the same whether you run a WordPress blog, a Shopify store, a Wix portfolio, or a custom-coded site: create an account, train the bot with your content, customize the widget, copy a code snippet, and paste it into your site. That's it. Five minutes, and your website has an AI chatbot that actually knows your business. Let me walk through each step with enough detail that you can follow along with your browser open. Step 1: Create Your Account and Agent (1 minute) Sign up at AlonChat and create a project. A project is a container for one business — if you have multiple businesses, each gets its own project. Name your agent whatever you want (customers won't see this name; it's for your own organization). Pick an AI model. If you're just getting started and cost-conscious, GPT-5-nano or Gemini 3.1 Flash-Lite are excellent budget picks. If you want higher-quality responses from the start, Claude Sonnet 4.6 or GPT-5-mini are the sweet spots. You can change this later from a dropdown — it's not a permanent decision. Choose a language preset. If your website serves an English-speaking audience, pick Pure English. If you're targeting Filipino customers, Balanced Taglish is the most popular choice. The language preset affects how your chatbot responds, not what it understands — it can understand questions in any language regardless of the preset. Step 2: Train with Your Website (2 minutes) Go to the Knowledge Base section, click "Add Website Source," and paste your website's homepage URL. Click crawl. The system visits every page on your site, extracts the text content, chunks it into searchable segments, and creates a vector index. A typical 20-50 page business website finishes in 1-2 minutes. While the crawl is running, add a few Q&A pairs for your most critical information. These are exact question-and-answer pairs where you want the bot to give a verbatim response: Q: What are your business hours? A: We're open Monday to Friday, 9 AM to 6 PM, and Saturday 10 AM to 3 PM. Closed on Sundays and public holidays. Q: How much does your service cost? A: [Your actual pricing with all tiers and conditions] Q: Where are you located? A: [Your exact address with landmarks or directions] Five to ten Q&A pairs covering your most-asked questions will handle a surprising amount of traffic. You can always add more later as you see what customers are actually asking. Step 3: Customize the Chat Widget (1 minute) Go to the Deploy section and select the website chat widget. Here you can customize the appearance to match your brand: Colors: Set the primary color to match your brand. The widget button, header, and user message bubbles will use this color. Most businesses use their brand's primary accent color. Welcome message: This is the first thing visitors see when they open the chat. Something like "Hi! How can we help you today?" works for most businesses. Keep it short and inviting. Bot name and avatar: Give your chatbot a name that fits your brand. Some businesses use a human name ("Hi, I'm Sarah, your virtual assistant"), others keep it branded ("AlonChat Support"). Upload a small avatar image — your logo works, or a friendly illustration. Placement: Bottom-right is the convention and what visitors expect. Bottom-left works too if your site has conflicting elements in the bottom-right corner. The widget is a floating button that expands into a chat window when clicked. Step 4: Embed the Code Snippet (1 minute) This is where most people expect it to get technical. It doesn't. The platform generates a single code snippet — a small script tag that looks like this: <script src="https://your-domain.com/widget/chat/YOUR-AGENT-ID" defer></script> You copy this snippet and paste it into your website. Where exactly depends on your platform: WordPress: Go to Appearance > Theme Editor (or your theme's custom code section). Find the footer.php file or use a plugin like "Insert Headers and Footers." Paste the snippet just before the closing </body> tag. Alternatively, many modern WordPress themes have a "Custom Scripts" section in the theme options — paste it there. If you use Elementor, add an HTML widget to your footer template. Save. Done. Shopify: Go to Online Store > Themes > Edit Code. Open the theme.liquid file. Scroll to the bottom and paste the snippet just before </body>. Save. The chatbot now appears on every page of your store. If you only want it on certain pages, wrap the snippet in a Shopify conditional — but for most stores, every page is fine. Wix: Go to Settings > Custom Code (under Advanced). Click "Add Custom Code." Paste the snippet. Set the placement to "Body - end" and apply it to "All pages." Save and publish. Wix makes this straightforward — no file editing required. Squarespace: Go to Settings > Advanced > Code Injection. Paste the snippet in the Footer section. Save. Squarespace puts all injected code on every page automatically. Custom HTML site: Open your HTML file(s) in a text editor. Paste the snippet before the closing </body> tag. If you have a shared footer file or template, add it there so it appears on every page. Upload the modified file(s) to your hosting. Step 5: Test It Live (30 seconds) Visit your website. You should see the chat widget button in the bottom corner. Click it. Ask a question that's covered by your knowledge base — "what are your hours?" or "how much do you charge?" Verify the answer is correct and the tone matches your expectations. If something's off, go back to your knowledge base and adjust — add a Q&A pair, re-crawl an updated page, or tweak the language preset. Test it on mobile too. Open your site on your phone and try the chat. The widget is responsive and should work well on mobile screens, but it's worth confirming that the chat window doesn't obstruct important content on your specific site layout. Common Questions After Setup "Will it slow down my website?" No. The script tag includes the defer attribute, which means it loads after your page content. The widget itself is lightweight — it doesn't affect your page load speed or Core Web Vitals scores. "Can I use this AND Facebook Messenger?" Absolutely. The website widget and social channels are independent deployment options. Most businesses run both: the website chatbot for visitors who find you through search, and the Facebook/Instagram chatbot for customers who discover you on social media. Same AI agent, same knowledge base, same quality — just different entry points. "What if I want to remove it later?" Delete the code snippet from your website. That's it. No residual scripts, no cleanup needed. "Do I need to update the code when I retrain the bot?" No. The snippet is a pointer to your agent — when you update the knowledge base, add Q&A pairs, or change the AI model, the changes take effect immediately. The embedded code never needs to change unless you create a new agent entirely. After You're Live: The First Week Watch your conversations for the first few days. You'll see which questions customers ask that the bot handles well (great, your training is working) and which ones it stumbles on (add Q&A pairs or more content). Most businesses find that after 3-5 days of minor tweaks, the bot handles 80%+ of website chat conversations accurately. The remaining 20% are complex questions that appropriately trigger a handover to your team. The total time investment? Five minutes to set up, 15 minutes over the first week to fine-tune. After that, it runs itself — answering customer questions 24/7, capturing leads, and freeing up your time for work that actually requires a human. Related AlonChat resources Website widget guide Best AI chatbot in the Philippines AI chatbot training Deployment options

How to Add an AI Chatbot to Your Website in 5 Minutes

AlonChat Team

The Complete Guide to AI Customer Support for Filipino Businesses

How to Handle 500+ Messages a Day Without Hiring More Staff

AI for Online Sellers: A Shopee and Lazada Merchant's Guide to Chat Automation

More from Tutorials

The Complete Guide to AI Customer Support for Filipino Businesses

How to Handle 500+ Messages a Day Without Hiring More Staff

AI for Online Sellers: A Shopee and Lazada Merchant's Guide to Chat Automation

Ready to Build Your AI Agent?