diff --git a/pages/index.tsx b/pages/index.tsx index c4b685e..b29bbd5 100644 --- 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 ( <> diff --git a/src/components/helpButton.module.css b/src/components/helpButton.module.css index 64b9b54..fafbd36 100644 --- 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; -} \ No newline at end of file +} diff --git a/src/components/helpButton.tsx b/src/components/helpButton.tsx index 88800fa..afc1e6e 100644 --- a/src/components/helpButton.tsx +++ b/src/components/helpButton.tsx @@ -74,6 +74,16 @@ export function HelpButton() { setIsContactFormOpen(true); }} /> + } + onClick={(e) => { + e.preventDefault(); + setIsOpen(false); + (window as any).Plain.open(); + }} + /> )}