By the end of this guide, you'll have a fully functional AI chatbot embedded on your website that can:
The chatbot is only as good as the knowledge you give it. Create a document with:
## Company Info Company: [YOUR COMPANY NAME] Industry: [YOUR INDUSTRY] Hours: [BUSINESS HOURS] Support Email: [EMAIL] Phone: [PHONE] ## Frequently Asked Questions ### Q: What services do you offer? A: [List your services] ### Q: What are your pricing options? A: [List pricing tiers] ### Q: How do I get started? A: [Onboarding steps] ### Q: What's your refund policy? A: [Refund policy details] ### Q: How do I contact support? A: [Support channels and hours] ## IT Troubleshooting ### Password Reset 1. Go to [URL] 2. Click "Forgot Password" 3. Enter email, check inbox for reset link ### VPN Connection Issues 1. Restart VPN client 2. Check internet connection 3. Try alternate server 4. Contact IT if persists ## Escalation Rules - Billing disputes โ [email protected] - Technical outages โ [email protected] - Sales inquiries โ [email protected] - Everything else โ [email protected]
This is the instruction set that defines your chatbot's personality and behavior:
You are [COMPANY NAME]'s IT Support Assistant. PERSONALITY: - Professional but friendly - Concise answers (max 3 sentences) - Always offer to escalate if unsure RULES: 1. Never make up information 2. If you don't know, say: "Let me connect you with our team" 3. Always collect the user's email before escalating 4. For IT issues, walk through troubleshooting steps 5. For sales questions, provide pricing and offer a demo KNOWLEDGE BASE: [Paste your knowledge base here]
Add this code before </body> on your website:
<!-- IT Helpdesk Chat Widget -->
<script>
(function() {
const widget = document.createElement('div');
widget.id = 'helpdesk-widget';
widget.innerHTML = `
<button id="hd-toggle" style="
position:fixed; bottom:24px; right:24px;
width:60px; height:60px; border-radius:50%;
background:linear-gradient(135deg,#7fffd4,#4fd1c5);
border:none; cursor:pointer; z-index:9999;
box-shadow:0 4px 20px rgba(127,255,212,0.3);
font-size:24px;">๐ฌ</button>
<div id="hd-panel" style="display:none;
position:fixed; bottom:100px; right:24px;
width:380px; height:520px; border-radius:16px;
background:#120626; border:1px solid rgba(127,255,212,0.15);
z-index:9999; overflow:hidden;
box-shadow:0 8px 40px rgba(0,0,0,0.4);">
<!-- Chat header + messages + input -->
</div>`;
document.body.appendChild(widget);
document.getElementById('hd-toggle')
.onclick = () => {
const p = document.getElementById('hd-panel');
p.style.display = p.style.display === 'none'
? 'flex' : 'none';
};
})();
</script>
Define when the bot should hand off to a human:
Test your chatbot with these scenarios before going live:
To add voice support via Twilio:
<Gather> TwiML to capture speech<Say> TwiML to speak the response backCost: ~$0.02/minute for voice + $1/month for the phone number.
Create a searchable knowledge base page with categories:
Embed the chatbot on the ESS page as the "AI search assistant" โ users type questions and get instant answers from the knowledge base.