1.
Design a chatbot to answer FAQS about your organization
Tidio, Intercom, Drift, or Landbot → Drag-and-drop chatbot
builder, no coding needed.
source code:
import { useState } from "react";
const faqs = {
general: {
"What does your organization do?": "We provide [your services].",
"Where are you located?": "Our office is located at [address]."
},
services: {
"What services do you provide?": "We offer [list of services].",
"How can I book a service?": "You can book online at [link]."
},
pricing: {
"How much does it cost?": "Our pricing starts at [price]. For details, visit [link]."
},
support: {
"How do I contact support?": "You can email us at support@yourorg.com.",
"What are your support hours?": "We are available Mon–Fri, 9am–6pm."
};
export default function FAQChatbot() {
const [messages, setMessages] = useState([
{ sender: "bot", text: "Hi! 👋 I'm your assistant. Ask me anything or choose a category: general, services,
pricing, support." }
]);
const [input, setInput] = useState("");
const handleSend = () => {
if (!input.trim()) return;
const userMsg = { sender: "user", text: input };
let botReply = "Sorry, I don’t have an answer for that. Try another question or contact support.";
for (const category in faqs) {
if (faqs[category][input]) {
botReply = faqs[category][input];
break;
setMessages([...messages, userMsg, { sender: "bot", text: botReply }]);
setInput("");
};
return (
<div className="w-96 p-4 bg-white shadow-xl rounded-2xl flex flex-col space-y-3">
<div className="flex-1 overflow-y-auto space-y-2">
{messages.map((msg, i) => (
<div key={i} className={`p-2 rounded-xl ${msg.sender === "bot" ? "bg-gray-100 text-left" : "bg-
blue-500 text-white text-right"}`}>
{msg.text}
</div>
))}
</div>
<div className="flex space-x-2">
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Type your question..."
className="flex-1 border rounded-xl p-2"
/>
<button onClick={handleSend} className="bg-blue-500 text-white px-4 py-2
rounded-xl">Send</button>
</div>
</div>
);
.......................................................................................................
