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!

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 aCódigo do País]+pddd]+ 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 👋

Página 1 / 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.

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.

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

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

@Flavia_Cristina @Rafael_dos_Anjos acho que pode ajudar vocês

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

NUNCA ERROU!!!

@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…

🚨

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??

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!

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 😉

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

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

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!

MODELO #1:

MODELO #2:

Modelo 3

Comente

Não encontrou o que procurava?

Participe da comunidade e seja um Blip Member!

Fazer o login com rede social

Bem-vindo, Blip Member!

Fazer o login com rede social

A analisar o ficheiro em busca de vírus

Este ficheiro não pode ser descarregado