CSS para o Chat Widget

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.

2 Curtidas

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%; }

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

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

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

2 Curtidas

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?

1 Curtida

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:

Obrigado.

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

1 Curtida