Crie um widget de bate-papo do Whatsapp com vários números e contas

Olá amigos Blanter , desta vez irei compartilhar um tutorial interessante que é perfeito para sites ou blogs com o tema serviços ou venda de produtos. Este widget pode ser usado em todos os tipos de plataformas com apenas HTML, CSS e Javascript. Claro que também é adequado para uso no WordPress.

Pela foto, você deve ter imaginado como o widget do chatbox funciona e funciona. Você pode adicionar 2 a um número ilimitado de contas que serão conectadas ao Whatsapp. Depois de selecionar, os visitantes podem digitar uma mensagem antes de finalmente entrar no aplicativo WhatsApp automaticamente . Você deve instalar este widget se precisar de mais de 2 Atendimento ao Cliente.

MUITO FÁCIL


Para saber como instalar e também adicionar uma conta do Whatsapp, você só precisa copiar um dos códigos que foram instalados anteriormente. Da mesma forma para cor e posição, tudo pode ser feito facilmente. Este guia incluirá um vídeo para facilitar a compreensão deste tutorial.

Widget de bate-papo do Whatsapp com várias contas
Exemplo de enviar mensagem (indonésio)

TUTORIAL SOBRE COMO INSTALAR VÁRIOS WIDGETS DO WHATSAPP CHAT


Este guia é para instalação no Blogger / Blogspot.

Vá para Blogger> Temas> Editar HTML.
Coloque o seguinte CSS logo acima do código ]]></b:skin>ou</style>

/* CSS Multiple Whatsapp Chat */
#whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;right:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}a.blantershow-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;right:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)}a.blantershow-chat i{transform:scale(1.2);margin:0 10px 0 0}.header-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;padding:20px}.header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;line-height:1.7;margin:0}.info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:left;margin:0 10px 0 0}.info-avatar:before{content:'\f232';z-index:1;font-family:"Font Awesome 5 Brands";background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;left:30px}a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888}#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none}.blanter-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:20px;outline:none;resize:none}a#send-it{color:#555;width:40px;margin:-5px 0 0 5px;font-weight:700;padding:8px;background:#eee;border-radius:10px}.first-msg{background:#f5f5f5;padding:30px;text-align:center}.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}.start-chat .blanter-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;right:15px;color:#fff;font-size:30px}@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}@media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}}.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}.show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}

Para este HTML você pode colocá-lo em Layout> Widgets> HTML / Javascript , na verdade ele pode ser colocado em qualquer lugar, se você editar o HTML, você pode colocá-lo acima do código Javascript na próxima etapa.

<h1>Canais de atendimento via WhatsApp</h1>
<div class='credit'>Criado por <a href='https://www.inter.com' target='_blank' title='Dunia Blanter'>Reginaldo Teodoro</a></div>

<div class='hide' id='whatsapp-chat'>
<div class='header-chat'>
<div class='head-home'><h3>Olá!</h3>
<p>Clique em um de nossos representantes abaixo para conversar no WhatsApp ou envie-nos um e-mail para reteocar@gmail.com</p></div>
<div class='get-new hide'><div id='get-label'/><div id='get-nama'/></div></div>
<div class='home-chat'>
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://2.bp.blogspot.com/-y6xNA_8TpFo/XXWzkdYk0MI/AAAAAAAAA5s/RCzTBJ_FbMwVt5AEZKekwQqiDNqdNQJjgCLcBGAs/s70/supportmale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>Suporte</span>
<span class='chat-nama'>Reginaldo</span>
</div><span class='my-number'>5562981277735</span>
</a>
<!-- Info Contact End -->
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://4.bp.blogspot.com/-X1Xs2iRKabY/XXWzkqQ-iDI/AAAAAAAAA5w/HSyhR0gIXvUzlAx5XgaZzmlrCJkTgrOFQCLcBGAs/s70/supportfemale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>Atendente</span>
<span class='chat-nama'>Marcia</span>
</div><span class='my-number'>5562981277735</span>
</a>
<!-- Info Contact End -->
<div class='blanter-msg'>Ligue-nos para <b>+556235190560</b> de <i>0:00hs a 24:00hs</i></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>Olá! O que posso fazer para você?</span></div>
<div class='blanter-msg'><textarea id='chat-input' maxlength='120' placeholder='Escreva uma pergunta' row='1'/>
<a href='javascript:void;' id='send-it'>  enviar    </a></div></div>
<div id='get-number'/><a class='close-chat' href='javascript:void'>&#215;</a>
</div>
<a class='blantershow-chat' href='javascript:void' title='Mostrar bate-papo'><i class='fab fa-whatsapp'/>Olá! como posso lhe ajudar?</a>
O código na marcação azul é o código que deve ser alterado de acordo com os dados do contato.
Para números do WhatsApp, não use o sinal de mais +, apenas o código do país como 62 .

Coloque o Javascript abaixo, logo acima do código</body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js'/>  
 <script type='module'>
  import { IndefiniteObservable } from &quot;https://ajax.googleapis.com/ajax/libs/indefinite-observable/2.0.1/indefinite-observable.bundle.js&quot;
</script>

Salvar modelo.

Observe que esta fonte do widget seguirá automaticamente a fonte padrão do modelo que você está usando. Certifique-se de ter instalado fontes especiais e também CSS externo, como Font Awesome e jQuery .

Se você não usou Font Awesome e jQuery, você pode adicionar o seguinte código acima do código, </head>geralmente a versão mais recente do modelo já usa Font Awesome (Ícones) e jQuery.


Confira o vídeo completo sobre como instalar o Whatsapp Chat Widget com várias contas .


Este widget de bate-papo Whatsapp é perfeito quando combinado com o template Tokoshop Blanter , que é um template de loja online com recurso de checkout automático do WhatsApp, sem necessidade de enviar uma lista de dados aos compradores, todos os formulários que os compradores preencherem serão enviados diretamente ao vendedor.

Esse é o tutorial que posso compartilhar agora, não se esqueça de Marcar , Inscrever e Comentar para o próximo tutorial. obrigado.