Instalar o Webchat no site
Caminho: Opa! Store → Webchat → Instalar
Visão geral
O Webchat permite que você coloque uma janela de chat no site da sua empresa e receba as conversas dos visitantes no Opa! Suite. Assim, quem acessa o site fala com a sua equipe sem sair da página, e o atendimento entra na mesma fila dos outros canais, podendo passar pelo agente virtual e pelo fluxo de comunicação.
Para funcionar, o Opa! Suite gera um script que precisa ser colado no cabeçalho do site. Você também escolhe como o visitante se identifica: sem login, com a conta Google ou com a conta do Facebook. Não há cobrança por mensagem: o custo é o da licença do app.
Se a sua empresa tem um aplicativo próprio e quer ligar o chat dele ao Opa! Suite, sem a janela do site, veja Integrar um aplicativo próprio ao Webchat (modo API).
Pré-requisitos
- Licença do app Webchat contratada. Sem licença, a página do app mostra o botão Obter, que abre uma conversa com o time comercial. Cada Webchat instalado usa uma licença.
- Permissão para visualizar o Opa! Store no seu grupo de permissões.
- Agente virtual já criado no Opa! Suite. Ele será o responsável pelo canal.
- Acesso ao código do site (ou a quem cuida do site) para colar o script no cabeçalho.
- Para login com Google: uma conta Google com acesso ao Google Cloud Console.
- Para login com Facebook: uma conta no Meta for Developers.
Passo a passo
Instalar o Webchat e colar o script
- Acesse Opa! Store e abra o app Webchat.
- Clique em Instalar. Se já existir um Webchat, clique em Acessar e depois em Adicionar novo.
- Na janela Instalar Webchat, preencha os campos:
- Nome: nome para identificar o canal dentro do Opa! Suite.
- Agente virtual: o agente virtual que vai receber as conversas deste canal.
- Clique em Salvar. O sistema abre os ajustes do canal. Na primeira instalação, pelo botão Instalar, aparece a janela Adicione o script ao seu site.
- Clique em Copiar e fechar. Se a janela não aparecer (por exemplo, ao usar Adicionar novo), clique em Copiar código, na seção Script.
- Envie o script para quem cuida do site e peça para colar no cabeçalho (Header) de todas as páginas em que o chat deve aparecer.
- Abra o site e confira se a janela do chat aparece.
O Webchat é instalado com Permitir acesso sem login ativo. Para copiar o script de novo depois, acesse o registro do canal e clique em Copiar código, na seção Script.
As formas de login e os tokens fazem parte do script. Sempre que alterar a seção Formatos de Login, copie o script outra vez e substitua o antigo no site. Sem isso, o site continua com a configuração anterior.
Configurar o login com Google
O login com Google precisa de dois dados criados no Google Cloud Console: um ID do cliente OAuth e uma chave de API. O botão do Google só aparece no chat com os dois campos preenchidos. Os nomes dos menus do Google podem mudar; em caso de dúvida, consulte a documentação do Google sobre credenciais OAuth.
- Acesse o Google Cloud Console com a conta Google da empresa.
- Crie um projeto novo ou selecione um existente.
- Acesse APIs e serviços → Tela de permissão OAuth e preencha os dados do aplicativo, como nome, e-mail de suporte, política de privacidade e domínio do site.
- Acesse APIs e serviços → Credenciais → Criar credenciais → ID do cliente OAuth.
- Em Tipo de aplicativo, escolha Aplicativo da Web e dê um nome.
- Em Origens JavaScript autorizadas, adicione o endereço do site, sem a barra no final (ex.:
https://www.suaempresa.com.br). Se o chat estiver em mais de um domínio, adicione todos. - Crie a credencial e copie o ID do cliente.
- No mesmo projeto, acesse Credenciais → Criar credenciais → Chave de API e copie a chave gerada.
- No Opa! Suite, abra o registro do Webchat e clique em Editar informações na seção Formatos de Login.
- Ative Permitir login com Google.
- Cole o ID do cliente em Token Google OAuth e a chave de API em Token Google.
- Salve e copie o script de novo para o site.
Configurar o login com Facebook
O login com Facebook usa o ID do aplicativo (App ID) de um app criado no Meta for Developers.
- Acesse o Meta for Developers com a conta que administra a página da empresa.
- Em Meus aplicativos → Criar aplicativo, siga as etapas da Meta.
- Adicione o produto Login do Facebook ao app, ative o login com o SDK do JavaScript e informe o domínio do site em Domínios permitidos para o SDK do JavaScript. Os nomes dos menus da Meta podem mudar; em caso de dúvida, consulte a documentação da Meta sobre o Login do Facebook para a Web.
- Copie o ID do aplicativo, que aparece no painel do app.
- No Opa! Suite, abra o registro do Webchat e clique em Editar informações na seção Formatos de Login.
- Ative Permitir login com Facebook e cole o ID do aplicativo em Token Facebook.
- Salve e copie o script de novo para o site.
Resultado esperado
O app aparece como instalado e o botão Acessar passa a abrir a lista de canais do Webchat, com as colunas Nome, Status, Agente Virtual e Fluxo de Comunicação.
A janela do chat aparece no site. Quando o visitante envia a primeira mensagem, o atendimento chega ao Opa! Suite e segue o agente virtual e o fluxo de comunicação configurados.
Configurações disponíveis
Para ajustar o canal, acesse Opa! Store → Webchat → Acessar e clique no registro. Em cada seção, clique em Editar informações, faça as alterações e salve.
Dados de cadastro
| Campo | O que faz |
|---|---|
| Nome | Nome de identificação do canal. |
| Status | Ativo ou Inativo. Para ativar, é preciso ter uma licença do Webchat livre. |
| Agente virtual | Agente virtual responsável pelo canal. |
Script
Mostra o código que vai no cabeçalho do site. Clique em Copiar código para copiá-lo.
Formatos de Login
Define se o visitante precisa se identificar para conversar e com quais contas.
| Campo | O que faz |
|---|---|
| Permitir acesso sem login | O visitante conversa sem se identificar. |
| Permitir login com Google | Mostra a opção de entrar com a conta Google. O nome, o e-mail e a foto da conta vão para o contato. Exige Token Google OAuth e Token Google. |
| Permitir login com Facebook | Mostra a opção de entrar com a conta do Facebook. Exige Token Facebook. |
Integrar aplicativo próprio
Liga o Webchat a um aplicativo da sua empresa, sem a janela de chat do site. Veja Integrar um aplicativo próprio ao Webchat (modo API).
Preferências
| Campo | O que faz |
|---|---|
| Prioridade dos atendimentos na fila | Ordem do canal na fila: Altíssima, Alta, Média, Baixa ou Baixíssima. Canais com prioridade maior aparecem primeiro. |
| Exibir nome do atendente no cabeçalho das mensagens | Mostra ao visitante o nome do atendente no topo das mensagens. |
| Verificar se contato é humano | Confirma que quem escreve é uma pessoa antes de abrir o atendimento. |
Com Verificar se contato é humano ativo, o agente virtual pergunta "Você é humano?" antes de abrir o primeiro atendimento do contato, com as opções Sim e Não em ordem aleatória. O atendimento só é aberto se a pessoa responder Sim. Depois disso, a pergunta não se repete para esse contato. Se a resposta for Não, nenhum atendimento é aberto e a pergunta volta na próxima mensagem.
O aviso automático de posição na fila não é configurado no canal. Ele fica no departamento, em Avisar posição na fila.
Desinstalar o app
- Acesse Opa! Store → Webchat → Acessar e abra o registro.
- Clique em Desinstalar App.
- Digite o nome do canal exatamente como está cadastrado. O botão Desinstalar só é liberado quando o nome confere.
- Clique em Desinstalar.
- Remova o script do cabeçalho do site.
Ao desinstalar, a conexão com o Webchat é desfeita. Atendimentos em andamento são interrompidos, e atendimentos já encerrados perdem o vínculo com o canal, o que pode afetar as métricas.
Problemas comuns
| Sintoma | O que verificar |
|---|---|
| A janela do chat não aparece no site | Confira se o script foi colado no cabeçalho (Header) de todas as páginas. |
| O botão de login com Google não aparece | Os campos Token Google OAuth e Token Google precisam estar preenchidos, e o script precisa ter sido copiado de novo depois de salvar. |
| O login com Google dá erro | Confira se o endereço do site está em Origens JavaScript autorizadas no Google Cloud Console, sem barra no final. |
| O login com Facebook não funciona | Confira se o campo Token Facebook tem o ID do aplicativo (não um token de acesso) e se o domínio do site está configurado no app da Meta. |
| Aparece o botão Obter mesmo com o app contratado | Use Sincronizar licença em Configurações → Sobre. Se continuar, fale com o time comercial. |
Boas práticas
- Mantenha Permitir acesso sem login ativo se o objetivo é captar contatos rápidos. Use os logins sociais quando for importante identificar quem está falando.
- Ofereça só as formas de login que você vai manter configuradas.
- Sempre que alterar o login, copie o script de novo e atualize o site.
- Use um Nome que identifique o site (ex.: "Webchat - Site institucional"), principalmente se a empresa tiver mais de um.