Adicione uma frase ao lado do ícone do Blip Chat


Reputação 7
Crachá +1

Fala pessoal!

Recentemente rolaram novas discussões sobre como colocar uma frase ao lado do ícone do Blip Chat no site, parecido com o que é utilizado no site da Take.


Sei que o post sobre o Floating Chat Widget demonstra um pouco disso, mas ele é um pouco mais aprofundado, o que acaba dificultando em alguns casos. Então bora pra um modelo mais simples?


Pois bem, como sempre é preciso adicionar alguns códigos ao seu site… :happyblip:



Dentro da tag <head>:



1. Script do Blip Chat:


1.1. Copie o script do seu Blip Chat (aquele disponível em Canais > Blip Chat > Instalação

1.2. Adicione o seguinte código no seu script, antes de .build();:


                .withEventHandler(BlipChat.LOAD_EVENT, function () {
document.getElementById('bubble-msg').click() })

Seu script ficará parecido com esse:


<script>
(function () {
window.onload = function () {
new BlipChat()
.withAppKey('{KEY_DO_SEU_BOT}')
.withButton({"color":"#ce1c00","icon":"https://blipmediastore.blob.core.windows.net/public-medias/Media_088235db-36fb-450b-a7ba-0cd44444a850"})
.withCustomCommonUrl('https://chat.blip.ai/')
.withEventHandler(BlipChat.LOAD_EVENT, function () {
document.getElementById('bubble-msg').click() })
.build();

}
})();
</script>

Mais detalhes sobre o que faz o código withEventHandler, acesse a Docs do Blip Chat Widget no GitHub.



2. Adicionando o CSS


2.1. Adicione o seguinte Style-CSS:


<style type="text/css">
.message-bubble{font-family:Nunito Sans,sans-serif;display:flex;flex-flow:row wrap;position:fixed;background:#fff;color:#909ba9;right:calc(100px + 2%);max-width:240px;bottom:60px;padding:1em 1em 12px 12px;border-radius:13px 13px 2px 13px;box-shadow:1px -1px 9px rgba(0,0,0,.75);z-index:980;animation:toggle-bubble .5s ease-out;margin-left:15px;line-height:1.5em;transform-origin:100% 100%}.message-bubble::after{bottom:0;content:'';position:absolute;left:calc(100% - 15px);width:0;border:14px solid transparent;border-bottom-color:#fff;border-radius:4.5px}.message-bubble::before{bottom:0;content:'';position:absolute;left:calc(100% - 12px);width:0;border:15px solid transparent;border-bottom-color:rgba(0,0,0,.25);filter:blur(2px);border-radius:4.5px}.message-bubble p{margin:0}.message-bubble p+p{margin-block:.4em 0}.message-bubble .close-button{position:absolute;right:5px;top:5px;width:.7em;height:.7em;opacity:.3}.message-bubble .close-button:hover{opacity:1;cursor:pointer}.message-bubble .close-button:before,.message-bubble .close-button:after{position:absolute;content:' ';height:.7999999999999999em;width:2px;background-color:#333}.message-bubble .close-button:before{transform:rotate(45deg)}.message-bubble .close-button:after{transform:rotate(-45deg)}@-moz-keyframes toggle-bubble{from{transform:scale(.1)}to{transform:scale(1)}}@-webkit-keyframes toggle-bubble{from{transform:scale(.1)}to{transform:scale(1)}}@-o-keyframes toggle-bubble{from{transform:scale(.1)}to{transform:scale(1)}}@keyframes toggle-bubble{from{transform:scale(.1)}to{transform:scale(1)}}
</style>




Dentro da tag <body> :



3. Código HTML do Balão de Mensagem


3.1. Adicione o código abaixo na sua página HTML:


<div class="message-bubble">
<p>Qual é a sua dúvida?</p>
<p>Vamos conversar sobre isso!</p>
<span class="close-button" id="bubble-msg" onclick="this.parentElement.style.display='none'"></span>
</div>

3.2. Edite a mensagem que está dentro das tags <p>.

Muita atenção, não faça nenhuma alteração na tag <span>.




Et voilà !

:happyblip:


Quer visualizá-lo em ação? E claro, poder visualizar o código fonte da página?

http://go.petr.one/p655d


Espero que ajude e caso tenham dúvidas, é só perguntar.


Abraços.


12 comentários


Ícone do fórum, obrigado!

Apliquei no nosso site só notei uma coisa.

Quando você abri o BliP Chat, ele não fecha o balão automaticamente como no site da Take.

Reputação 7
Crachá +1

Hmm, de fato o close-button eu tive que improvisar aqui pois não achei como o pessoal programou o close no site da Take. Mas agora você me deu uma luz, vou dar uma fuçada aqui pra ver se localizo essa ação e retorno com mais detalhes.

Reputação 7
Crachá +1

Fala @Bruno_Gabriel !

O @wilkor.almeida me deu uma mão aqui e solucionou a questão de fechar o balão ao abrir o Chat. \o/


Porém é preciso fazer alguns ajustes no código. Vou colocar os detalhes que foram alterados aqui, mas também vou atualizar no tópico principal. Vamos lá:



1. Script do Blip Chat:


Agora, você precisará alterar o script do seu Chat Widget, aquele em que você copia diretamente da tela de Configurações do Canal no Blip. Mas é coisa simples, veja este exemplo:


O script do meu Widget é:


<script>
(function () {
window.onload = function () {
new BlipChat()
.withAppKey('{KEY_DO_SEU_BOT}')
.withButton({"color":"#ce1c00","icon":"https://blipmediastore.blob.core.windows.net/public-medias/Media_088235db-36fb-450b-a7ba-0cd44444a850"})
.withCustomCommonUrl('https://chat.blip.ai/')
.build();

}
})();
</script>

Na linha antes de .build();, vou adicionar o seguinte código:


                .withEventHandler(BlipChat.LOAD_EVENT, function () {
document.getElementById('bubble-msg').click() })


Por fim, meu script ficará da seguinte maneira:


<script>
(function () {
window.onload = function () {
new BlipChat()
.withAppKey('{KEY_DO_SEU_BOT}')
.withButton({"color":"#ce1c00","icon":"https://blipmediastore.blob.core.windows.net/public-medias/Media_088235db-36fb-450b-a7ba-0cd44444a850"})
.withCustomCommonUrl('https://chat.blip.ai/')
.withEventHandler(BlipChat.LOAD_EVENT, function () {
document.getElementById('bubble-msg').click() })
.build();

}
})();
</script>


2. Ajustando o balão de mensagem:


Por fim, você precisa adicionar o código id="bubble-msg" dentro de span no código HTML, ficando da seguinte forma:


<span class="close-button" id="bubble-msg" onclick="this.parentElement.style.display='none'"></span>

Pronto. Com isso o balão de mensagem irá sumir após abrir o Chat.


Novamente, valeu demais Mestre @wilkor.almeida !


🚀

Reputação 7
Crachá +1

Estamos juntos @GabrielPetrone !!! bora pra cima!!

Reputação 6
Crachá

Tenho uma dúvida de iniciante, eu coloquei no googlesites meu blipchat. E está dando “Domínio não autorizado” ele só abre uma caixa para incorporar meu código, segue imagens,


image


Como sei onde está minha estrutura HTML para ir customizando ou no caso do googlesites é limitado?


Valeuzão 🙂

Reputação 7

@GabrielPetrone chega maisss!

Reputação 6
Crachá

Alguém pode ajudar com isso??

Reputação 7
Crachá +1

Oi @CamilaEspecio , desculpe a demora para responder.


Nas configurações do BLiP Chat, há o campo para informar os domínios onde você irá disponibilizar seu bot. Insira o seu site e veja se o problema se resolve.



Aguardo novidades.

Boa tarde, obrigada por compartilherem ;D


Mas preciso de uma ajuda, o meu balão ficou


alguém pode ajudar em como diminuir?

Reputação 4

Veja se ajuda @Tatiane_Monteiro https://help.blip.ai/hc/pt-br/articles/4474390186391

Obrigada, Eduardo ;D

Comente