Bom dia!
Na minha Loja Virtual, uso o Jivo para manter contato com meus clientes pelo site.
Vocês sabem se existe algum chat nesse mesmo esquema, só que direto pelo whatsapp? Onde a pessoa em vez de me chamar pelo jivo, vai chamar direto pelo whatsapp.
4 curtidas
@FelipeGomes Tenho um código que unifica os chats do WhatsApp, Facebook e e-mail da sua loja em um pop-up. Se quiser te passo.
3 curtidas
Também gostaria muito, se possível, muito obrigado.
Segue o código e as orientações para instalação:
Local de Instalação:
Incluir Códido HTML >> Descrição: Central de Chats >> Local da publicação: Rodapé >> Página da Publicação: Todas as Páginas >> Tipo: HTML
Configurando Whatsapp:
Observe o código:
Da linha 7 à 9 estão presentes os códigos da versão web e da linha 11 à 13 estão os da versão mobile.
Os ítens marcados em azul representam o número de Whatsapp pelo qual o seu cliente entrará em contato, ou seja, nesse campo entrará o número de contato da sua loja. Faça o procedimento tanto na versão web quanto na mobile.
Observe que no código existe os caracteres XXYY000000000, ou seja, XX representa o código do país, que no nosso caso é 55. Remova o XX e coloque o número 55;
Logo depois vem os caracteres YY, esses caracteres representam o seu código de DDD com 2 dígitos apenas. No caso do Rio de Janeiro seria 21 ou 22 por exemplo, basta remover os caracteres YY e colocar o seu DDD;
O restante dos caracteres (000000000), obviamente, é o seu número de telefone / Whatsapp. Remova os zeros e coloque seu número.
Os ítens marcados em vermelho no código representam o endereço da imagem que aparecerá flutuando na loja que conterá o link. A extensão já traz um modelo padrão, mas você poderá alterar se quiser. O código CSS embutido na extensão redimensiona a altura e largura da imagem para 50px (imagem quadrada). Fica a seu critério alterar ou não.
Role a barra de rolagem horizontal para direita para visualizarmos o restante do código:
Os ítens marcados em azul nessa parte do código representam a mensagem pré-cadastrada para facilitar a vida do seu cliente. Por padrão inserimos a mensagem “Oi! Estou entrando em contato pelo chat Whatsapp da sua loja virtual. Poderia me ajudar?”, mas você poderá alterar se quiser, porém é importante entender que na mensagem que você cadastrar não poderá conter caracteres acentuados! Jamais! Se você cadastrar alguma palavra com acento (Ex: olá, você, ótimo) a extensão simplesmente não funcionará, ainda não sabemos por que, mas fica a dica! Você poderá introduzir pontos de exclamação, interrogação e etc… menos acentos!
Altere apenas o que está marcado dentro do retângulo azul na imagem acima.
Configurando Facebook Messenger:
Role a barra de rolagem horizontal para o início e observe o trecho do código marcado na imagem abaixo:
Iremos alterar a linha 16. A linha 17 você irá alterar se quiser, é opcional.
O local marcado em azul representa o nome da sua página ou perfil no Facebook, ou seja, ao clicar no botão do Messenger o cliente será direcionado diretamente a este perfil para iniciar a conversa. Você deverá inserir o nome da sua página/perfil apenas neste local, não mexa no restante do endereço.
O local marcado em vermelho no código representam o endereço da imagem que aparecerá flutuando na loja que conterá o link. A extensão já traz um modelo padrão, mas você poderá alterar se quiser. O código CSS embutido na extensão redimensiona a altura e largura da imagem para 50px (imagem quadrada). Fica a seu critério alterar ou não.
Não será necessário alterar mais nada no código para o seu correto funcionamento.
Segue o código abaixo, só copiar colar e editar conforme acima:
<script src="https://use.fontawesome.com/38d45f7c1d.js"></script>
<div title="Fale Diretamente Conosco" class="central-chats">
<div class="inside">
<i class="fa fa-comments icone-principal" aria-hidden="true"></i>
<!-- WHATSAPP -->
<a class="hide-mobile messenger-whatsapp" href="https://web.whatsapp.com/send?phone=XXYY000000000&text=Oi! Estou entrando em contato pelo chat Whatsapp da sua loja virtual. Poderia me ajudar?" target="_blank">
<img title="Whatsapp" src="https://cdn.awsli.com.br/218/218665/arquivos/whats-messenger2.png">
</a>
<a class="hide-web messenger-whatsapp" href="https://api.whatsapp.com/send?phone=XXYY000000000&text=Oi! Estou entrando em contato pelo chat Whatsapp da sua loja virtual. Poderia me ajudar?" target="_blank">
<img title="Whatsapp" src="https://cdn.awsli.com.br/218/218665/arquivos/whats-messenger2.png">
</a>
<!-- FACEBOOK MESSENGER -->
<a class="messenger-facebook" href="https://www.messenger.com/t/NOME-DA-PAGINA/" target="_blank">
<img title="Facebook Messenger" src="https://cdn.awsli.com.br/218/218665/arquivos/face-messenger.png">
</a>
<!-- E-MAIL FORM MODAL -->
<a class="email-modal" href="#modalContato" data-toggle="modal" data-target="#modalContato">
<i title="E-Mail" class="fa fa-envelope" aria-hidden="true"></i>
</a>
</div>
</div>
<style>
.central-chats {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 999;
}
.central-chats > .inside {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
border-radius: 100%
}
.central-chats:hover > .inside {
width: 110px;
height: 110px;
border-radius: 100px 100px 45px 100px
}
.central-chats > .inside .icone-principal {
width: 50px;
line-height: 50px;
text-align: center;
font-size: 25pt;
background: #4267B2;
color: white;
border-radius: 100%;
z-index: 9;
position: absolute;
bottom: 0;
right: 0;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.central-chats:hover .icone-principal {
background: rgba(0,0,0,.2);
color: rgba(255,255,255,.6)
}
.central-chats > .inside > a > i {
background: #DC493C;
color: white;
border-radius: 100%
}
.central-chats > .inside > a > i,
.central-chats > .inside > a > img {
width: 50px;
line-height: 50px;
text-align: center;
font-size: 20pt;
position: absolute;
opacity: 0;
-webkit-transition: all .1s ease-in;
-moz-transition: all .1s ease-in;
-ms-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.central-chats:hover > .inside > a > i,
.central-chats:hover > .inside > a > img {
opacity: 1;
}
.central-chats > .inside > a > i:hover,
.central-chats > .inside > a > img:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
.central-chats a.messenger-whatsapp > img {
left: 0;
bottom: 0;
}
.central-chats a.messenger-facebook > img {
top: 0;
left: 0;
}
.central-chats a.email-modal > i {
right: 0;
top: 0;
}
@media only screen and (min-width: 768px){
.central-chats .hide-web {display: none}
}
@media only screen and (max-width: 767px){
.central-chats .hide-mobile {display: none}
}
</style>
Este código foi criado pelo Caio Cesar Pedrosa da Agência Visualyze. As orientações de instalação foram retiradas do site dele.
19 curtidas
Pedro, eu já usava o chat Jivo no meu site, ele até que ajuda legal, não queria desfazer dele e nem parar de usar esse chat com o whatsapp e messenger. só que ficou um em cima do outro, então ficou muito embolado. você sabe se eu consigo jogar um dos chats pro lado esquerdo da tela?
@FelipeGomes como mudar a posição dessa central para a esquerda eu não sei.
Aqui na loja eu uso o Tawk.to, a solução que encontrei foi colocar o chat do Tawk.to para a esquerda e a central de chats ficou na direita.
Dentro da configuração do Jivo chat você não consegue colocar ele a esquerda da tela?
Deu certo aqui, Pedro! Pelo própio site do Jivo eu troquei aposição.
Obrigado, cara! 
1 curtida
Muito bom esse código em! Vou usar 
2 curtidas
como eu mudo a cor desse icone azul? queria deixa lo preto
1 curtida
Tem este passo a passo que você escolhe o próprio ícone.
Você escolhe o ícone em https://www.iconfinder.com/
2 curtidas
@gabriel_fca essa mudança você vai fazer nesse pedaço do código:
.central-chats > .inside .icone-principal {
width: 50px;
line-height: 50px;
text-align: center;
font-size: 25pt;
background: #4267B2;
color: white;
border-radius: 100%;
z-index: 9;
position: absolute;
bottom: 0;
right: 0;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
}
É esta a parte que você tem que mudar: background: #4267B2; troca o código da cor azul pelo da cor Preto.
2 curtidas
Obrigado!! deu certim
Show de bola. instalei o código na minha loja e ficou top, funcionando perfeitamente. Muito obrigado Pedro.
@glaydsonm, ficou dessa forma, com a parte do VOLTAR AO TOPO em cima dos links de entrar em contato. 
Pedro coloquei os seus códigos porem acho que estou fazendo alguma coisa errada na configuração .e os ícones estão em cima da seta que sobe a pagina do site .
tem como eu colocar os ícones do lado esquerdo da pagina ? como eu faço ?
se puder dar uma olhada na minha pagina eu agradeço esta dando erro nos 3 ícones que vc disponibilizou
www.shopping3setor.com.br
olha o que me aparece de erro
Obrigado
Funcionou muito bem para mim!
Abraço
Boa Tarde Pedro, acabo de iniciar na plataforma e estou consumindo todo conteúdo da comunidade e gostaria de agradecer á você e toda a equipe e comunidade pelas dicas, colaboração, gentileza, educação e respeito para com todos. Obrigado por contribuir conosco. Deus abençoe sua vida!
4 curtidas
Como faço pra colocar somente o WhatsApp, não manjo de limpar código.
E esse código funcionou, obrigado.
1 curtida