Adicione uma frase ao lado do ícone do Blip Chat

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.

5 Curtidas

Ícone do fórum, obrigado!

3 Curtidas

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.

2 Curtidas

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.

3 Curtidas

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 !

:rocket:

2 Curtidas

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

1 Curtida