Most businesses lose potential customers simply because no one is available to answer a question at 2 AM on a Saturday. An AI chat agent embedded directly on your website solves this by handling product questions, troubleshooting requests, and pre-sales inquiries around the clock -- without requiring any coding knowledge to set up. This guide walks through each step of implementing an AI-powered chat agent using Asyntai, covering account creation, instruction writing, widget customization, code installation, and ongoing optimization.
By the end of this walkthrough, you will have a working AI chat agent on your live website that can answer customer questions using your business-specific knowledge, respond in over 95 languages, and hand off complex issues to your human team when needed.
Why Add a 24/7 AI Chat Agent?
Measurable Benefits of AI Chat Agents
24/7 Availability
Capture leads and answer questions outside business hours, when 35-50% of website traffic typically occurs
Sub-3-Second Responses
AI generates context-aware answers in 1-3 seconds, compared to 2-5 minute average wait times for live agents
95+ Language Support
Automatically detects visitor language and responds natively -- no translation plugins or multilingual staff needed
Lower Cost Per Interaction
Handle routine inquiries at a fraction of the cost of a dedicated support agent, starting at under $0.02 per message
Unlimited Concurrency
Serve 1 or 1,000 simultaneous visitors without degradation in response time or quality
Consistent Accuracy
Every response follows your written instructions exactly -- no mood variance, no forgotten policies, no training gaps
Complete Step-by-Step Implementation Guide
8 Steps from Sign-Up to Live AI Chat
1
Create Your Asyntai Account
Registration takes about 30 seconds. You will land on a dashboard where you can configure your AI agent, view analytics, and manage your subscription.
What You Will Do:
- Go to asyntai.com and click "Get Started" in the top navigation
- Sign up using your email address or Google account for one-click registration
- Verify your email address if you used email sign-up
- You will be redirected to your dashboard at asyntai.com/dashboard, where all configuration happens
Free Tier Included: Every new account starts with 100 AI-response credits at no cost, so you can fully test your setup before choosing a paid plan.
2
Write Your AI Instructions
This is the most important step. The instruction set you write determines every response your AI agent gives. Think of it as a detailed briefing document for a new employee -- the more specific and structured your instructions, the more accurate and helpful the responses will be.
Information to Include in Your Instructions:
- Business Overview: A 2-3 sentence description of what your company does, who your customers are, and what problems you solve (e.g., "We are a B2B SaaS company that provides inventory management software for mid-size retailers")
- Product/Service Details: Names, pricing, key features, and common use cases for each product or service you offer
- Contact & Hours: Support email, phone number, business hours with timezone, and preferred escalation channel
- FAQ Answers: Write out the 10-20 most common questions your team receives, with the exact answers you want the AI to give
- Policies: Return windows, shipping timelines, refund conditions, warranty terms -- anything a customer might ask about
- Tone & Style: Specify whether the AI should be formal, conversational, technical, or casual (e.g., "Respond in a friendly but professional tone, avoid slang, use short paragraphs")
- Fallback Behavior: Tell the AI what to do when it cannot answer, e.g., "If you don't know the answer, apologize and direct the user to email support@example.com"
Critical: Vague instructions produce vague answers. For example, writing "tell customers about our pricing" is less effective than writing "Our Starter plan costs $29/month and includes up to 5 users. Our Pro plan costs $79/month and includes unlimited users plus priority support."
3
Test Your AI in the Dashboard Sandbox
Before adding the widget to your live site, use the built-in test chat on your dashboard to simulate real customer conversations. This lets you catch instruction gaps and refine responses without affecting actual visitors.
Effective Testing Strategy:
- Navigate to asyntai.com/dashboard#setup and open the test chat panel
- Ask 5-10 of your most frequently received customer questions and evaluate the responses
- Test edge cases: "What if I want to return an item after 60 days?", "Do you ship to Brazil?", "Can I cancel mid-subscription?"
- Try asking the same question in different ways to check consistency
- Test in a second language if you serve international customers
- After each round of testing, update your instructions to fix any gaps, then test again
Practical Tip: Ask a colleague who was not involved in writing the instructions to test the AI. They will naturally ask questions you did not think of, revealing blind spots in your instruction set.
4
Customize the Chat Widget Appearance
The visual design of the widget affects trust and engagement. Asyntai provides a real-time preview editor where you can adjust colors, text, positioning, and behavior to match your website's brand identity.
Available Customization Options:
- Color Scheme: Set primary widget color, background color, text colors, and message bubble colors using hex codes or a color picker
- Widget Position: Bottom-right (default), bottom-left, or custom offset values for precise placement
- AI Assistant Name: Replace the default with a branded name like "Alex from Acme Support" or "Product Helper"
- Welcome Message: Set the first message visitors see, e.g., "Hi! I can help with pricing, shipping, or product questions. What can I look up for you?"
- Auto-Trigger Delay: Configure the widget to open automatically after a set number of seconds (e.g., 15 seconds for engaged visitors)
- Notification Bubble: Add attention-grabbing text next to the widget icon, such as "Ask me anything!"
- Branding Removal: Remove the "Powered by Asyntai" footer on Standard and Pro plans
5
Generate Your Embed Code
The integration code is a single JavaScript snippet -- under 10 lines -- that loads the chat widget asynchronously. It will not block your page from rendering and adds minimal overhead (the script is under 50KB gzipped).
How to Get Your Code:
- Go to the Integration section in your dashboard
- Click "Get Integration Code" to generate the snippet
- The code includes your unique widget ID, which links the widget to your account and configuration
- Copy the full snippet -- do not modify the script URL or widget ID
JavaScript
<script>
(function() {
var widget = document.createElement('script');
widget.src = 'https://asyntai.com/static/js/chat-widget.js';
widget.setAttribute('data-widget-id', 'YOUR_UNIQUE_WIDGET_ID');
document.head.appendChild(widget);
})();
</script>
6
Install the Code on Your Website
Paste the JavaScript snippet into your website's HTML. The exact method depends on your platform, but the principle is the same everywhere: the code needs to be loaded on every page where you want the chat widget to appear.
Platform-Specific Methods:
- Static HTML: Open your HTML file, paste the snippet just before the closing
</body>tag, and upload the file - WordPress: Add the code to your theme's
functions.phpusingwp_footer, or install a "Header Footer Code Manager" plugin - Shopify: Go to Online Store → Themes → Edit Code →
theme.liquid, and paste before</body> - Squarespace: Navigate to Settings → Advanced → Code Injection → Footer, and paste the snippet
- Wix: Use Settings → Custom Code → Add Code, set placement to "Body - end"
- Webflow: Go to Project Settings → Custom Code → Footer Code, and paste
7
Verify the Live Installation
After deploying the code, systematically check that the widget loads and functions correctly across devices and browsers before announcing it to customers.
Verification Checklist:
- Open your website in a fresh browser tab (or incognito window) and confirm the chat bubble appears in the correct position
- Click the widget, type a test question, and verify the AI responds with the expected answer
- Test on at least one mobile device (iOS and Android if possible) to confirm responsive layout
- If you set an auto-trigger delay, wait the configured duration and confirm the widget opens automatically
- Navigate to 2-3 different pages on your site to verify the widget persists across page loads
- Check that the widget does not overlap critical UI elements like navigation menus, add-to-cart buttons, or cookie consent banners
8
Monitor Conversations and Iterate
Your AI agent improves over time as you review real conversations and refine instructions. The dashboard provides analytics on message volume, conversation topics, and usage trends.
Ongoing Optimization Process:
- Review the chat history in your dashboard at least weekly during the first month, then bi-weekly
- Look for questions where the AI gave incomplete or incorrect answers, and add those scenarios to your instructions
- Identify frequently asked questions that could indicate missing information on your website itself
- Track your message usage against your plan limit -- if you consistently use over 80%, consider upgrading before you hit the cap
- Update your instructions whenever you change pricing, policies, product offerings, or business hours
- Experiment with widget settings (e.g., try different welcome messages or auto-trigger delays) and compare engagement
Ready to Add AI Chat to Your Website?
Set up takes under 10 minutes. Start with 100 free AI responses -- no credit card required.
Start Free SetupPlatform-Specific Installation Guides
HTML / Static Sites
Paste the snippet before
</body> in your HTML files. Works with any static host including GitHub Pages, Netlify, and Vercel.WordPress
Add via
functions.php hook, a code-injection plugin, or the theme customizer. Compatible with all major themes.Shopify
Edit
theme.liquid in your theme editor and paste before </body>. Works with all Shopify themes.Squarespace
Use the built-in Code Injection panel under Settings → Advanced → Footer. No third-party plugins needed.
Wix
Add via Settings → Custom Code with "Body - end" placement. Works on all Wix plans that support custom code.
React / Vue / Angular
Add the script tag to
index.html, or dynamically load it in a root component's useEffect or mounted hook.WordPress Installation in Detail
WordPress offers multiple installation paths depending on your access level and comfort with code. Here are the three most common approaches:
Method 1: Theme Functions File (Recommended for Developers)
Add this PHP function to your child theme's functions.php. It hooks into WordPress's footer action and outputs the script on every page:
PHP
function add_asyntai_chat() {
echo '<script>
(function() {
var widget = document.createElement("script");
widget.src = "https://asyntai.com/static/js/chat-widget.js";
widget.setAttribute("data-widget-id", "YOUR_WIDGET_ID");
document.head.appendChild(widget);
})();
</script>';
}
add_action('wp_footer', 'add_asyntai_chat');
Method 2: Code Manager Plugin (Recommended for Non-Developers)
This approach requires no file editing and survives theme updates:
- Install and activate "Header Footer Code Manager" or "Insert Headers and Footers" from the WordPress plugin directory
- Open the plugin settings and paste the JavaScript snippet into the Footer Code section
- Save your changes -- the widget will appear on all pages immediately
Method 3: Theme Customizer (Limited Support)
Some WordPress themes include a "Custom JavaScript" or "Additional Scripts" field in the customizer. If yours does:
- Go to Appearance → Customize and look for a "Custom Code" or "Scripts" panel
- Paste the snippet in the footer script field and click Publish
- Note: not all themes support this -- if you do not see a scripts panel, use Method 1 or 2 instead
Pricing and Plan Selection
Plans Based on Monthly AI Response Volume
Free - $0
Starter - $39
Standard - $139
Pro - $449
Only AI-generated responses count toward your limit. Customer messages, widget loads, and page views are free and unlimited.
How to Choose the Right Plan
- Free Plan (100 responses): Best for testing the platform or for personal/portfolio sites with very low traffic. A typical small site generates 30-80 AI responses per month.
- Starter Plan (2,500 responses at $39/mo): Fits small businesses, blogs, or local service providers. At roughly $0.016 per response, it covers sites with up to ~5,000 monthly visitors assuming a 30-50% chat engagement rate.
- Standard Plan (15,000 responses at $139/mo): Designed for growing e-commerce stores and mid-size businesses. Includes branding removal, advanced analytics, and enough capacity for 20,000-40,000 monthly visitors.
- Pro Plan (50,000 responses at $449/mo): Built for high-traffic sites, marketplaces, and enterprises. At under $0.009 per response, it is the most cost-effective option for sites with 50,000+ monthly visitors.
Common Issues and Troubleshooting
Troubleshooting Common Issues
Chat Widget Not Appearing on the Page
Diagnostic Steps:
- Open your browser's Developer Tools (F12) and check the Console tab for JavaScript errors. A 404 error on the script URL indicates a typo in the src attribute.
- Verify the
data-widget-idattribute matches the ID shown in your Asyntai dashboard exactly -- extra spaces or missing characters will prevent loading. - Confirm the script is placed before the closing
</body>tag, not inside a<head>block or a conditional comment. - Hard-refresh the page with Ctrl+Shift+R (Cmd+Shift+R on Mac) to bypass cached versions.
- Check if a content security policy (CSP) header on your site is blocking external scripts from asyntai.com.
Widget Opens But AI Does Not Respond
Diagnostic Steps:
- Check your message credit balance in the dashboard. If you have hit your plan limit, the AI will stop responding until the next billing cycle or an upgrade.
- Verify that your AI instructions field is not empty -- the agent needs at least a basic instruction set to generate responses.
- Test the AI directly in the dashboard sandbox. If it works there but not on your site, the issue is likely a network or CSP problem rather than a configuration problem.
- Confirm your account subscription status is active and not in a paused or payment-failed state.
Widget Overlaps or Conflicts with Page Elements
Diagnostic Steps:
- Switch the widget position from bottom-right to bottom-left (or vice versa) in your customization settings to avoid overlapping with cookie banners or live chat buttons.
- If the widget sits behind another element, check for z-index conflicts in your site's CSS. The widget uses
z-index: 9999by default. - Adjust the widget's colors in the customizer if it visually clashes with your site's design.
- For advanced layout issues, contact support with a screenshot and your site URL for CSS-level assistance.
Display Problems on Mobile Devices
Diagnostic Steps:
- The widget is built to be responsive, but test on both iOS Safari and Android Chrome, as these browsers handle viewport sizing differently.
- If the chat window extends beyond the screen edges, ensure your site's
<meta name="viewport">tag includeswidth=device-width. - On pages with fixed-position footers or bottom navigation bars, confirm the widget icon is not hidden behind those elements by adjusting the position offset.
- Test in landscape orientation as well -- some layouts break when the available height is reduced.
Best Practices for AI Chat Agent Performance
Writing Effective AI Instructions
- Structure with Headers: Organize instructions into sections like "Company Info," "Product Details," "Policies," and "Tone Guidelines" so the AI can locate relevant context quickly.
- Use Specific Language: Instead of "we offer competitive pricing," write "Our Basic plan is $29/month, Professional is $79/month, and Enterprise is custom-quoted for teams over 50 users."
- Include Example Exchanges: Write 3-5 sample Q&A pairs showing the exact format and level of detail you want, e.g., Q: "How long does shipping take?" A: "Standard shipping within the US takes 3-5 business days. Express shipping (available at checkout for $12.99) delivers in 1-2 business days."
- Define Boundaries Explicitly: State what the AI should not do: "Never quote custom pricing. Never make promises about delivery dates beyond what our policy states. Never share internal employee information."
- Update After Every Change: When you launch a new product, change a policy, or update hours, edit your AI instructions the same day. Outdated instructions lead to incorrect answers and frustrated customers.
Widget Customization for Higher Engagement
- Match Your Brand Colors: Use your site's primary brand color for the widget so it feels native rather than like a third-party add-on. Copy the hex code from your brand guidelines or use a color picker tool on your site's header.
- Write an Action-Oriented Welcome: Instead of a generic "How can I help?", try something specific: "Hi! I can check order status, explain our return policy, or help you pick the right plan. What do you need?"
- Set Auto-Trigger Thoughtfully: A 10-15 second delay works well for most sites. Triggering too early (under 5 seconds) can feel intrusive; waiting too long (over 30 seconds) means most visitors have already left.
- Position Strategically: Bottom-right is the convention users expect, but if you have a conflicting element there (like an intercom widget or cookie banner), bottom-left works equally well.
Measuring and Improving Performance
- Weekly Conversation Review: Spend 15-20 minutes each week reading through recent chat logs. Flag any conversations where the AI gave an incomplete or wrong answer, and update your instructions accordingly.
- Track Engagement Rate: Monitor what percentage of visitors open the chat widget. If engagement is below 5%, experiment with a more compelling welcome message or a shorter auto-trigger delay.
- Monitor Response Quality: Look for patterns in follow-up questions. If users frequently ask "Can you explain that more?" or rephrase the same question, your instructions for that topic need more detail.
- Plan Usage Awareness: Set a mental threshold at 80% of your plan limit. If you hit it mid-month, either upgrade proactively or review whether low-value conversations (like spam or test messages) are consuming credits.
Key Insight: The highest-performing AI chat agents share one trait: their instructions are updated frequently. Businesses that revise their instructions weekly during the first month see measurably better response accuracy than those who set it once and forget.
Conclusion
Implementing an AI chat agent on your website is a practical project that most site owners can complete in a single sitting. The technical installation -- copying and pasting a JavaScript snippet -- takes under five minutes regardless of platform. The more significant investment is in writing detailed, well-structured AI instructions that reflect how your business actually operates.
The best approach is iterative: write an initial instruction set, test it against your 20 most common customer questions, fix the gaps, and deploy. Then review real conversations weekly and refine. Within 2-4 weeks of active iteration, most businesses reach a point where the AI handles 70-80% of incoming inquiries without any human intervention.
AI chat agents are most effective when they complement your human support team rather than replace it entirely. They excel at answering repetitive questions instantly (order status, pricing, business hours, return policies) and at qualifying leads during off-hours. Your human agents can then focus on complex issues, high-value sales conversations, and relationship-building -- work where human judgment and empathy matter most.
Start with the free tier, test rigorously, and scale your plan as your traffic and engagement grow. The data from your first 100 conversations will tell you more about what your customers need than any amount of guesswork.