public/css/index.css

@@ -625,6 +625,41 @@ body {
     box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
 }
 
+.floating_button {
+    position: fixed;
+    right: 80px;
+    bottom: 50px;
+    text-decoration: none;
+    color: white;
+    background-color: #fe4c50;
+    padding: 10px 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.floating_button i  {
+    font-size: 60px;
+    padding: 0 50px;
+    border-radius: 50%;
+    background-color: #fe4c50;
+    height: 90px;
+    width: 90px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+}
+
+.floating_button:hover {
+    color: #ffffff;
+}
+
+.floating_button i:hover {
+    background: #fe7c7f;
+}
+
+
 iframe {
     display: block;
     width: 100%;

views/layouts/header.ejs

@@ -13,8 +13,8 @@
   />
   <link href="https://fonts.googleapis.com" rel="preconnect" />
   <link crossorigin href="https://fonts.gstatic.com" rel="preconnect" />
-  <script
-    src="https://kit.fontawesome.com/e48d166edc.js"
+  <script 
+    src="https://kit.fontawesome.com/df87d635ce.js" 
     crossorigin="anonymous"
   ></script>
   <link

views/pages/index.ejs

@@ -590,6 +590,9 @@
             </div>
         </div>
     </div>
+    <div>
+    </div>
+        <a class="floating_button" href ="https://t.me/customerservicenekoya_bot"><i class="fa-solid fa-headset fa-2xl"></i></a>
     </div>
 
     <%- include('../layouts/footer.ejs', {state: 'index'}); %>