Interactive Live Preview
Live Sync
Test your bot's memory, persona & workflows in real time:
Studio Menu
Studio Menu
| Customer Name | Contact Phone | Need / Topic | Goal | Payment / M-Pesa Code | Amount | Date & Time |
|---|
When visitors ask about custom requirements, your bot automatically asks for their name & phone and records it right here.
Embed Botly Pro on any website in under 60 seconds with 2 lines of code. Works on WordPress, Shopify, Next.js, Webflow, or vanilla HTML.
<!-- 1. Include Botly Pro Stylesheet in <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/NextAIStudios/chatbot@main/dist/insurance-chatbot.css">
<!-- 2. Include Botly Pro Script & Initialize before </body> -->
<script src="https://cdn.jsdelivr.net/gh/NextAIStudios/chatbot@main/dist/insurance-chatbot.js"></script>
<script>
BotlyChatbot.init({
company: { name: "Your Company", supportPhone: "+254 700 000 000" },
bot: { name: "Botly Pro", title: "AI Assistant" },
goal: "lead_generation"
});
</script>
Pass any combination of options to BotlyChatbot.init({ ... }):
BotlyChatbot.init({
company: {
name: "Acme Corp",
supportPhone: "+254 700 000 000",
supportEmail: "support@acme.com",
websiteUrl: "https://acme.com"
},
bot: {
name: "Ace",
title: "AI Assistant",
avatar: "https://acme.com/bot-icon.svg",
greeting: "Hi! I am Ace from Acme. How can I assist you today?"
},
goal: "lead_generation", // "lead_generation" | "payment_checkout" | "customer_support" | "consultation_booking"
theme: {
primaryColor: "#18221c",
accentColor: "#9be553"
},
currency: { code: "KES", symbol: "KSh" },
customFaqs: [
{ keywords: ["hours", "open"], answer: "Monday to Friday, 8am-6pm EAT." }
],
checkout: {
enabled: true,
currency: "KES",
mpesa: {
enabled: true,
type: "paybill",
number: "522522",
accountName: "Acme Corp"
},
card: {
enabled: true,
url: "https://checkout.stripe.com/c/pay/cs_live_123",
gateway: "Stripe",
label: "Pay with Card / Stripe"
}
}
});
Configure your business brand, contact channels, and bot avatar with strict logo isolation.
| Field | Type | Purpose |
|---|---|---|
| company.name | string | Brand name mentioned in conversational replies and handovers. |
| company.supportPhone | string | Customer support hotline displayed when users request to speak to a person. |
| company.supportEmail | string | Email address provided for escalations and lead notifications. |
| bot.avatar | string (URL) | Isolated bot avatar image. Never overrides website header logo. |
Train your bot on company knowledge, FAQs, documents, and website data.
// 1. Injected FAQs / Custom Data
customFaqs: [
{
keywords: ["hours", "open", "location"],
answer: "We are open Monday-Friday 8am-6pm in Nairobi."
}
],
// 2. Website Knowledge Memory
customKnowledge: [
{
source: "website",
sourceUrl: "https://acme.com",
question: "What does Acme do?",
answer: "Acme delivers autonomous customer communication AI.",
keywords: ["acme", "services", "about"]
}
]
Botly Pro supports in-chat payment method selection. When users ask to pay, the bot prompts them to select M-Pesa or Card, presenting the dedicated payment card:
checkout: {
enabled: true,
currency: "KES",
mpesa: {
enabled: true,
type: "paybill", // "paybill" | "till" | "phone"
number: "522522",
accountName: "Acme Corp",
accountNumber: "ORDER-001"
},
card: {
enabled: true,
url: "https://checkout.stripe.com/c/pay/cs_live_...",
gateway: "Stripe", // "Stripe" | "Flutterwave" | "PayPal" | "Paystack" | "Pesapal" | "Custom"
label: "Pay with Card / Stripe"
}
}
Confirmation Code Logging: When a user enters their M-Pesa confirmation code (e.g. UIC8E69GLQ), the bot verifies and stores it inside botly_captured_leads with the M-Pesa tag.
Route queries directly to your own server for custom dynamic responses, database lookups, or CRM syncing.
BotlyChatbot.init({
api: {
enabled: true,
endpoint: "https://your-api.com/chat/query",
mode: "hybrid", // "hybrid" checks memory first, "api_only" routes all
method: "POST",
authBearer: "optional-secret-token"
}
});
Control the widget programmatically and listen to lead capture or payment events.
// Open / Close / Toggle widget
BotlyChatbot.open();
BotlyChatbot.close();
BotlyChatbot.toggle();
// Trigger a user prompt programmatically
BotlyChatbot.triggerAction("I would like to explore Botly for my company");
// Reset conversation
BotlyChatbot.reset();
// Access and Export leads
const leads = BotlyChatbot.getLeads();
BotlyChatbot.exportLeadsCSV();
// Listen to Custom Events
window.addEventListener('botly:lead', (e) => {
console.log('Lead Captured:', e.detail);
});
window.addEventListener('botly:payment', (e) => {
console.log('Payment Completed:', e.detail);
});
When a visitor asks a question, Botly Pro can query your existing API server, internal CRM, or database microservice in real time to fetch answers.
BotlyChatbot.init({
company: {
name: "My Enterprise"
},
// 🔌 Point directly to your backend API:
api: {
enabled: true,
endpoint: "https://api.mycompany.com/v1/bot-query",
mode: "hybrid", // "hybrid" = queries API first, falls back to local KB if offline
method: "POST",
authBearer: "sk-production-secret-token",
responsePath: "reply" // JSON path containing answer (e.g. "reply", "answer", "data.text")
}
});
{
"message": "Which hospitals are in your network?",
"sessionId": "session_live_94821a",
"company": "My Enterprise"
}
{
"reply": "We partner with over 4,500 accredited facilities nationwide with 100% direct billing.",
"quickReplies": [
{ "label": "🚗 Get Quote", "payload": "intent_quote" },
{ "label": "📑 File Claim", "payload": "intent_claim" }
]
}
Botly Pro triggers standard JavaScript Custom Events whenever leads are captured or payments occur. Forward them directly to Zapier, Make, Slack, or your CRM webhook endpoint.
Dispatched automatically when a visitor submits their name, phone number, and inquiry need.
// Listen and forward captured leads to your webhook (Zapier, Slack, CRM)
window.addEventListener('botly:lead', async (event) => {
const lead = event.detail;
// lead: { name: "Jane Doe", phone: "+254712345678", need: "Custom Software", goal: "lead_generation", timestamp: "..." }
// Forward to your backend or CRM webhook:
await fetch('https://api.yourcompany.com/webhooks/leads', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(lead)
});
});
Dispatched when a customer enters an M-Pesa transaction code or completes in-chat checkout.
// Listen for verified payments
window.addEventListener('botly:payment', async (event) => {
const payment = event.detail;
// payment: { paymentMethod: "mpesa", mpesaCode: "UIC8E69GLQ", amount: 10, status: "PAID", timestamp: "..." }
// Forward to your billing system:
await fetch('https://api.yourcompany.com/webhooks/payments', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payment)
});
});
Test your HTTP API endpoint live right now from your browser. Send test payloads, measure latency, and inspect returned JSON responses.
Both reference servers are included in this repository under examples/backend-api/. Run them with native Node.js or Python without installing npm or pip packages!
examples/backend-api/
Sign in to access your custom AI chatbot sandbox, save settings, and deploy to production.