Reposicionar botão do blip chat no site

Pessoal, gostaria de saber se para reposicionar o botão do BlipChat no site, por exemplo, retirá-lo do canto inferior direito e colocá-lo no canto inferior esquerdo, só é possível através de css ou se da para fazer de outra forma.

2 curtidas

Oiê @Lucas_Mota_Rego_Mont!

Na documentação oficial existe um exemplo de como criar um custom style para o BLIP Chat, dá uma olhada aqui:

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

          var customStyle = `#message-input {
              box-sizing: border-box;
              border: 1px solid #0CC8CC;
              border-radius: 6px;
              background: #252B39;
            }
            #message-input textarea {
              background: #252B39;
              font-size: 12px;
              color: white;
            }`

          var blipClient = new BlipChat()
          .withAppKey('YOUR-APP-KEY')
          .withCustomStyle(customStyle);
          blipClient.build();
        }
    })();
</script>

Eu ainda não fiz o teste, mas acredito que se alterar as propriedades talvez funcione.

1 curtida

Ei @Lucas_Mota_Rego_Mont, tudo bem?

Deu certinho usando o script da @fadoaglauss?

Então, eu alterei algumas propriedades, mas não deu certo.
Pelo que eu vi parece que tem que usar css da página mesmo para poder fazer essa mudança.
E ai nem apliquei mais alguma solução, pois o pessoal desistiu de fazer isso.
Mas caso alguém, saiba uma forma de reposicionar sem usar css, eu agradeceria se compartilhasse aqui.

1 curtida

@Lucas_Mota_Rego_Mont o que a @fadoaglauss postou aqui foi só a ponta do iceberg :ice_cube:

O style você pode pegar aqui, como ela orientou → blip-chat-widget/main.scss at master · takenet/blip-chat-widget · GitHub
Daí é só localizar os ids corretos que você precisa alterar…mas pra te adiantar, pra mudar a posição basta ajustar em #blip-chat-open-iframe

Qualquer outra dúvida, corre aqui 🚶‍♂️

1 curtida

Complementando, tem um tópico aqui eu eu montei outros exemplos que podem ser usados para o blip chat widget, se liga → Floating Chat Widget - Adicione o Blip Chat e outros canais no seu site

1 curtida

Show, vou dar uma olhada aqui.
Obrigado!!

1 curtida