Intelligent Chatbot Solution with Dynamic, Curated Content Integration

scruter-nextjs/app/(routes)/page.tsx

@@ -1,3 +1,4 @@
+import ChatBotPage from '@/components/chatbot/chatbotPage';
 import HeroCards from '@/components/heroCards';
 import { HeroCarousal } from '@/components/heroCarousal';
 import PageContainer from '@/components/ui/pageContainer';
@@ -8,6 +9,7 @@ const HomePage = () => {
       <PageContainer>
         <HeroCarousal />
         <HeroCards />
+        <ChatBotPage/>
       </PageContainer>
     </>
   );

scruter-nextjs/components/chatbot/chatbot.tsx

@@ -0,0 +1,153 @@
+import { useState } from "react";
+import ChatBot from "react-simple-chatbot";
+
+const Chatbot = () => {
+  const [userMessage, setUserMessage] = useState("");
+
+  const handleMessage = (msg) => {
+    setUserMessage(msg); // Update user message on each interaction
+  };
+
+  const flow = [
+    {
+      id: "1",
+      message: "Welcome to Scruter! We're here to help you monitor and analyze your online presence. May I know your name?",
+      trigger: "2",
+    },
+    {
+      id: "2",
+      message: "Hi {previousValue}! What would you like to know more about?",
+      options: [
+        { value: "about", label: "Tell me more about Scruter", trigger: "3" },
+        { value: "features", label: "Explore features", trigger: "4" },
+        { value: "pricing", label: "View pricing plans", trigger: "5" },
+        { value: "support", label: "Get support", trigger: "9" },
+      ],
+    },
+    {
+      id: "3",
+      message: "Scruter is a powerful analytics platform that helps businesses and individuals monitor their digital presence, analyze data, and make informed decisions. Ready to explore our features?",
+      options: [
+        { value: "yes", label: "Yes, show me features", trigger: "4" },
+        { value: "no", label: "No, tell me about pricing", trigger: "5" },
+      ],
+    },
+    {
+      id: "4",
+      message: "Our main features include:",
+      trigger: "featureList",
+    },
+    {
+      id: "featureList",
+      message: "1. Keyword Monitoring\n2. Sentiment Analysis\n3. Competitive Analysis\n4. Customized Alerts\n5. Detailed Reporting",
+      options: [
+        { value: "learnMore", label: "Tell me more about a specific feature", trigger: "6" },
+        { value: "back", label: "Back to main menu", trigger: "2" },
+      ],
+    },
+    {
+      id: "6",
+      message: "Which feature would you like to know more about?",
+      options: [
+        { value: "keyword", label: "Keyword Monitoring", trigger: "7" },
+        { value: "sentiment", label: "Sentiment Analysis", trigger: "8" },
+        { value: "competitive", label: "Competitive Analysis", trigger: "7a" },
+        { value: "alerts", label: "Customized Alerts", trigger: "8a" },
+        { value: "reporting", label: "Detailed Reporting", trigger: "7b" },
+      ],
+    },
+    {
+      id: "7",
+      message: "Our Keyword Monitoring feature allows you to track specific keywords related to your brand or industry, helping you stay ahead in your niche. Can I help with anything else?",
+      trigger: "2",
+    },
+    {
+      id: "7a",
+      message: "Competitive Analysis lets you understand your competitors' digital strategies. This insight enables you to make adjustments that keep you competitive.",
+      trigger: "2",
+    },
+    {
+      id: "7b",
+      message: "Detailed Reporting provides in-depth analysis and visual reports that help you understand trends and make data-driven decisions. Anything else you need help with?",
+      trigger: "2",
+    },
+    {
+      id: "8",
+      message: "Sentiment Analysis helps gauge public opinion by analyzing the tone of mentions about your brand. It’s a powerful tool for reputation management. Anything else?",
+      trigger: "2",
+    },
+    {
+      id: "8a",
+      message: "Customized Alerts notify you about specific events or changes in your metrics, so you stay informed in real time.",
+      trigger: "2",
+    },
+    {
+      id: "5",
+      message: "Scruter offers flexible pricing plans suitable for individuals, small businesses, and large organizations. Would you like more information on specific plans?",
+      options: [
+        { value: "yes", label: "Yes, show me the plans", trigger: "pricingDetails" },
+        { value: "no", label: "No, take me back to main menu", trigger: "2" },
+      ],
+    },
+    {
+      id: "pricingDetails",
+      message: "Our pricing plans are as follows:\n1. Basic - $29/month\n2. Professional - $99/month\n3. Enterprise - Custom pricing based on needs",
+      options: [
+        { value: "basic", label: "Basic Plan Details", trigger: "planBasic" },
+        { value: "professional", label: "Professional Plan Details", trigger: "planProfessional" },
+        { value: "enterprise", label: "Enterprise Plan Details", trigger: "planEnterprise" },
+      ],
+    },
+    {
+      id: "planBasic",
+      message: "The Basic Plan includes keyword monitoring and basic reporting, suitable for individuals and small businesses.",
+      trigger: "2",
+    },
+    {
+      id: "planProfessional",
+      message: "The Professional Plan offers advanced reporting, competitive analysis, and sentiment tracking, ideal for growing businesses.",
+      trigger: "2",
+    },
+    {
+      id: "planEnterprise",
+      message: "The Enterprise Plan is custom-tailored to meet specific needs, including dedicated support and in-depth analytics.",
+      trigger: "2",
+    },
+    {
+      id: "9",
+      message: "Our support team is here to help. How would you like assistance?",
+      options: [
+        { value: "contact", label: "Contact customer support", trigger: "contactSupport" },
+        { value: "faq", label: "View FAQ", trigger: "faq" },
+      ],
+    },
+    {
+      id: "contactSupport",
+      message: "You can reach our support team via email at [email protected] or call us at +123-456-7890.",
+      trigger: "2",
+    },
+    {
+      id: "faq",
+      message: "Visit our FAQ page for answers to common questions: [FAQ Link](https://scruter.vercel.app/faq)",
+      end: true,
+    },
+    {
+      id: "end",
+      message: "Thank you for visiting Scruter! If you need further assistance, feel free to chat with us again. Have a great day!",
+      end: true,
+    },
+  ];
+
+
+  return (
+    <div>
+      <ChatBot
+        steps={flow}
+        onUserMessage={handleMessage}
+        userMessage={userMessage}
+      />
+    </div>
+  );
+};
+
+export default Chatbot;

scruter-nextjs/components/chatbot/chatbotPage.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import { MessageSquare } from "lucide-react";
+import { Button } from "../ui/button";
+import Chatbot from "./chatbot";
+import { useState } from "react";
+
+const ChatBotPage = () => {
+    const [chatbotOpen, toggleChatbotOpen] = useState(false);
+    return ( 
+        <div>
+              <div className="fixed bottom-4 right-4 z-50">
+        <Button
+          onClick={() => toggleChatbotOpen(!chatbotOpen)}
+          className="bg-purple-600 text-white rounded-full p-4 shadow-lg hover:bg-purple-900 focus:outline-none focus:ring-2 transition duration-300"
+        >
+          {/* You can add an icon inside the button if needed */}
+          <MessageSquare className="w-5 h-5" />
+        </Button>
+        {chatbotOpen && <Chatbot />}
+      </div>
+        </div>
+     );
+}
+
+export default ChatBotPage;

scruter-nextjs/components/chatbot/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import ChatBot from 'react-simple-chatbot';
+import Wrapper from './styles';
+import steps from './steps';
+
+
+function ChatbotWrapper() {
+  return (
+    <Wrapper>
+      <ChatBot
+        steps={steps}
+        floating recognitionEnable
+      />
+    </Wrapper>
+  );
+}
+
+export default ChatbotWrapper;

scruter-nextjs/components/chatbot/steps.ts

@@ -0,0 +1,40 @@
+export default [
+	{
+		id: '1',
+		message: 'What is your name?',
+		trigger: '2',
+	},
+	{
+		id: '2',
+		user: true,
+		trigger: '3',
+	},
+	{
+		id: '3',
+		message: 'Hi {previousValue}, nice to meet you!',
+		trigger: '4',
+	},
+	{
+		id: '4',
+		message: 'Select any service to proceed',
+		trigger: '5',
+	},
+	{
+		id: '5',
+		options: [
+			{ value: "Laundry", label: 'Laundry', trigger: '7' },
+			{ value: "Cleaning", label: 'Cleaning', trigger: '7' },
+			{ value: "AC repair", label: 'AC repair', trigger: '6' },
+		],
+	},
+	{
+		id: '6',
+		message: 'Sorry! we are not operating {previousValue} right now ',
+		trigger: '2',
+	},
+	{
+		id: '7',
+		message: 'Awesome! We will be connecting you to our {previousValue} service executive!',
+		end: true,
+	},
+];

scruter-nextjs/components/chatbot/styles.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export default styled.div`
+	.rsc-os-option-element {
+		cursor: pointer;
+	}
+`;