Added contact button that calls the VideoAsk

widget and opens the chat window.

Components/Buttons/Button.jsx

@@ -0,0 +1,13 @@
+import Link from "next/link";
+const Button = ({ buttonText, buttonLink ="/",}) => {
+  return (
+    <Link href = {buttonLink} target="_blank" rel="noopener noreferrer">
+      <button className="px-20 mt-8 mx-5 py-2 text-white border border-blue-500 rounded hover:border-white transition duration-300 ease-in-out focus:outline-none">
+        {buttonText}
+      </button>
+    </Link>
+  );
+};
+
+export default Button;
+

Components/Buttons/ContactButton.jsx

@@ -0,0 +1,19 @@
+const ContactButton = ({buttonText}) => {
+    const openChatScreen = () => {
+      const chatButton = document.getElementsByClassName('videoask-embed__button--SgLKO')[0];
+      if (chatButton) {
+        chatButton.click();
+      }
+    };
+  
+    return (
+      <button
+        className="px-20 mt-8 mx-5 py-2 text-white border border-blue-500 rounded hover:border-white transition duration-300 ease-in-out focus:outline-none"
+        onClick={openChatScreen}
+      >
+        {buttonText}
+      </button>
+    );
+  };
+  
+  export default ContactButton;

Components/Elements/VideoAsk.jsx

@@ -1,25 +1,30 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 const VideoAsk = () => {
-  useEffect(() => {
-    window.VIDEOASK_EMBED_CONFIG = {
-      "kind": "widget",
-      "url": "https://www.videoask.com/f8fah1r34",
-      "options": {
-        "widgetType": "VideoThumbnailSmall",
-        "text": "Talk",
-        "backgroundColor": "#FFFFFF",
-        "position": "bottom-right",
-        "dismissible": true
-      }
-    };
-    const script = document.createElement('script');
-    script.src = 'https://www.videoask.com/embed/embed.js';
-    script.async = true;
-    document.body.appendChild(script);
-  }, []);
+const [isMounted, setIsMounted] = useState(false);
 
-  return null;
+useEffect(() => {
+setIsMounted(true);
+if (isMounted) {
+  window.VIDEOASK_EMBED_CONFIG = {
+    "kind": "widget",
+    "url": "https://www.videoask.com/f8fah1r34",
+    "options": {
+      "widgetType": "VideoThumbnailSmall",
+      "text": "Talk",
+      "backgroundColor": "#FFFFFF",
+      "position": "bottom-right",
+      "dismissible": true
+    }
+  };
+  const script = document.createElement('script');
+  script.src = 'https://www.videoask.com/embed/embed.js';
+  script.async = true;
+  document.body.appendChild(script);
+}
+}, [isMounted]);
+
+return null;
 };
 
 export default VideoAsk;

Components/Layout/ContactFormSection.jsx

@@ -1,36 +1,30 @@
-import VideoButton from "/home/clyde/Code/shiloh/Components/Buttons/video-button.jsx";
-import Link from "next/link";
+import ContactButton from "../Buttons/ContactButton.jsx";
 import ContactThreeJsComponent from "../Elements/ContactThreeJsComponent.jsx";
 
 const ContactFormSection = ({
   text,
-  videoId,
-  buttonOneText,
-  buttonTwoText,
-  buttonLink = "/", // add a default value,
+  buttonText,
 }) => {
-
   return (
+    <>
     <div className="relative z-10 h-screen w-screen">
       <div className="absolute inset-0 z-0">
-      <ContactThreeJsComponent />
+        <ContactThreeJsComponent />
+        
       </div>
       <div className="relative z-10 flex flex-col items-center justify-center h-full">
         <div className="relative flex justify-center items-end w-full mb-20">
           <h1 className="text-6xl font-normal text-white">{text}</h1>
         </div>
         <div className="flex justify-start space-x-4">
-          <VideoButton videoId={videoId} buttonOneText={buttonOneText} />
-          <Link
-            href={buttonLink}
-            className="px-4 mt-8 mx-5 py-2 text-white underline border-white rounded hover:border-white transition duration-300 ease-in-out focus:outline-none"
-          >
-            {buttonTwoText}
-          </Link>
+        <ContactButton
+        buttonText={buttonText}
+        />
         </div>
       </div>
     </div>
+    </>
   );
 };
 
-export default ContactFormSection;
+export default ContactFormSection;

pages/index.js

@@ -50,7 +50,9 @@ export default function Home() {
         buttonLink="/contactus"
       />
       <ContactFormSection
-      buttonOneText="contact us"
+      text="contact us"
+      buttonText="contact us"
+      buttonLink="https://www.videoask.com/f8fah1r34"
       />
       </>
   );