Como instalar o chat ao vivo em uma aplicação Next.js | Guia do usuário

Passo a passo para instalar o widget em uma aplicação Next.js: copiar o token e a URL, criar o componente ChatwootWidget com next/script, importá-lo no layout raiz e verificar.

Se você tem uma aplicação em Next.js, pode adicionar o widget de chat ao vivo do Chatwoot e conversar com seus visitantes em tempo real. A forma recomendada é criar um componente que carregue o script do Chatwoot usando o componente Script do próprio Next.js (next/script), que gerencia o carregamento de forma otimizada.

A integração é feita em poucos passos, ilustrados no exemplo abaixo.

Antes de começar

Você precisa de uma Caixa de Entrada de site já criada. Se ainda não tiver, crie o canal de site antes de continuar.

Os valores usados no código — o token do site e a URL de instalação — ficam em Configurações → Caixas de Entrada → selecione o canal de site → aba Configuração, no campo com o script gerado. Copie apenas esses dois valores.

Passo 1. Crie o componente

Copie o código abaixo e crie um arquivo na sua pasta de componentes com o nome ChatwootWidget.js. Substitua <url-da-sua-instalação> e <seu-token-do-site> pelos valores copiados na etapa anterior.

'use client';

import Script from 'next/script';

export default function ChatwootWidget() {
  const BASE_URL = '<url-da-sua-instalação>';

  return (
    <Script
      id="chatwoot-sdk"
      src={`${BASE_URL}/packs/js/sdk.js`}
      strategy="lazyOnload"
      onLoad={() => {
        // Configurações do Chatwoot
        window.chatwootSettings = {
          hideMessageBubble: false,
          position: 'right', // pode ser 'left' ou 'right'
          locale: 'pt', // defina o idioma
          type: 'standard', // [standard, expanded_bubble]
        };

        window.chatwootSDK.run({
          websiteToken: '<seu-token-do-site>',
          baseUrl: BASE_URL,
        });
      }}
    />
  );
}

Alguns detalhes do exemplo:

strategy="lazyOnload" — carrega o widget durante o tempo ocioso do navegador, ideal para chat de suporte, sem atrasar o conteúdo da página.
onLoad — executa as configurações e inicia o widget só depois que o script terminou de carregar. Por usar onLoad, o componente precisa ser um Client Component (por isso a diretiva 'use client' no topo).

Passo 2. Importe o componente

Importe o componente no seu layout raiz para que o widget apareça em todas as páginas.

Se você usa o App Router (app/layout.js):

import ChatwootWidget from '../components/ChatwootWidget';

export default function RootLayout({ children }) {
  return (
    <html lang="pt-br">
      <body>
        {children}
        <ChatwootWidget />
      </body>
    </html>
  );
}

Se você usa o Pages Router (pages/_app.js):

import ChatwootWidget from '../components/ChatwootWidget';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <ChatwootWidget />
    </>
  );
}

Você também pode importar o componente em uma página específica, caso queira o widget apenas nela.

Passo 3. Verifique

Abra sua aplicação no navegador. Pronto! Agora você verá o widget do Chatwoot na sua página.