how to hide customer messenger in some page?

[nguyenhuutinh]

[glenngijsberts]

Please clarify your question, otherwise people do not know what your issue is and what they can do about it.

[nguyenhuutinh]

Hi, I'm using the Customer Chat. but when i set state to hide it. it didnot work. I just want to show the customer chat on home page, not all pages

[andreiciceu]

Hello,

Once it gets rendered in the document, even if you remove it from the virtual DOM, the chat will still be displayed as the fb lib renders it separately, in the "real" DOM i guess.

The current solution I'm using is manually hiding those newly elements. It's not the cleanest, but it works.

Here's the code (NextJS), but can be easily adapted to react

import {useEffect} from 'react'
import {FacebookProvider, CustomChat} from 'react-facebook'
import {useRouter} from 'next/router'
import {DEV_MODE, FB_APPID, FB_PAGE_ID} from '@config'

const HIDE_ON = ['/school/manage', '/crm', '/student/theory-videos', '/student']
const FB_SELECTORS = ['.fb-customerchat', '.fb_dialog']

export default function FacebookChat({minimized = true}) {
  const {pathname} = useRouter()
  if (DEV_MODE) return null

  const hidden = !!HIDE_ON.find((str) => pathname.startsWith(str))

  useEffect(() => {
    FB_SELECTORS.forEach((selector) => {
      document.querySelectorAll(selector).forEach((element) => {
        if (hidden) element.classList.add('hidden')
        else element.classList.remove('hidden')
      })
    })
  }, [hidden])

  if (hidden) return null

  return (
    <FacebookProvider appId={FB_APPID} chatSupport>
      <CustomChat pageId={FB_PAGE_ID} minimized={minimized} />
    </FacebookProvider>
  )
}