Adicione o Blip Chat e outros canais no seu site via Floating Chat Widget


Reputação 7
Crachá +1

Fala pessoal!

Sei da necessidade de muitos para adicionar um botão flutuante com o blip chat, e gostaria de compartilhar alguns modelos com vocês.


Assim como algo inovador, eu só juntei o que já era bom de uma forma elegante. 😀


Antes de começar, é importante que você tenha o código(AppKey) do seu Chat Widget do Blip.

Pra pegar o código, é só acessar o canal Blip Chat no seu bot e encontrar ele aqui:


Vamos lá, hand’s on! 👐





MODELO #1:


Primeiro, eu peguei o chat criado pelo Henrique (https://help.blip.ai/hc/pt-br/articles/360059367253-Como-customizar-o-BLiP-Chat-Widget-através-de-CSS).

Depois, eu peguei um floating chat usando MaterializeCSS (html - How do I make Materialize's Tooltips sticky to floating action buttons? - Stack Overflow).


Juntei os dois em um, e assim nasceu o Modelo #1!

image

Para visualizar ao vivo, acesse: Blip Chat Widget - Modelo 1


Na sua página, dentro da tag você irá adicionar o código:


<script src="blip-chat.js"></script>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<style>
#blip-chat-open-iframe {
display: none !important;
}

#blip-chat-container {
height: 100% !important;
bottom: 0 !important;
right: 0 !important;
}

#blip-chat-iframe {
position: absolute !important;
top: 0 !important;
right: -400px !important;
bottom: 0 !important;
height: 100% !important;
max-height: 100% !important;
transform: none !important;
opacity: 1 !important;
box-shadow: none !important;
transition: 0.5s !important;
}

#blip-chat-iframe.blip-chat-iframe-opened {
right: 0 !important;
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.2) !important;
}
</style>

Note que eu chamei dois arquivos locais no meu servidor: blip-chat.js e script.js. Você precisa adicioná-los ao seu servidor, tá? O blip-chat.js é uma parada muito louca criada pelo Henrique, o script.js é onde você vai adicionar o seu código do seu Blip Chat.


Após pegar seu código, você vai no arquivo script.js e altera a variável appkey pra sua chave copiada anteriormente:


Agora é só salvar o arquivo e subir eles pro seu servidor do website.




Agora vamos adicionar o código ao corpo do seu site, ou seja, dentro da tag você adiciona o seguinte código:


<div class="fixed-action-btn">
<a class="btn-floating btn-large red pulse tooltipped fixed" data-position="left" data-tooltip="Precisa de Ajuda?!">
<i class="large material-icons md-dark">info_outline</i>
</a>
<ul>
<li>
<a class="btn-floating green tooltipped" data-position="left" data-tooltip="Whatsapp" href="https://wa.me/5535991542102?text=Oi%20Gabriel,%20Obrigado%20pelo%20Widget" target="_blank">
<i class="material-icons"><img src="https://bots2u.com.br/chat-widget/wpp.svg" width="40" height="40"/></i></a>
</li>
<li>
<a class="btn-floating cyan accent-3 tooltipped" data-position="left" data-tooltip="Blip Chat">
<i class="material-icons btn-solid-reg popup-with-move-anim" onclick="openBlipChat()"><img src="https://bots2u.com.br/chat-widget/blip.svg" width="40" height="40"/></i></a>
</li>
<li>
<a class="btn-floating grey tooltipped" data-position="left" data-tooltip="Email" href="mailto:[email protected]">
<i class="material-icons">email</i></a>
</li>
</ul>
</div>

Pronto, agora já vai estar funcionando o seu FCWMFdB (sigla para: Floating Chat Widget Mais Fo*a do Blip).


Claro, por último e não menos importante, não esqueça de editar cada campo, vamos lá pro passo a passo:


1 - É onde você vai alterar o seu ícone ou texto dentro do button. Por ter usado o MaterializeCSS, existem alguns ícones disponíveis como por exemplo o info_outline e o email. Para encontrar mais ícones é só você acessar o link: Icons - Materialize . Além disso, eu disponibilizei o ícone do Blip e do Whatsapp, sintam-se à vontade para usar da forma que está 😉


2 - É onde você altera a cor do seu botão, no caso do blip especificamente eu usei a cor cyan accent-3, para ver quais cores estão disponíveis, acesse: Color - Materialize


3 - Aqui é o link de ação do seu botão. Você precisa alterar para o seu whatsapp ali, lembre-se que o número é constituído pelo [Código do País]+[ddd]+[Número] - caso tenha dúvidas, você pode usar esse site para gerar seu link: Chat Link Generator for WhatsApp .


4 - Tooltip - aqui você altera a frase/palavra que você quer que apareça quando passar o mouse no button.





MODELO #2:


O modelo dois foi uma junção de dois códigos que achei no youtube + o style de chat criado pelo Henrique. (Fontes: Floating Button: Floating Action Button using Html CSS & Vanilla Javascript | CSS3 Material Design - YouTube + Show/Hide Div: open close hide show div javascript after a few seconds - YouTube + Floating do Henrique: https://help.blip.ai/hc/pt-br/articles/360059367253-Como-customizar-o-BLiP-Chat-Widget-através-de-CSS)

O resultado:

20210415_4326_%pn

Para visualizar ao vivo, acesse: Exemplo 2 - Blip Chat


Dessa vez, vou colocar todos códigos em uma única página e se você preferir, você pode separar em arquivos.


1 - Adicione o seguinte código dentro da sua tag <HEAD>:


    <script src="https://unpkg.com/blip-chat-widget" type="text/javascript"></script>
<script type="text/javascript">
var openBlipChat;
window.onload = function () {

const appkey = "Ym90MnVyb3V0ZXI6ZDVlYjIzMmItYjk3MC00N2IwLTgxNDEtNTg0NjkyOTAyMDUx"; //ALTERE AQUI PARA O SEU CÓDIGO DO CHAT WIDGET BLIP

var client = new BlipChat()
.withAppKey(appkey)
.withEventHandler(BlipChat.LOAD_EVENT, function(){
var iframe = document.getElementById("blip-chat-iframe");
iframe.contentWindow.postMessage({ code: "ShowCloseButton", showCloseButton: true }, iframe.src);
});

client.build();

openBlipChat = function() {
client.widget._openChat();
}
}
function actionToggle(){
var action = document.querySelector('.action');
action.classList.toggle('active');
}

function showdiv() {
document.getElementById("alert").style.visibility="visible";
}
setTimeout("showdiv()",5000);

function hidediv() {
document.getElementById("alert").style.visibility="hidden";
}
setTimeout("hidediv()",50000);
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
*
.action a
{
color: #000;
text-decoration: none;
}
.action
{
position: fixed;
bottom: 50px;
right: 50px;
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 5px 5px rgba(0,0,0,0.1);
}
.action span
{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: rgba(0,0,0,0.7); /* ALTERE AQUI A COR DO ÍCONE DO BOTÃO */
font-size: 2em;
transition: 0.3s ease-in-out;
}
.action.active span
{
transform: rotate(720deg);
}
.action ul
{
position: absolute;
bottom: 55px;
right: 10px;
background: #fff;
min-width: 150px;
padding: 20px;
border-radius: 20px;
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.action.active ul
{
bottom: 65px;
opacity: 1;
visibility: visible;
transition: 0.3s;
}
.action.active ul li
{
list.style: none;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 0;
transition: 0.3s;
}
.action ul li:hover
{
font-weight: 600;

}
.action ul li:not(:last-child)
{
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.action ul li img
{
margin-right: 10px;
opacity: 0.2;
tarnsform: scale(0.8em);
}
.action ul li:hover img
{
opacity: 0.8;
}

.msg
{
position: fixed;
bottom: 50px;
right: 105px;
width: 200px;
height: 55px;
background: #fff;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 5px 5px rgba(0,0,0,0.1);
visibility:hidden;
}
.msg span
{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #666;
font-size: 1em;
transition: 0.3s ease-in-out;
}

/* STYLE DO FRAME DO BLIP CHAT */
#blip-chat-open-iframe {
display: none !important;
}

#blip-chat-container {
height: 100% !important;
bottom: 0 !important;
right: 0 !important;
}

#blip-chat-iframe {
position: absolute !important;
top: 0 !important;
right: -400px !important;
bottom: 0 !important;
height: 100% !important;
max-height: 100% !important;
transform: none !important;
opacity: 1 !important;
box-shadow: none !important;
transition: 0.5s !important;
}

#blip-chat-iframe.blip-chat-iframe-opened {
right: 0 !important;
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.2) !important;
}
</style>

2 - Agora, adicione o seguinte código dentro da sua tag <BODY>:


<div class="action" onclick="actionToggle();">
<span>?</span>
<ul>
<li><a href="https://wa.me/{SEU_NUMERO_WPP}" target="_blank"><img src="https://bots2u.com.br/chat-widget/icons/wpp.png" width="16" height="16">WhatsApp</a></li>
<li><a href="#" onclick="openBlipChat()"><img src="https://bots2u.com.br/chat-widget/icons/blip-full.png" width="16" height="16">Chat</a></li>
<li><a href="mailto:[email protected]"><img src="https://bots2u.com.br/chat-widget/icons/email.png" width="16" height="16">E-mail</a></li>
</ul>
</div>

<div class="msg" id="alert" onclick="actionToggle();">
<span>Precisa de Ajuda?</span>
</div>

Agora é só você personalizar como preferir!





Modelo 3


Por último e não menos importante, temos também um modelo que adiciona apenas a frase ao lado do Blip Chat Widget. Para saber mais, acesse o tópico:





Espero que gostem e à medida que eu for criando mais modelos, posto aqui.

Caso precisem de ajuda, basta comentar aqui em baixo 👋


20 comentários

Reputação 7
Crachá +1

Claro, existem alguns pontos e ajustes de melhorias para serem feitos. Caso alguém gostou e quiser contribuir, fiquem à vontade. Será excelente ter o apoio de todos.

Reputação 7

Boa @GabrielPetrone! Muito bom, com certeza vai ajudar muita gente!


Se me cabe o direito:



Eu trocaria o ícone de ! por um de ? ou msmo algo que remetesse mais a Contato. Da forma como está, chamando atenção inclusive, pelo menos pra mim, parece mais um AD do que um local para entrar em contato. Talvez se o tooltip aparecer logo de cara, automaticamente, já resolva.


Reputação 7

Booooa! Orgulho desse Blip Lover que merece todos os biscoitos do mundo: :blipcookie: :blipcookie: :blipcookie: :blipcookie: :blipcookie: :blipcookie:

Reputação 7
Crachá +1

Muito boa sugestão ! O tooltip fixo ainda não entendi como colocar, mas sei que é possível… Vou fazer esse ajuste mas claro, está ai disponível pra todos fazer qualquer alteração! Só dei um início hehe

Reputação 7

@Flavia_Cristina @Rafael_dos_Anjos acho que pode ajudar vocês :winkblip:

Reputação 7
Crachá +1

Fala pessoal, primeiramente, obrigado pelas sugestões @BrunoC <3


Pensando nisso, montei um outro modelo e já atualizei na página aí em cima.

Agora tem 2 opções disponíveis \o/



e corrigi umas coisas… pois havia escrito floatting, mas tem um T só… hehehe


Reputação 7

NUNCA ERROU!!! :partyparrot: :partyparrot:

@GabrielPetrone


Estou com problema para abrir o chat usando a segunda opção.

Será que é o iFrame?


Eu clico em Chat e ele não abre nada, nem no desktop.

Coloquei minha API key…

Reputação 7

🚨

Reputação 7
Crachá +1

Rapaz, talvez você não tenha copiado tudo ou alterou algo que afetou a programação. Acabei de copiar os códigos e deu tudo certo por aqui… Faz um novo teste caso ainda esteja com o problema, por favor.

Oi Gabriel.

Adorei a sua contribuição! Tô editando uma página Wordpress e preciso adicionar apenas o balãozinho de texto no modelo pre definido do Blip Chat. Você tem alguma dica pra isso??

Reputação 7
Crachá +1

Muito obrigadooooo @Sarah_Almeida .

Veja, coincidentemente hoje eu me deparei com uma necessidade onde conheci o Chips → How To Create Contact Chips .

Arrisco dizer que ele pode ser algo promissor para criar apenas o balãozinho de texto de forma fácil e rápida. Ainda não implementei, mas fica essa dica.


Qualquer dúvida, corre aqui!

Reputação 7
Crachá +1

Fala pessoal, esses últimos surgiram muitos pedidos de como adicionar apenas o balão com uma mensagem, ao lado do ícone do Blip Chat, portanto preparei esse tutorial aqui:




Espero que gostem 😉 :happyblip:

Super obrigada, Gabriel!!!

@GabrielPetrone tem algo pronto para abrir o bubble automaticamente depois de um tempo?


Tipo depois de 10 segundos na página o chat abre e chama para a conversa

Reputação 7
Crachá +1

Fala meu querido @Marcel-Anselmo .

Para isso é só você usar um setTimeout no seu script, apontando pra abertura do Blip Chat.

Não testei aqui mas pro MODELO #2 seria basicamente adicionar isso:


	setTimeout("openBlipChat()",10000);

Dentro daquela tag:


<script type="text/javascript">
<vários scripts aqui>
</script>

Veja se dá certo, qualquer coisa nos avise.


Abraços.

@GabrielPetrone , vou tentar aqui, vlwww, vc é o cara 🙂

deu certo @GabrielPetrone, so estou com um problema, quando abre no site do cliente o X para fechar o blip chat não aparece, consegue me ajudar?

wwwww

Reputação 7
Crachá +1

Qual modelo você implementou @Marcel-Anselmo ?

Isso é uma questão de CSS e já me deparei também, mas precisamos debugar juntos pra achar o que precisa ser alterado.

Nos modelos acima eu acabei de validar e o X está aparecendo, rs, então me informe o modelo e se possível (pode ser no pv), me mande a página onde está instalado o Blip Chat?


Abraços.

oi pessoal. onde configuro a imagem ou movimento do icone do chat no ‘onmouseover’? obrigado!

Comente