Chat Widget full screen igual ao Chat URL

Dúvidas e perguntas
#1

Boa tarde,

Estamos desenvolvendo um bot que será inicialmente utilizado como webview em nosso app, precisamos que o widget sempre seja com full screen igual ao que utilizamos para testes no chat url disponibilizado.

Fizemos algumas customizações no CSS mas ainda não chegamos a deixá-lo full screen em todos os tamanhos de telas.

Gostaria de saber se existe algum atributo específico para que full screen seja setado, estamos utilizando o toogleChat que já está funcionando perfeitamente para nossa necessidade, porque o usuário não precisa clicar no botão para abrir o chat.

Obrigado

#2

Fala Carlos!!

Tenta passar esse CSS:

<style>    
/* STYLE DO FRAME DO B
LIP CHAT */
    #blip-chat-open-iframe {
    	display: none !important;
    }

    #blip-chat-container {
    	height: 100% !important;
    	bottom: 0 !important;
    	right: 0 !important;
    }

    #blip-chat-iframe {
    	position: absolute !important;
    	top: 0 !important;
    	right: -400px !important;
    	bottom: 0 !important;
    	height: 100% !important;
    	max-height: 100% !important;
    	transform: none !important;
    	opacity: 1 !important;
    	box-shadow: none !important;
    	transition: 0.5s !important;
    }

    #blip-chat-iframe.blip-chat-iframe-opened {
    	right: 0 !important;
    	box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.2) !important;
    }
    </style>

Fonte: 💡 Floating Chat Widget - Adicione o Blip Chat e outros canais no seu site

#3

Gabriel muito obrigado, fiz apenas um pequeno ajuste no CSS do #blip-chat-iframe retirando o position: absolute !important; e adicionando o width: 100% !important; e funcionou perfeitamente.

Segue código completo:

<style>    
/* STYLE DO FRAME DO B
LIP CHAT */
    #blip-chat-open-iframe {
      display: none !important;
    }

    #blip-chat-container {
      height: 100% !important;
      bottom: 0 !important;
      right: 0 !important;
    }

    #blip-chat-iframe {
      top: 0 !important;
      right: -400px !important;
      bottom: 0 !important;
      height: 100% !important;
      width: 100% !important;
      max-height: 100% !important;
      transform: none !important;
      opacity: 1 !important;
      box-shadow: none !important;
      transition: 0.5s !important;
    }

    #blip-chat-iframe.blip-chat-iframe-opened {
      right: 0 !important;
      box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.2) !important;
    }
</style>

Vlw

2 curtidas