How to remove the Zendesk Element?

[Aryaman73]

When the Zendesk component is created, the Zendesk icon is permanently placed in the document due to document.body.appendChild(script), even when the component where Zendesk is placed is unmounted.

Is it possible to make it so that this works similar to a normal component, which unmounts when the parent is unmounted? (I imagine it's not easy since we're injecting a script here). If not, is there any way to remove the component on some sort of event?

[Leulz]

If hiding the component is enough for your use case like it was for me, I'd recommend loading the component globally (e.g. using the <script> inside your page's head) and putting something like this in the component in which the Zendesk component is supposed to exist:

useEffect(() => {
    ZendeskAPI("webWidget", "show");

    return () => {
      ZendeskAPI("webWidget", "hide");
    };
  }, []);

Hopefully this works for you, but it's far from ideal. Would probably be best if we could pass the Zendesk component something to be run when it unmounts.

[Aryaman73]

Thanks for your reply! 😄

For future reference; I've found that Zendesk doesn't like it if you repeatedly render <Zendesk ... /> (which is what will happen if you're attaching it to a particular page/component). It's also a bit misleading because this doesn't really behave as a component, and more like a function call that permanently adds Zendesk to your website, so if you're re-rendering a component with <Zendesk .../> in it, it doesn't seem to behave properly. That's why @Leulz reply works well.

Hence, if you're doing any kind of conditional showing and hiding of Zendesk, the best way to do it is to keep the <Zendesk ... /> component in your top-most index/head/app file, and then use the API calls to show/hide whenever necessary using the code in the reply above.

FYI if you want Zendesk to be hidden by default when you're rendering it in the top-most file, this component supports onLoaded:

<Zendesk
        zendeskKey={YOUR_KEY_HERE}
        onLoaded={() => {
          ZendeskAPI("webWidget", "hide");
        }}
/>

---

Side note: Zendesk show/hide APIs have a race condition which might also cause issues 🙃

[lingaiah-danda]

Hi @Leulz

is this the styling issue or i didn't get it.

It should be like this when i landed on specific path

[Leulz]

@lingaiah-danda The issue here is that the component isn't rendered only on the path you use it. Once it's rendered, it stays there on all other pages of the website. Hence my suggestion to hide the component once you leave the page you want it to be rendered on.