Chat ao vivo no site
Por Stainen
Por Stainen
Aprenda a instalar, configurar e personalizar o widget de chat ao vivo da RockZap® no seu site ou aplicativo.
Como ativar o modo escuro no widget de chat ao vivo?
Sites modernos permitem que os usuários alternem entre os modos claro e escuro. Portanto, é importante que o chat ao vivo funcione com ambos os temas. Este guia ajuda você a configurar o modo escuro para o widget de chat ao vivo do RockZap® em seu site. Aqui está uma rápida demonstração de como o modo escuro funciona no widget de chat ao vivo: Para ativar o modo escuro no widget do RockZap®, utilize o parâmetro darkMode junto com o RockZap® Settings. O parâmetro darkMode aceita dois valores: 1. light - Ativa apenas o modo claro. Este é o valor padrão. 2. auto - Ativa o modo escuro com base na preferência do sistema operacional. window.chatwootSettings = { //... outras Configurações darkMode: "auto", }; Nota: A opção dark somente não é suportada no momento. Adicionaremos este suporte em versões futuras.
Como continuar conversas por e-mail?
Seus clientes podem continuar suas conversas de chat com seus agentes por meio de threads de e-mail. Isso pode ser necessário nas seguintes circunstâncias. - Não há agentes disponíveis e o cliente deixa uma mensagem no chat. - O cliente deixa o chat antes que o agente responda. Para que isso funcione, o contato deve ter um endereço de e-mail no CRM do RockZap®. Obtendo endereços de e-mail dos contatos Você pode solicitar/atualizar e-mails dos clientes no RockZap® das seguintes maneiras. 1. Pelo RockZap® SDK Se o e-mail do cliente for conhecido, você pode fornecê-lo ao RockZap® por meio do método setUser no nosso SDK. 2. Pelo formulário pré-chat Se você habilitar um formulário pré-chat obrigatório, a conversa começa com uma tela como mostrado abaixo: 3. Pelo Prompt de coleta de e-mail Quando o formulário pré-chat está desativado e o e-mail do cliente é desconhecido, o RockZap® inicia uma conversa com um prompt de coleta de e-mail. Nota: Quando o Captain está ativado em uma caixa de entrada, o prompt de coleta de e-mail é automaticamente suprimido. O Captain irá gerenciar as conversas diretamente, mesmo fora do horário comercial. O prompt de coleta de e-mail só será enviado se o Captain transferir a conversa para um agente humano ou se o Captain não estiver configurado para a caixa de entrada. Continuidade da Conversa Se o endereço de e-mail do cliente for atualizado por qualquer uma das opções mencionadas acima e ele sair do chat enquanto o agente respondeu, ocorre o seguinte. - O cliente recebe uma thread de e-mail com um resumo da conversa. Ele pode responder a esse e-mail e continuar a conversa. - O agente recebe as respostas do cliente por e-mail em seu painel do RockZap®, continuando sobre o mesmo thread da conversa existente. O ícone de e-mail no balão do chat indica que o cliente respondeu por e-mail.
Como instalar um chat ao vivo usando o Google Tag Manager?
Se você estiver usando o Google Tag Manager em seu site, pode instalar o RockZap® pelo painel do Google Tag Manager criando uma nova tag para o RockZap®. Para instalar o widget de chat ao vivo do RockZap®, siga os passos abaixo. Passo 1. Acesse o console do Tag Manager Faça login no workspace do Tag Manager com sua conta Google. Você verá um workspace semelhante ao mostrado abaixo. Clique no botão "Adicionar uma nova tag" no painel. Passo 2. Crie uma nova tag com a Configuração de Tag Será exibido um popup para criar uma tag. Altere o nome de "Tag sem título" para "RockZap®" ou qualquer nome que preferir. Clique em configuração da tag e selecione o tipo de tag "HTML personalizado" na lista. Copie o script da configuração da caixa de entrada do RockZap® para a área de texto do script HTML, conforme mostrado abaixo. Selecione a caixa "Suportar document.write". Passo 3. Defina o Disparo Clique em "Disparo" e selecione "Todas as páginas" na lista. Clique em "Salvar" para salvar a tag. Você poderá ver a tag listada em alterações do workspace. Clique em "Enviar" para publicar a tag. Forneça um nome de versão e publique as alterações clicando em "Publicar". Passo 4. Risque da sua lista de tarefas# Você instalou com sucesso o widget de chat ao vivo do RockZap® no seu site. Atualize seu site para ver o widget de chat ao vivo aparecer em todas as páginas.
Como instalar um chat ao vivo em um site WordPress?
WordPress é um popular Sistema de Gerenciamento de Conteúdo. Se você está hospedando seu site no WordPress, pode adicionar o widget de chat ao vivo do RockZap® e conversar com seus visitantes em tempo real. Isso pode ser feito em 4 etapas simples usando o plugin do RockZap® para WordPress. Passo 1. Baixe o plugin Chatwoot Baixe o arquivo Zip da versão mais recente do plugin Chatwoot para WordPress no GitHub, como mostrado abaixo. Passo 2. Faça o upload do plugin para o seu site WordPress Faça login em sua conta WordPress. Navegue até o Painel de Administração e clique em “Plugins” na barra lateral. Você verá o botão "Adicionar novo". Você verá uma opção para fazer upload do plugin, conforme mostrado na imagem abaixo. Clique em “Fazer upload” e selecione o arquivo Zip baixado no passo 1. Passo 3. Ative o plugin Depois que o plugin for enviado, você verá uma tela de Sucesso com a opção "Ativar Plugin", conforme mostrado abaixo. Clique no botão "Ativar Plugin". Parabéns! O plugin está agora instalado. Para completar a configuração, você precisa informar as credenciais do app Chatwoot, conforme mostrado nos passos abaixo. Passo 4. Configure o plugin Agora, você verá “Configurações do Chatwoot” no menu "Configurações". Clique para atualizar a configuração do chat ao vivo. Você verá a tela de Configurações como mostrado abaixo. Configure o plugin Chatwoot aqui para que ele funcione. Você precisa criar uma caixa de entrada de Website na sua instalação do Chatwoot. Consulte este guia para criar um canal de website. Os campos do formulário são explicados abaixo. 1. Chatwoot Website Token / Chatwoot Installation URL Assim que você criar um canal de website na sua instalação do Chatwoot, você receberá um script. Você pode copiar o Token e a URL conforme mostrado abaixo. 2. Design do Widget O Chatwoot suporta dois designs de widget de chat ao vivo – Design Padrão e design de Bolha Expandida. Escolha sua preferência. 3. Posição do Widget Você pode selecionar onde posicionar o widget de chat ao vivo no site de acordo com sua preferência. As opções disponíveis são Esquerda & Direita. 4. Idioma O Chatwoot suporta mais de 30 idiomas. O idioma padrão é Inglês. 5. Texto do Lançador Este campo é opcional. Se você usar o design de bolha expandida, pode usar o texto do lançador para personalizar o texto exibido na bolha. Depois de preencher o formulário, clique no botão "Salvar alterações". Além disso, certifique-se de que você criou a caixa de entrada do website no Chatwoot. Passo 5. Verifique se o plugin está funcionando corretamente Visite o seu site e veja se o widget aparece no site!
Configurações do chat ao vivo do site explicadas
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 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". Passo 2. Clique no ícone "Website". Passo 3. Digite o nome do seu site, URL e outros detalhes conforme descrito abaixo. 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 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. 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. 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. 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. 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 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. 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 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. Clique em Atualizar para salvar as alterações. Aba Horário Comercial Clique na aba "Horário Comercial". Nesta seção, você pode definir o horário de atendimento da sua equipe. 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. Clique no botão Atualizar configuração de horário comercial. Aba Formulário Pré-Chat 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. 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 Clique na aba “Configuração”. Aqui você encontra o trecho de código a ser copiado para o seu site. Você pode clicar no botão Copiar para copiar o código e colar no arquivo raiz do seu site. Aba Construtor de Widget Você pode personalizar seu widget web com as configurações simples oferecidas nesta página. Visualize suas alterações ao vivo.
Compreendendo a Identidade do Contato e a Validação de Identidade na RockZap®
Quando um cliente entra em contato com sua equipe, o RockZap®cria ou atualiza um perfil de contato para ele. Esse perfil ajuda os agentes a entenderem quem é o cliente, quais conversas ele teve anteriormente e por qual canal entrou em contato. Por exemplo, o mesmo cliente pode entrar em contato por meio de: - Chat ao vivo do site - WhatsApp - E-mail - Um widget de suporte dentro do aplicativo O RockZap® pode usar identificadores como endereço de e-mail, número de telefone ou um ID único de cliente para conectar essas interações ao mesmo perfil de cliente. Correspondência de contato vs validação de identidade Existem duas ideias relacionadas, mas diferentes: Correspondência de contato ajuda o RockZap® a reconhecer que duas conversas podem pertencer ao mesmo cliente. Validação de identidade ajuda o RockZap® a confirmar que o cliente está realmente autorizado a usar essa identidade. Essa distinção é importante porque alguém pode digitar o e-mail de outro cliente em um formulário de chat público. A correspondência de contato sozinha pode armazenar o e-mail, mas não prova que o visitante é realmente dono daquele e-mail ou conta. O que os agentes veem quando a identidade não está verificada Quando a identidade de um cliente não está verificada, o RockZap® exibe um indicador de aviso próximo ao nome do contato. Isso ajuda os agentes a entender que o visitante não foi verificado de forma segura pela sua aplicação. Isso não significa necessariamente que o cliente é suspeito. Significa apenas que o RockZap® não recebeu um token de validação de identidade confiável para esse visitante. Para solicitações sensíveis, os agentes devem ter cuidado antes de discutir informações privadas como dados de faturamento, detalhes de conta, transações ou status de verificação. Por que a validação de identidade é importante A validação de identidade ajuda a proteger conversas privadas dos clientes. Ela reduz o risco de personificação, especialmente quando o suporte acontece dentro de um portal de clientes autenticados, aplicativo bancário, plataforma de investimentos, dashboard SaaS ou qualquer produto baseado em conta. Por exemplo, se um cliente autenticado inicia um chat a partir do seu portal, seu sistema pode informar ao RockZap®, com segurança: “Este visitante é o cliente 12345, e nós já o verificamos do nosso lado.” O RockZap® pode então confiar na identidade, porque ela foi verificada pelo seu sistema backend, e não apenas digitada em um formulário de chat. Configuração recomendada Para visitantes de sites públicos, você pode usar campos de contato normais como nome, e-mail e telefone. Para usuários autenticados, recomendamos habilitar a validação de identidade. Isso é útil quando agentes podem discutir informações sensíveis como: - detalhes de conta - informações de faturamento - pedidos ou transações - status KYC ou de verificação - solicitações internas de funcionários - questões de suporte regulamentadas Onde habilitar a validação de identidade A validação de identidade pode ser configurada nas configurações da caixa de entrada do seu site. Vá em: Configurações -> Caixas de Entrada -> Selecione a caixa de entrada do site -> Configuração -> Validação de Identidade Nesta seção, o RockZap® exibe a chave secreta usada para gerar tokens seguros de identidade. Você também pode escolher se a validação de identidade será obrigatória para todas as conversas. Se Exigir validação de identidade para todas as conversas estiver habilitado, os visitantes precisarão fornecer um token de identidade válido antes de iniciar conversas. Solicitações sem tokens válidos serão rejeitadas. Como funciona de forma simples Sua aplicação cria uma assinatura segura para o usuário autenticado. O RockZap® verifica essa assinatura antes de confiar na identidade do usuário. O segredo usado para criar essa assinatura permanece em seu servidor. Ele não deve ser exposto no navegador. Se a assinatura for válida, o RockZap® trata a identidade do cliente como verificada. Se a validação de identidade for exigida e a assinatura estiver ausente ou inválida, o RockZap® rejeita a solicitação. O que os agentes devem saber Os agentes não precisam entender a configuração técnica. O importante é: Se a validação de identidade estiver habilitada, a identidade do cliente exibida no RockZap® vem da sessão autenticada do cliente, e não de um valor digitado manualmente no chat. Isso dá mais confiança para as equipes de suporte ao lidar com conversas sensíveis. Quando usar a validação de identidade Use validação de identidade quando o widget de chat estiver sendo exibido dentro de um produto autenticado ou portal de clientes. Exemplos: - portal de cliente fintech - dashboard bancário - área de conta de e-commerce - aplicação SaaS - portal de help desk para funcionários - portal de saúde ou seguros Para um site público de marketing, a validação de identidade pode ser opcional. Já para suporte ao cliente autenticado, é altamente recomendada. Para desenvolvedores Este artigo explica o conceito de forma geral. Se você estiver pronto para configurar a validação de identidade.