Respondido

CSS para o Chat Widget

M

Sei que é possível passar CSS para o Chat Widget, mas não sei qual deve ser o conteúdo desse CSS para controlar cada característica do chat.


Há uma lista exaustiva do que pode ser feito?


Em particular quero escolher cores, incluindo:


a cor do fundo geral;

a cor do fundo das letras das falas do bot;

a cor do fundo das letras das falas do usuário;

a cor das letras das falas do usuário;

a cor das letras das falas do bot.


Não sei quais são as classes desses elementos para que eu possa me referir a eles no CSS.

icon

Melhor resposta por GabrielPetrone 4 October 2021, 15:06

Veja o original

7 comentários

GabrielPetrone
Classificação
Reputação 7
Crachá +1

Marcelo, se eu não estiver enganado, estes são todos os estilos do Chat Widget:


@media screen and (max-width: 480px), screen and (max-height: 420px) {

  .chatParent {

    overflow-y: hidden !important;

    position: static !important;

    height: 0px;

    width: 0px; } }



#blip-chat-notifications {

  background-color: #F76556;

  color: #fff;

  border-radius: 50%;

  line-height: 21px;

  font-size: 12px;

  width: 21px;

  height: 21px;

  position: fixed;

  text-align: center;

  bottom: 65px;

  right: 30px;

  opacity: 0; }



#blip-chat-container {

  position: fixed;

  bottom: 40px;

  right: 80px;

  z-index: 1000000; }

  @media screen and (max-width: 480px), screen and (max-height: 420px) {

    #blip-chat-container {

      bottom: 0px;

      right: 0px;

      position: absolute;

      height: 100%; } }

  #blip-chat-container #blip-chat-iframe {

    position: fixed;

    bottom: 90px;

    right: 38px;

    opacity: 0;

    transition: opacity 500ms, transform 500ms, visibility 500ms, height 0s 500ms;

    transform: translateY(10%);

    z-index: 1;

    height: 0;

    width: 400px;

    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.2);

    border-radius: 5px;

    background: #faf9f8; }

    @media screen and (max-width: 480px), screen and (max-height: 420px) {

      #blip-chat-container #blip-chat-iframe {

        right: 0px;

        bottom: 0px !important;

        max-height: 100vh !important;

        width: 100vw;

        position: absolute;

        box-shadow: none; } }

    #blip-chat-container #blip-chat-iframe.blip-chat-iframe-opened {

      opacity: 1;

      transform: translateY(0);

      visibility: visible;

      transition: opacity 500ms 10ms, transform 500ms 10ms, visibility 500ms 10ms, height 0ms;

      height: 610px; }

      @media screen and (max-width: 480px), screen and (max-height: 420px) {

        #blip-chat-container #blip-chat-iframe.blip-chat-iframe-opened {

          height: 100%; } }

  #blip-chat-container #blip-chat-open-iframe {

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 2;

    position: fixed;

    width: 4%;

    max-width: 60px;

    min-width: 48px;

    max-height: 60px;

    min-height: 48px;

    right: 35px;

    bottom: 35px;

    transition: transform 200ms, opacity 500ms, visibility 500ms;

    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1), 0 2px 32px rgba(0, 0, 0, 0.1);

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center; }

    @media screen and (max-width: 480px), screen and (max-height: 420px) {

      #blip-chat-container #blip-chat-open-iframe.opened {

        visibility: hidden !important;

        opacity: 0 !important; } }

    #blip-chat-container #blip-chat-open-iframe:active {

      transform: scale(0.9); }

    #blip-chat-container #blip-chat-open-iframe img, #blip-chat-container #blip-chat-open-iframe svg {

      width: 100%;

      height: 100%;

      border-radius: 50%; }



#blip-chat-open-iframe {

  display: none; }



#blip-chat-iframe {

  width: 100%;

  height: 100%; }

🙂 este fonte eu tirei do site blip.ai :blippanther:


De qualquer forma, segue também um artigo que dá mais detalhes:

https://help.blip.ai/hc/pt-br/articles/360059367253-Como-customizar-o-BLiP-Chat-Widget-através-de-CSS


E também um tópico que passei alguns layouts pra quem quiser:

🖖 Gabriel Petrone.·.
M

Gabriel,


Grato pela resposta.


Descobri que é possível escolher pelo menos a cor dos balões enviados pelo usuário usando a interface gráfica mesmo. Depois de selecionar o bot, fui em “canais” escolhi “blip chat” e depois “configurações”.


Gostaria de fazer mais escolhas, então li sua resposta. Porém, não consegui identificar, no CSS que você mandou, IDs ou classes de elementos específicos do widget para que eu possa escolher suas cores.


O artigo que você passou, eu já tinha lido, mas ele não fala quase nada sobre o conteúdo do CSS. Só ensina como aplicar algum CSS no widget.


Eu tentei decobrir os IDs dos elementos usando as ferramentas de desenvolvedor do Firefox. Não queria fazer isso porque não teria a garantia de que versões novas do widget não quebrariam meu código.


Quando olhei o contéudo do iframe, vi que tem um monte de estilos definidos inline, inclusive com escolha de cores.


Por exemplo, veja o elmento do app como um todo:



No results :(

ou o elemento do botão de envio:



Essas escolhas inline tende a predominar sobre o css. Mesmo assim, eu tentei mudar a cor de fundo do app todo, sem efeito.


No caso do botão, a imagem, também parece ter sido fixada, mas talvez não seja isso.


Existe uma instrução oficial do blip dizendo como preencher o css para realmente controlar a aparência do widget?




GabrielPetrone
Classificação
Reputação 7
Crachá +1

Realmente, esqueci de citar o caminho pra ajustar via GUI. Mas que bom que você achou.


Sugiro que você tente seguindo o caminho através do modo dev do navegador e monte um CSS externo. Para priorizar a sua classe, basta adicionar o comando !important no final de cada linha de estilo. Note que está dessa forma em algumas partes do código que eu passei.


Infelizmente não tem nada oficial :sherlockblip:

🖖 Gabriel Petrone.·.
M

Obrigado.


Por ora, vou usar apenas os recursos disponíveis na GUI e esperar por alguma coisa oficial.

M

Hoje, usei CSS para mudar a cor da letra do texto escrito pelo bot. Não achei uma forma de fazer isso pela interface gráfica.


Descobri as classes CSS as quais precisei me referir inspecionando os elementos dentro do iframe do widget do Blip usando as ferramentas de desenvolvedor do Chome.


Informo aqui a solução, pois pode ser útil para alguém:


var customStyle = .bubble.left { color: black !important; } ;

new BlipChat()

.withAppKey(appKey)

.withCustomStyle(customStyle)

.build();


Se fosse para mudar a cor do texto escrito pelo usuário teria que me referir a “.bubble.right”.


Claro que, como não peguei essa instrução em um documento oficial, sempre podem mudar alguma coisa e fazer com que o método pare de funcionar.


Espero que isso não ocorra e que venha uma documentação que facilite a configuração completa da aparência do widget, incluindo a imagem que aparece do lado de cada frase do bot. Ela aparece hardcoded em base64 no html. Alguém sabe como alterar?

GabrielPetrone
Classificação
Reputação 7
Crachá +1

Fala @marcelo_luis_tabian realmente é dessa forma mesmo que customizamos o chat.



Essa é a imagem do seu chatbot na plataforma, para alterá-la basta você alterar no seu chatbot mesmo 😉

image


Só fique atento pois você deve alterar no chatbot que o seu canal está conectado (por exemplo, num Roteador quando utiliza a estrutura de Routers…)

🖖 Gabriel Petrone.·.
M

Obrigado.

Funcionou.

Comente


Termos de Uso e PrivacidadeDefinições de cookies