tawk / tawk-messenger-react

Official React plugin for Tawk messenger
https://www.tawk.to
Other
23 stars 15 forks source link

The chat widget sometimes appear during dev localhost:3000 but doesn't appear at all when deployed to vercel #24

Closed myhendry closed 1 year ago

myhendry commented 1 year ago

Below is my _app.tsx file. Is there anything I missed out hence the chat widget doesn't appear? or is it because it's not supported once deployed to vercel because i understand vercel does not support subscription?

Thanks

_app.tsx

const TawkMessengerReact = dynamic(
  () =>
    // @ts-ignore
    import("node_modules/@tawk.to/tawk-messenger-react")
);

function MyApp({ Component, pageProps: { ...pageProps } }: AppProps) {
  const router = useRouter();

  const initialRenderRef = useRef(false);
  const tawkMessengerRef = useRef();

 useEffect(() => {
    initialRenderRef.current = true;
  }, []);

return (
        {initialRenderRef.current && (
          <TawkMessengerReact
            // @ts-ignore
            propertyId={process.env.NEXT_PUBLIC_TAWK_PROPERTY_ID}
            widgetId={process.env.NEXT_PUBLIC_WIDGET_ID}
            useRef={tawkMessengerRef}
          />
        )}
        <Component {...pageProps} />
)
myhendry commented 1 year ago

It's working fine now. i navigated away from the home page of my app and returned then the chat widget pops up.

For those looking to integrate tawk-messenger-react in nextjs and deploy on vercel, the sample code above is working fine