Adding Zendesk livechat on a react app might not be as straghtforward as it looks.
\nThe example uses state to check if $zopim is ready to interact (isZopimReady).
\nOnce that state is true, $zopim is ready to be interacted with. The best way is to have a useEffect hook listening to isZopimReady and run the desired configurations on $zopin.
\nimport React, { FC, useEffect, useState } from \"react\";\nimport { useInterval } from \"usehooks-ts\";\nimport useScript from \"hooks/useScript\";\n\ndeclare const $zopim: any;\n\ninterface ZendeskProps {\n firstName?: string | null;\n lastName?: string | null;\n email?: string | null;\n}\n\nconst Zendesk: FC<ZendeskProps> = ({ firstName, lastName, email }) => {\n const status = useScript(\"https://static.zdassets.com/ekr/snippet.js?key=8f60d464-1c48-48a6-8d14-25f47c389e59\", {\nid: \"ze-snippet\",\n });\n\n const [isZopimReady, setIsZopimReady] = useState(false);\n\n /**\n * used to set livechat configurations\n * once isZopimReady is true\n */\n useEffect(() => {\nif (isZopimReady) {\n $zopim(() => {\n $zopim.livechat.button.setOffsetVertical(80);\n $zopim.livechat.button.setOffsetHorizontal(60);\n $zopim.livechat.button.setPosition(\"br\");\n if (firstName && lastName) {\n $zopim.livechat.setName(`${firstName} ${lastName}`);\n }\n if (email) {\n $zopim.livechat.setEmail(email);\n }\n });\n}\n }, [isZopimReady]);\n\n /**\n * used to set isZopimReady to true\n * once script is ready and $zopim is defined\n */\n useInterval(\n() => {\n if (status === \"ready\" && typeof $zopim !== \"undefined\") {\n setIsZopimReady(true);\n }\n return;\n},\n!isZopimReady ? 200 : null,\n );\n\n return null;\n};\n\nexport default Zendesk;\n