How to Add a Custom Chat Widget

Step-by-step integration guide.

This guide explains how to add a third-party chat widget that will appear on every page of the application.

Where the widget code lives

All the code for the chat widget should be placed in components/ChatWidget.tsx. The component is mounted at the root of the application, so a script injected there will load on every route.

Add your provider's snippet

Most chat providers (like Intercom, Drift, HubSpot, BoldDesk, etc.) will give you a JavaScript snippet to add to your site. Paste this snippet inside the useEffect hook in the ChatWidget.tsx file.

Override default widget styles

If you need to override the default styles of your chat widget (for example, to adjust its position), add CSS directly into the style tag within the same file.

Why this approach

Once you've added your script to ChatWidget.tsx, your chat widget will be live across the entire site. This centralized approach makes it easy to manage, update, or remove the widget in the future.