Este documento vai te ajudar a configurar totalmente o chat ao vivo do seu site. Ele explica como criar e usar configurações adicionais para a caixa de entrada do site desejado.

## Compatibilidade e requisitos[​](https://www.chatwoot.com/docs/product#compatibility-and-requirements "Direct link to heading")

O painel web e o widget de chat ao vivo funcionam na maioria dos navegadores modernos. Veja as versões de navegador compatíveis:

* Mozilla Firefox: v52 em diante

* Google Chrome: v57 em diante

* Chromium: v57 em diante

* Apple Safari: v14.1 em diante

* Microsoft Edge: v16 em diante

Veja as versões de sistema operacional móvel suportadas para o app móvel Chatwoot:

* Android: v5.0 em diante

* iOS: v11.0 em diante

## Como criar um canal de site no Chatwoot?

**Passo 1**. Vá para a página de Caixas de Entrada. Acesse Configurações → Caixas de Entrada → botão "Adicionar Caixa de Entrada".

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNnRTVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--c20bce3346e4c5302e34231b732d35756c5d8f7c/add-inbox-button-in-chatwoot.png)

**Passo 2**. Clique no ícone "Website".

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBN3BTVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--ca254101e5b84f709f7af7422bd82a888f947073/choose%20website%20inbox.png)

**Passo 3**. Digite o nome do seu site, URL e outros detalhes conforme descrito abaixo.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBOEJTVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--15de72d163b99b8c4c03979f6cf65ceaa0890c40/website%20channel%20settings%20in%20chatwoot.png)

Os campos disponíveis são explicados abaixo.

1. **Nome do site**

   Digite o nome do seu site. Por exemplo, Example Inc.

2. **Domínio do site**

   Digite a URL do seu site. Por exemplo, [`www.example.com`](http://www.example.com/)

3. **Cor do widget**

   Clique na paleta e selecione uma cor para o widget de chat ao vivo do seu site.

4. **Título de boas-vindas**

   Escreva uma mensagem de saudação para seus clientes. Por exemplo, Olá 👋

5. **Mensagem de boas-vindas**

   Por exemplo: Estamos aqui para ajudar com suas dúvidas. Pergunte qualquer coisa ou envie seu feedback.

6. **Ativar/desativar saudação do canal**

   Ative para enviar mensagem de saudação quando o cliente iniciar a conversa

7. **Mensagem de saudação do canal**

   Escreva uma saudação para iniciar a conversa. Por exemplo: Oi. Como podemos ajudar?

Depois de inserir todos os detalhes, clique no botão “Criar Caixa de Entrada”.

**Passo 4**. "Adicione agentes" à sua caixa de entrada do site.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBK1ZTVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--bc3650f3167675552f06e58f14243f29159d3716/adding%20agents%20to%20inbox.png)

As conversas serão encaminhadas para os agentes apenas se eles estiverem associados à caixa de entrada. Mesmo que você seja Administrador, é necessário se adicionar como agente à Caixa de Entrada para vê-la na sua tela.

Selecione os agentes no menu suspenso e clique em Adicionar agentes. Se os agentes não foram adicionados, siga os passos para [adicionar agentes](https://app.chatwoot.com/hc/chatwoot-user-guide-cloud-version/en/setup-account/463).

**Passo 5**. Pronto! Você criou com sucesso uma caixa de entrada do site. Agora, adicione o widget ao seu site.

Copie e cole o trecho de código exibido na página em seu site e comece a atender seus clientes. Você pode clicar no botão Copiar para copiar e então [colar no arquivo raiz](https://www.chatwoot.com/docs/user-guide/setting-up-chatwootwidget#root-file-of-website) do seu site.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdzlUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--2de82601616d737879b126aa57ef963e368dfaa1/website%20inbox%20is%20ready.png)

Se você clicar no botão "**Mais configurações**", será direcionado para as Configurações Adicionais da Caixa de Entrada. Se clicar em "**Leve-me até lá**", você será direcionado para a Caixa de Entrada recém-criada.

**Passo 6**. Se quiser atualizar os agentes com acesso à caixa de entrada, vá em Configurações → Caixas de Entrada. Você verá sua caixa de entrada do site listada lá. Clique em Configurações. Você poderá ver o código e a lista de agentes que têm acesso à caixa de entrada.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeUpUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d927267e1314006286bb481ac4cfad56640250c4/website%20settings.png)

## Complete a configuração da caixa de entrada do site

Você já tem uma caixa de entrada do site funcional. Vamos ver as configurações adicionais da Caixa de Entrada.[​](https://www.chatwoot.com/docs/product/channels/live-chat/create-website-channel#additional-inbox-settings "Direct link to heading")

Na tela de Caixas de Entrada, clique no ícone de engrenagem para acessar a página de Configurações. Você verá a seguinte tela:

### Aba Configurações

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBekJUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--217e87f08cc9fedfd4f013077a28a7c0c7f1b3c0/updating%20website%20settings.png)

Role para baixo para ver mais configurações, onde você pode configurar várias notificações que deseja receber quando sua caixa de entrada do site começar a funcionar.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBelZUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--c57a9e3df4574d12a56cfcf79567f2702a7719a8/updating%20more%20website%20settings.png)

Veja abaixo alguns exemplos para seu entendimento:

**Ativar caixa de coleta de e-mail** é ativada por padrão. Isso significa que uma mensagem automática para coletar o e-mail será exibida assim que o cliente iniciar uma conversa. O cliente/usuário final receberá um aviso para digitar o e-mail.

**Ativar CSAT**. Ao ativar, a pesquisa de satisfação do cliente será exibida sempre que um ticket for resolvido. Os resultados do CSAT podem ser vistos depois na seção de Relatórios.

Clique no botão "**Atualizar**" para salvar as alterações realizadas.

### Aba Colaboradores[**​**](https://www.chatwoot.com/docs/product/channels/live-chat/create-website-channel#collaborators-tab "Direct link to heading")

Clique na aba "Colaboradores".

Aqui, você pode adicionar Agentes à Caixa de Entrada ou remover agentes já adicionados. Você também pode ativar ou desativar o direcionamento automático de novas conversas para os agentes adicionados a essa caixa de entrada.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMEZUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fb59fd3384c40aa182e8025c2ce50dbdd412679a/collaborators%20in%20website%20inbox.png)

Clique em `Atualizar` para salvar as alterações.

### Aba Horário Comercial[**​**](https://www.chatwoot.com/docs/product/channels/live-chat/create-website-channel#business-hours-tab "Direct link to heading")

Clique na aba "Horário Comercial". Nesta seção, você pode definir o horário de atendimento da sua equipe.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMGxUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--67f7632d1b08f2600a7e9e5b57437925dbbe8d8e/website%20business%20hours%20setting.png)

Marque a caixa `Ativar disponibilidade comercial para esta caixa de entrada` se você tiver horários comerciais bem definidos. Assim que marcar, uma nova seção será aberta, como mostrado abaixo. Aqui você pode escrever a mensagem que será exibida ao cliente fora do horário comercial.

**Nota:** *Quando o Captain está ativado em uma caixa de entrada, a mensagem de indisponibilidade é automaticamente suprimida. O Captain lidará com as conversas diretamente, mesmo fora do horário comercial. A mensagem de indisponibilidade só será enviada se o Captain transferir a conversa para um agente humano ou se o Captain não estiver configurado para a caixa de entrada.*

Você também pode selecionar o horário comercial disponível para cada dia da semana, junto com o fuso horário correto.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMUJUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--b0121cc8955abbafb5ba02f2571be6512cf8e95d/business%20hour%20settings%20in%20chatwoot.png)

Clique no botão `Atualizar configuração de horário comercial`.

### Aba Formulário Pré-Chat[​](https://www.chatwoot.com/docs/product/channels/live-chat/create-website-channel#pre-chat-form-tab "Direct link to heading")

Clique na aba "Formulário Pré-Chat".

Com isso, você pode [coletar informações sobre seus clientes](https://www.chatwoot.com/blog/pre-chat-form-automations/) assim que eles entrarem na janela do chat ao vivo/widget do seu site. Você pode usá-lo para coletar nome, e-mail e outros dados antes do início do chat.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMXBUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--44b3215e97ab368f518d0edc68540dee5ad8c977/pre%20chat%20form%20settings%20in%20chatwoot.png)

Os campos exibidos são explicados abaixo:

1. Ativar formulário pré-chat

   Selecione Sim ou Não. Sim, se deseja usar o formulário pré-chat. Não se quiser deixá-lo desativado.

2. Mensagem Pré-Chat

   Escreva uma mensagem para iniciar a conversa com o cliente. Por exemplo: Olá, precisamos de algumas informações para te atender melhor.

3. Campos do formulário pré-chat

   Marque os que forem necessários.  
   **Importante:** "Nome", "E-mail" e "Telefone" são os únicos atributos padrão do formulário pré-chat. Os demais campos são criados através de atributos personalizados. Se precisar de campos personalizados no formulário, [crie-os como atributos personalizados](https://app.chatwoot.com/hc/chatwoot-user-guide-cloud-version/en/features-explained/470) primeiro.

Clique no botão "Atualizar". O Formulário Pré-Chat está agora ativado.

### Aba Configuração[​](https://www.chatwoot.com/docs/product/channels/live-chat/create-website-channel#configuration-tab "Direct link to heading")

Clique na aba “Configuração”. Aqui você encontra o trecho de código a ser copiado para o seu site.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBOEJUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--9d1f59b59a73fa8c2b9b2bb5d43628d9aee98b5b/configuration%20settings%20tab%20in%20website%20inbox.png)

Você pode clicar no botão `Copiar` para copiar o código e [colar no arquivo raiz](https://www.chatwoot.com/docs/user-guide/setting-up-chatwootwidget#root-file-of-website) do seu site.

### Aba Construtor de Widget[**​**](https://www.chatwoot.com/docs/product/channels/live-chat/create-website-channel#widget-builder-tab "Direct link to heading")

Você pode personalizar seu widget web com as configurações simples oferecidas nesta página. Visualize suas alterações ao vivo.

![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBOGxUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--b7cc5f2ecd054b45fed9f15da31a074dfb8df860/chatwoot's%20web%20widget%20builder.png)