> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hiveku.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Add a Chat Widget
> Install Intercom, Crisp, Drift, or another live chat tool on your site
Install a live chat widget for support, sales qualification, or customer engagement. The pattern is the same for every major tool — paste a JavaScript snippet into your site's layout.
Supported widgets: anything with a JavaScript snippet. Intercom, Crisp, Drift, Tidio, Tawk.to, Chatwoot, HubSpot Chat, Olark, LiveChat, Front — all work the same way.
## Three Paths
Ask the project AI:
```
Add a Crisp chat widget to my site with website ID abc123.
Load it only in production, not in dev.
```
The AI finds your root layout, pastes the snippet in the right place, and adds a guard so the widget doesn't load during development. Review and deploy.
Paste the snippet yourself. Best if you want to understand what's happening or customize the integration (user identification, event tracking).
Use `NEXT_PUBLIC_CHAT_WIDGET_ID` and conditionally render a `` component. Best for multi-environment setups where staging and production use different accounts.
## The Generic Pattern
Create an account with your chosen provider. Intercom, Crisp, Drift, etc. all have free or trial tiers.
Look in the provider's dashboard under **Settings > Install** or **Widget Code**. They give you either a full `
```
Replace `YOUR_CRISP_WEBSITE_ID` with the ID from Crisp Dashboard > Website Settings > Setup Instructions.
## Example: Intercom (React / Next.js)
Install the SDK:
```bash theme={null}
npm install @intercom/messenger-js-sdk
```
Initialize it in your root layout:
```typescript theme={null}
'use client';
import { useEffect } from 'react';
import Intercom from '@intercom/messenger-js-sdk';
export function IntercomBoot({ user }: { user?: { id: string; email: string } }) {
useEffect(() => {
Intercom({
app_id: process.env.NEXT_PUBLIC_INTERCOM_APP_ID!,
user_id: user?.id,
email: user?.email,
});
}, [user]);
return null;
}
```
Mount `` once in your layout. If the user is logged out, leave `user` undefined and Intercom runs in anonymous mode.
## Example: Tawk.to (Free, Simple)
Before ``:
```html theme={null}