Render launcher conditionally based on the route

[davidbsoares]

Is is possible to render the contact form button conditionally?

[ravinggenius]

I had to figure this out today. Here's what I came up with:

// app.tsx near the root

import Zendesk, { ZendeskAPI } from "react-zendesk";

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

// shared-layout.tsx or single-one-off-page.tsx

import { ZendeskAPI } from "react-zendesk";

useEffect(() => {
  ZendeskAPI("webWidget", showZendeskSupport ? "show" : "hide");
}, []);

1. Mount <Zendesk /> near your app root. Optionally use onLoaded to hide the widget by default.
2. Use useEffect() to show/hide the widget on pages as needed.
3. Optionally if you have a layout component, you can add a prop (showZendeskSupport) to avoid duplicating the useEffect() everywhere.