Merge pull request #446 from Ojas-Arora/test

Connect with The Chatbot

package.json

@@ -53,5 +53,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.3"
   }
 }

public/.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+    env: {
+      browser: true,
+      es2021: true,
+    },
+    extends: [
+      'eslint:recommended',
+      'plugin:react/recommended',
+    ],
+    globals: {
+      Tawk_API: 'readonly',
+    },
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+      ecmaVersion: 12,
+      sourceType: 'module',
+    },
+    plugins: [
+      'react',
+    ],
+    rules: {
+      // Add any custom rules here
+    },
+  };
+

public/index.html

@@ -94,6 +94,19 @@
       console.error('Error loading Google Translate script:', error);
     }
   </script>
+<!--Start of Tawk.to Script-->
+<script type="text/javascript">
+  var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
+  (function(){
+  var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
+  s1.async=true;
+  s1.src='https://embed.tawk.to/66891af8eaf3bd8d4d18ca2d/1i24gr9s5';
+  s1.charset='UTF-8';
+  s1.setAttribute('crossorigin','*');
+  s0.parentNode.insertBefore(s1,s0);
+  })();
+  </script>
+  <!--End of Tawk.to Script-->
 
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>

src/App.js

@@ -1,32 +1,32 @@
-import "./App.css";
-import Container from "./Components/Container";
-import Footer from "./Components/Footer";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import Settings from "./Components/Settings/SettingsPage";
-import About_us from "./Components/footer_section/about_us/About_us";
-import BlogPage from "./Components/footer_section/BlogPage/BlogPage";
-import FAQPage from "./Components/footer_section/FAQPage/FAQPage";
-import Services from "./Components/footer_section/services/Services";
-import ContactUs from "./Components/footer_section/ContactUs/contact_us";
-import Readmore from "./Components/Readmore";
-import Login from "./Components/Login";
-import Pricing from "./Components/footer_section/Pricing/pricing";
-import MyProjects from "./Components/menu_section/my_projects/MyProjects";
-import NewProject from "./Components/menu_section/new_project/NewProject";
-import Error from "./Components/404_page/Error";
-import Profiles from "./Components/Profiles";
-import Profile from "./Components/Profile/profile";
-import Licensing from "./Components/footer_section/Legal/Licensing";
-import TermsConditions from "./Components/footer_section/Legal/TermsandConditions";
-import PrivacyPolicy from "./Components/footer_section/Legal/PrivacyPolicy";
-import Careers from "./Components/Careers/CareersPage";
-import EmailVerification from "./Components/auth/resetPassword/EmailVerification";
-import OTPVerification from "./Components/auth/resetPassword/OTPVerification";
-import ResetPassword from "./Components/auth/resetPassword/ResetPassword";
-import Freelancer from "./Components/FreeLancer/Freelancer";
-import router from "./configs/router";
-// Define the routes
-
+import React from 'react';
+import './App.css';
+import Container from './Components/Container';
+import Footer from './Components/Footer';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import Settings from './Components/Settings/SettingsPage';
+import About_us from './Components/footer_section/about_us/About_us';
+import BlogPage from './Components/footer_section/BlogPage/BlogPage';
+import FAQPage from './Components/footer_section/FAQPage/FAQPage';
+import Services from './Components/footer_section/services/Services';
+import ContactUs from './Components/footer_section/ContactUs/contact_us';
+import Readmore from './Components/Readmore';
+import Login from './Components/Login';
+import Pricing from './Components/footer_section/Pricing/pricing';
+import MyProjects from './Components/menu_section/my_projects/MyProjects';
+import NewProject from './Components/menu_section/new_project/NewProject';
+import Error from './Components/404_page/Error';
+import Profiles from './Components/Profiles';
+import Profile from './Components/Profile/profile';
+import Licensing from './Components/footer_section/Legal/Licensing';
+import TermsConditions from './Components/footer_section/Legal/TermsandConditions';
+import PrivacyPolicy from './Components/footer_section/Legal/PrivacyPolicy';
+import Careers from './Components/Careers/CareersPage';
+import EmailVerification from './Components/auth/resetPassword/EmailVerification';
+import OTPVerification from './Components/auth/resetPassword/OTPVerification';
+import ResetPassword from './Components/auth/resetPassword/ResetPassword';
+import Freelancer from './Components/FreeLancer/Freelancer';
+import router from './configs/router';
+import ChatbotIcon from './Components/ChatbotIcon';
 
 function App() {
   return (
@@ -35,8 +35,8 @@ function App() {
       <div>
         <RouterProvider router={router} />
       </div>
-
       <Footer />
+      <ChatbotIcon />
     </div>
   );
 }

src/Components/ChatbotIcon.css

@@ -0,0 +1,13 @@
+.chatbot-icon {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    cursor: pointer;
+    z-index: 1000;
+  }
+
+  .chatbot-icon img {
+    width: 50px;
+    height: 50px;
+  }
+

src/Components/ChatbotIcon.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import './ChatbotIcon.css';
+
+const ChatbotIcon = () => {
+  const handleChatClick = () => {
+    if (window.Tawk_API) {
+      window.Tawk_API.maximize();
+    } else {
+      console.error('Tawk_API is not defined');
+    }
+  };
+
+  return (
+    <div className="chatbot-icon" onClick={handleChatClick}>
+
+    </div>
+  );
+};
+
+export default ChatbotIcon;