![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.](/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbVVRIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--8ab48505d69d186785e657347d50228bc210d4c7/1730215075-como-instalar-o-chat-ao-vivo-em-uma-aplicacao-next-js.png) 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 `` e `` pelos valores copiados na etapa anterior. ```jsx 'use client'; import Script from 'next/script'; export default function ChatwootWidget() { const BASE_URL = ''; return (