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 RockZap®: * Android: v5.0 em diante * iOS: v11.0 em diante ## **Como criar um canal de site no RockZap®?** **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.rockzap.com.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMCtrRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--18f9d85dca3a4071dcf0e0460641dd01cd9ac9e0/add-inbox-button-in-chatwoot.png) **Passo 2**. Clique no ícone "Website". ![](https://app.rockzap.com.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMDJrRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--901c99b5a883845f7cf7b213ca2892a6958dcdce/choose-20website-20inbox.png) **Passo 3**. Digite o nome do seu site, URL e outros detalhes conforme descrito abaixo. ![](https://app.rockzap.com.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMUtrRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--2e118a552ef74f912916db2a44e23e1a242374f7/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.rockzap.com.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMDZrRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--28242a6a1a9222754f52615a740349781c92c03c/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**. **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** do seu site. ![](https://app.rockzap.com.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMUNrRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--f2d43693d6e6f9fa77269ad8eb5f0040d1647877/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.rockzap.com.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMVNrRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--cb6d535846197bab3f51d315feae01837415aba3/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.rockzap.com.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMU9rRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--68473a0c337b4b40a6ce0b106cd4d9cfcb191f97/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.rockzap.com.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMVdrRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--7b74522e61cfe039852e39365310d3e80cf5b034/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.rockzap.com.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMWVrRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--33661a38c8e7b038931ac345b71adc7956a190bc/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.rockzap.com.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMWFrRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--2164f8bf737d0339ad775fe05a3193807cc9812f/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.rockzap.com.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMXFrRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--e218f5adf2b0e6619b35f81dce255381ea3b7089/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** 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.rockzap.com.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMWlrRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--1769ea41c13ea111b36de5014c8f5eb744365d09/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** 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.rockzap.com.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMW1rRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--2bf27d900653b592ad9a4d5f5524bc8c14f279f1/configuration-20settings-20tab-20in-20website-20inbox.png) Você pode clicar no botão **`Copiar`** para copiar o código e **colar no arquivo raiz** 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.rockzap.com.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMUdrRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--2a53b3245ecd570f867b518fb2002c3e70193881/chatwoot's-20web-20widget-20builder.png)