Tendo alguns conhecimentos básicos de desenvolvimento web, é possível aumentar as possibilidades de uso e personalização do nosso Web Chat, são eles:
- Incorporando o Web Chat sem o widget em meu site
- Capturando informações de contexto do site para personalizar a conversa do Web Chat
- Manipulando o comportamento de abertura/fechamento do Widget
Primeiros passos: Os elementos do Web Chat
O Web Chat é composto pelos componentes abaixo, que podem ser utilizados através de métodos da instância da classe ZenviaChat.
Snippet de código
Este trecho de código deve ser inserido antes do fechamento da tag <body> no HTML do seu site.
Isso é feito através do seguinte bloco HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13<html> <head> <title>Meu site de exemplo</title> </head> <body> <div>Conteúdo do site.</div> <!-- Início do snippet de código do chat --> <script src="https://static.zenvia.com/embed/js/zenvia-chat.min.js"></script> <script>new ZenviaChat('id-do-chat-aqui').build();</script> <!-- Fim do código do chat --> </body> </html>
ID do Web Chat
O ID Web Chat é o identificador, a “identidade” do Web Chat. Ele é usado para determinar algumas informações, como nome, logo e até a cor da janela do chat.
Para obter o ID do Web Chat, acesse: https://app.zenvia.com/home/credentials/chat/list
Integrações > Web Chat > Personalizar.
💡 Clique aqui para ver como editar a aparência do chat via Plataforma Zenvia.
Opcionalmente, e particularmente importante para Web Chat, é possível adicionar um ID de um elemento da página onde o Web Chat será criado.
Esse ID é indicado como parâmetro no método build().
Esse ID é indicado como parâmetro no método build().
1 2 3 4 5 6<div id="id-do-elemento-html_que_o_chat_esta"></div> <script> new ZenviaChat('id-do-chat-aqui') .build('id-do-elemento-html_que_o_chat_esta'); </script>
Confira um exemplo: embedded(“room”).
ID do usuário no Web Chat
O parâmetro user define o ID do usuário no Web Chat. Juntamente com o ID Web Chat, determina o ID da conversa.
Por padrão, esse ID é gerado aleatoriamente e armazenado no navegador até que o mesmo seja encerrado. Dessa forma, esse ID será sempre o mesmo enquanto o usuário não fechar o navegador.
Por isso, mesmo que o usuário saia da página ou abra várias abas, a conversa carregada será sempre a mesma.
Também é possível utilizar algum outro identificador, como um e-mail, por exemplo.
1 2 3 4 5<script> var zchat = new ZenviaChat('id_webchat') .user(this.email) .build(); </script>
Widget
Alterando a cor do widget
Para personalizar a cor do widget, basta adicionar o parâmetro .color('cor_hexadecimal') no script do Web Chat.
1 2 3 4 5 6<script src="https://static.zenvia.com/embed/js/zenvia-chat.min.js"></script> <script> new ZenviaChat('id-do-chat-aqui') .color('#FF7F00') .build(); </script>
Veja nossa página de demonstração: http://zenvia.github.io/html/chat-embedded/config-color.html.
Alterando a posição do widget dentro do site
Para modificar a posição do widget do web chat dentro do site, basta adicionar o parâmetro .embedded('room') no script do Web Chat.
Logo após, crie uma <div id="elemento-hmtl"> para englobar o script e personalize com o CSS inline através da tag style="".
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29<section class="hero is-white"> <div class="hero-body"> <div class="container"> <!-- ELEMENTO HTML ONDE A JANELA DO CHAT SERÁ INSERIDA --> <div id="elemento-html" style=" width: 500px; height: 500px; float: right; margin-left: 10px; border: 5px solid black;"> </div> <!-- Conteúdo da página --> <h3 class="title is-4">Sobre nós</h3> <div class="content"> <p>Somos uma empresa que acredita no futuro! Acima de tudo, no futuro das relações entre empresas e clientes.</p> <p> Com uma história de mais de 14 anos e a liderança em mobilidade corporativa no Brasil, oferecemos soluções capazes de fazer com que os clientes percebam os processos de negócio das empresas como experiências ricas em significado e valor.</p> <p>Vem simplificar o mundo com a gente!</p> </div> </div> </div> </section> <!-- Início do código do chat --> <script src="https://static.zenvia.com/embed/js/zenvia-chat.min.js"></script> <script> new ZenviaChat('85b287488b82d36ca599382fd36c2695') .embedded('room') .build('elemento-html'); </script> <!-- Fim do código do chat -->
Botão de início
Este é um botão de clique para o usuário dar o opt-in na conversa.
Para adicionar uma mensagem personalizada, basta informá-la entre parênteses. Se você não informar, o texto padrão é "Começar".
Para inseri-lo, basta adicionar o método .button('texto_do_botao') no script do Web Chat.
1 2 3 4 5<script> new ZenviaChat('id-do-chat-aqui') .button('Começar') .build(); </script>
Veja nossa página de demonstração: http://zenvia.github.io/html/chat-embedded/type-button+keyword.html.
Personalizando o widget com uma imagem - botão flutuante
Por padrão, o widget vem com um ícone de balões de conversa. Caso queira personalizar a imagem do botão flutuante, basta modificá-la via CSS, diretamente no script do Web Chat.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18<!-- Início do snippet de código do chat --> <script src="https://static.zenvia.com/embed/js/zenvia-chat.min.js"></script> <style> .znv-chat .znv-float-button { background-image: url("<url da imagem>"); background-size: contain; background-position: center; } </style> <script src="https://static.zenvia.com/embed/js/zenvia-chat.min.js"></script> <script> new ZenviaChat('id-do-chat-aqui') .embedded('button') .color('transparent') .build(); </script> <!-- Fim do código do chat -->
Mensagem de boas-vindas
Esta mensagem aparece junto ao botão de início, muito usado para convidar o usuário a iniciar o chat.
Para inserir a mensagem de boas-vindas, basta adicionar o método .message('texto_da_mensagem') no script do Web Chat.
1 2 3 4 5 6<script> new ZenviaChat('id-do-chat-aqui') .message('Olá! Eu sou o Testbot! Vamos conversar?') .button('Começar') .build(); </script>
Veja nossa página de demonstração: http://zenvia.github.io/html/chat-embedded/type-button+message.html.
Janela da conversa
Trata-se da janela onde ocorre toda a conversa, tendo por padrão as medidas 400px x 567px.
Quando o Web Chat está configurado para o modo .embedded('room') , o valor padrão passa a ser 100%, para que a janela do chat se adapte ao container da <div> pai.
Veja o exemplo: http://zenvia.github.io/html/chat-embedded/type-inline.html.
Veja o exemplo: http://zenvia.github.io/html/chat-embedded/type-inline.html.

Para personalizar suas medidas, basta adicionar os parâmetros no script: .width() e/ou .height().
1 2 3 4 5 6 7 8<script> new ZenviaChat('id-do-chat-aqui') .width('500px') .height('500px') .message('Olá! Eu sou o Testbot! Vamos conversar?') .button('Começar') .build(); </script>
Integrações alternativas
Link/URL
São URLs que, quando acessadas, iniciam o chatbot, identificado pelo ID Web Chat, utilizado em sua composição.
URLs podem ser utilizadas em diversos cenários, sendo, portanto, bem flexíveis.
Domínios: Existem diversas opções de domínio que podem ser usadas para esse propósito. Seguem algumas delas com suporte a https:
- zenvia.chat
- seuchat.com
Composição: O URL de redirecionamento a um Chatbot possui o seguinte formato:
- http://[domínio]/bot/[Id Web Chat]
ou
- http://[domínio]/bot/[Id Web Chat]/[palavra-chave]
Veja um exemplo funcional: http://chat.zenvia.com/bot/85b287488b82d36ca599382fd36c2695.