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…
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à !
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.