diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index b755fa82..a9bdbac7 100755 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -10,6 +10,7 @@ import type { AppProps } from "next/app"; import { useRouter } from "next/router"; import Script from "next/script"; import { ThemeProvider } from "next-themes"; +import { useEffect } from "react"; // eslint-disable-next-line @typescript-eslint/no-unused-vars import tw from "twin.macro"; @@ -28,6 +29,18 @@ const NextApp = ({ Component, pageProps }: AppProps) => { const client = useApollo(pageProps); const router = useRouter(); + // Add a page class to the body. Useful for things like hiding the ZE chat widget on the Share page + useEffect(() => { + const pathName = router.pathname.replaceAll("/", ""); + // add class to body element + document.body.classList.add(`page-${pathName}`); + + // clean-up + return () => { + document.body.classList.remove(`page-${pathName}`); + }; + }, []); + // Datadog RUM initialization datadogRum.init({ applicationId: process.env.NEXT_PUBLIC_DATADOG_APP_ID as string, diff --git a/src/styles/GlobalStyles.tsx b/src/styles/GlobalStyles.tsx index 4f8d20f6..f2ccbb90 100755 --- a/src/styles/GlobalStyles.tsx +++ b/src/styles/GlobalStyles.tsx @@ -162,6 +162,11 @@ const stylesBase = css` iframe[title="Message from company"] { color-scheme: auto; } + /* Hide ZenDesk widget on the Share page */ + .page-share iframe[title="Message from company"], + .page-share iframe[title="Button to launch messaging window"] { + display: none; + } `; const GlobalStyles = () => (