diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a27cf5d..f8e7503 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,6 +6,7 @@ import Menu from "./components/MenuPage/Menu";
import Blogs from "./components/Blogs";
import Forms from "./components/Forms";
+
export default function App() {
const [showButton, setShowButton] = useState(false);
diff --git a/frontend/src/Home.tsx b/frontend/src/Home.tsx
index 9e67e33..2eb371e 100644
--- a/frontend/src/Home.tsx
+++ b/frontend/src/Home.tsx
@@ -1,3 +1,4 @@
+import ChatbotComponent from "./components/chatbot/ChatbotComponent"
import Blogs from "./components/Blogs"
import Hero from "./components/Hero"
import Menu from "./components/Menu/Menu"
@@ -7,6 +8,7 @@ export default function Home() {
<>
+
diff --git a/frontend/src/components/chatbot/ChatbotComponent.tsx b/frontend/src/components/chatbot/ChatbotComponent.tsx
new file mode 100644
index 0000000..7f7133e
--- /dev/null
+++ b/frontend/src/components/chatbot/ChatbotComponent.tsx
@@ -0,0 +1,91 @@
+import { Webchat, WebchatProvider, Fab, getClient } from "@botpress/webchat";
+import { useState, useEffect } from "react";
+
+// Define the Botpress client ID
+const clientId: string = "d492450f-643f-41de-a1ac-138b1818df4f";
+
+const ChatbotComponent: React.FC = () => {
+ const client = getClient({ clientId });
+
+ // States with correct TypeScript typings
+ const [isWebchatOpen, setIsWebchatOpen] = useState(false);
+ const [chatKey, setChatKey] = useState(Date.now());
+ const [showFab, setShowFab] = useState(false); // Track visibility of the Fab button
+
+ // Toggle webchat visibility
+ const toggleWebchat = () => {
+ setIsWebchatOpen((prevState) => !prevState);
+ };
+
+ // Side effect to update chat key and handle scroll event
+ useEffect(() => {
+ setChatKey(Date.now());
+
+ const handleScroll = () => {
+ // Show the Fab button when scrolling down more than 100px
+ if (window.scrollY > 100) {
+ setShowFab(true);
+ } else {
+ setShowFab(false);
+ }
+ };
+
+ window.addEventListener("scroll", handleScroll);
+
+ // Cleanup event listener on component unmount
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
+ };
+ }, []);
+
+ return (
+
+
+
+ {isWebchatOpen && (
+
+ )}
+
+