Merge pull request #3 from team-plain/add-chat-widget

presmihaylov · web-flow · commit 52b958294e5e · 2024-10-11T14:08:42.000+03:00
add live chat to contact form example
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,8 +1,23 @@
+import { useEffect } from 'react';
 import type { NextPage } from 'next';
 import Head from 'next/head';
 import { HelpButton } from '../src/components/helpButton';
 
 const Home: NextPage = () => {
+  useEffect(() => {
+  let script = document.createElement('script');
+  script.async = false;
+  script.onload = function(){
+    (window as any).Plain.init({
+      appId: 'liveChatApp_01J9XJ0Z9WZC9CXQXMR7FT1BC7',
+      hideLauncher: true,
+    });
+  };
+  script.src = 'https://chat.cdn-plain.com/index.js';
+  document.getElementsByTagName('head')[0].appendChild(script);
+
+  }, []);
+
   return (
     <>
       <Head>
diff --git a/src/components/helpButton.module.css b/src/components/helpButton.module.css
@@ -3,6 +3,7 @@
     opacity: 0;
     transform: translateY(2px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -11,23 +12,23 @@
 
 
 .helpButton {
-    border-radius: 100%;
-    background: #e9d5ff;
-    color: #4c1d95;
-    width: 42px;
-    height: 42px;
-    border: none;
-    position: fixed;
-    bottom: 24px;
-    right: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
+  border-radius: 100%;
+  background: #e9d5ff;
+  color: #4c1d95;
+  width: 42px;
+  height: 42px;
+  border: none;
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }
 
 .helpButton:focus {
-    outline: none;
+  outline: none;
 }
 
 .popoverContent {
@@ -36,16 +37,16 @@
   padding: 24px;
   width: 260px;
   background-color: white;
-  box-shadow:   0px 0.8px 2.7px rgba(0, 0, 0, 0.012),
-  0px 2px 6.9px rgba(0, 0, 0, 0.018),
-  0px 4.1px 14.2px rgba(0, 0, 0, 0.022),
-  0px 8.4px 29.2px rgba(0, 0, 0, 0.028),
-  0px 23px 80px rgba(0, 0, 0, 0.04);
+  box-shadow: 0px 0.8px 2.7px rgba(0, 0, 0, 0.012),
+    0px 2px 6.9px rgba(0, 0, 0, 0.018),
+    0px 4.1px 14.2px rgba(0, 0, 0, 0.022),
+    0px 8.4px 29.2px rgba(0, 0, 0, 0.028),
+    0px 23px 80px rgba(0, 0, 0, 0.04);
   animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform, opacity;
   transition: width 300ms ease, height 300ms ease;
-  height: 218px;
+  height: 248px;
 }
 
 .popoverContentLarge {
@@ -54,7 +55,7 @@
 }
 
 .popoverContent:focus {
-    outline: none;
+  outline: none;
 }
 
 .popoverContent[data-state='open'] {
@@ -100,4 +101,4 @@
   display: flex;
   justify-content: center;
   align-items: center;
-}
+}
diff --git a/src/components/helpButton.tsx b/src/components/helpButton.tsx
@@ -74,6 +74,16 @@ export function HelpButton() {
                   setIsContactFormOpen(true);
                 }}
               />
+              <LinkRow
+                label="Chat with us"
+                href="#"
+                icon={<ChatAltIcon />}
+                onClick={(e) => {
+                  e.preventDefault();
+                  setIsOpen(false);
+                  (window as any).Plain.open();
+                }}
+              />
             </>
           )}
 
