![Passo a passo para instalar o widget em um site Docusaurus: copiar o token da caixa de entrada de site, instalar o plugin, configurá-lo em docusaurus.config.js e reiniciar o servidor.](/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbUlRIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--844fe92fe35f6f6380a9f7f4a394aa7b82da98f3/1730211724-como-instalar-chat-ao-vivo-em-um-site-docusaurus.png)

O Chatwoot integra-se ao [Docusaurus](https://docusaurus.io/) por meio do plugin `@chatwoot/docusaurus-plugin`, que adiciona o widget de chat ao vivo a sites feitos com Docusaurus. Assim, seus visitantes podem falar com você diretamente da documentação ou do site.

## Antes de começar

Você precisa de uma caixa de entrada do tipo **chat no site** já criada, pois é ela que fornece o **token do site** usado na configuração.

Para criá-la, acesse **Configurações → Caixas de Entrada → Adicionar caixa de entrada** e escolha **Site**. Depois de criada, abra a caixa de entrada e copie o **token do site** nas suas configurações — é esse valor que você usará em `websiteToken`.

## Passo 1: adicione o plugin ao seu projeto

Com Yarn:

```
yarn add @chatwoot/docusaurus-plugin
```

ou com npm:

```
npm install @chatwoot/docusaurus-plugin --save
```

## Passo 2: configure o plugin em docusaurus.config.js

No arquivo `docusaurus.config.js`, adicione o seguinte:

```
// docusaurus.config.js

module.exports = {
  plugins: ["@chatwoot/docusaurus-plugin"],
  themeConfig: {
    chatwoot: {
      websiteToken: "Token do seu site",
      baseURL: "https://sua-empresa.hub.chatwoot.app.br", // endereço usado para acessar seu painel
      enableInDevelopment: false, // opcional
      chatwootSettings: {
        hideMessageBubble: false,
        position: "left", // pode ser "left" ou "right"
        locale: "pt", // idioma do widget
        useBrowserLanguage: false, // usar o idioma do navegador do visitante
        darkMode: "auto", // "light", "auto" ou "dark"
        type: "expanded_bubble",
        launcherTitle: "Fale Conosco",
      }
    }
  }
};
```

Substitua `websiteToken` pelo token da sua caixa de entrada de chat no site e `baseURL` pelo mesmo endereço que você usa para acessar o painel. Ajuste as opções em `chatwootSettings` conforme a aparência e o comportamento desejados para o widget.

Salve o arquivo e reinicie o servidor do Docusaurus. O widget de chat ao vivo passará a aparecer nas páginas do seu site.