# Add live chat to a Next.js or React site

The Ha Tang widget is a chat bubble your team answers from the Ha Tang inbox, next to Zalo, Messenger, Instagram, TikTok Shop, WhatsApp and email, with an optional AI assistant that answers from your own content.

Get your site id under **Support → Channels → your website → Install** (it starts with `site_`).

**Next.js or React**

```bash
npm install @hatang/chat-react
```

```tsx title="app/layout.tsx"
import { HatangChat } from "@hatang/chat-react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <HatangChat siteId="site_123..." />
      </body>
    </html>
  );
}
```

Open it from your own button with `useHatang()`: `const chat = useHatang(); chat.open();`. Pass `user={{ userId, email, name, hash }}` to attach the signed-in user, with `hash` computed on your server.

**Any other site**

```html
<script>window.$hatang=window.$hatang||[];window.HATANG_SITE_ID="site_123...";</script>
<script src="https://chat.hatang.dev/widget.js" async></script>
```

## Go further

- The component, the hook and every option: [React and Next.js](https://hatang.dev/docs/guides/sdks/react.md)
- Sign user identities so nobody can pose as a customer: [Identity verification](https://hatang.dev/docs/guides/support/web-widget/identity-verification.md)
- The widget's JavaScript API: [JavaScript API](https://hatang.dev/docs/guides/support/web-widget/javascript-api.md)
- Answer automatically: [AI assistant](https://hatang.dev/docs/guides/support/ai-assistant.md)
- Mobile apps: [Flutter](https://hatang.dev/docs/guides/sdks/flutter.md), [React Native](https://hatang.dev/docs/guides/sdks/react-native.md), [iOS](https://hatang.dev/docs/guides/sdks/ios.md), [Android](https://hatang.dev/docs/guides/sdks/android.md)

Source: https://hatang.dev/docs/guides/recipes/live-chat-nextjs