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

npm install @hatang/chat-react

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

<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
• Sign user identities so nobody can pose as a customer: Identity verification
• The widget's JavaScript API: JavaScript API
• Answer automatically: AI assistant
• Mobile apps: Flutter, React Native, iOS, Android