Chat em branco no Wordpress (Mobile)

Oi pessoal!

O widget do chat é totaltamente funcional para o desktop, entretanto, para mobile ele fica totalmente em branco.

Já vi que tem algumas pessoas que relataram isso aqui no fórum, mas nenhuma solução proposta funcionou para mim. Alterei CSS e nada.

Por enquanto deixar o chat abrir pela URL direta. (Blank Page)

Alguma ideia de como resolver?

@Bruno @GabrielPetrone @Pedro_Lucas

1 Curtida

Bruno, que alteração tu fez no CSS ?

Tentei corrigir adicionando isso no style.css:

/* Blip */
#blip-chat-container #blip-chat-iframe{
    position:initial!important;
}

faz essa alteração de fixed para “position: relative”
image

e me diz se vai

2 Curtidas

Vou testar de noite e te aviso ok?

2 Curtidas

Vai dar certo confia B)

2 Curtidas

@Pedro_Lucas, não funcionou. Só coloquei o position:fixed, tem algo há mais que preciso colocar?

2 Curtidas

tem que ser relative man

2 Curtidas

Estou ficando maluco :smiley:

Mas ainda sim não foi.

image

2 Curtidas

eu sou péssimo
em css
@bruno ajuda o colega pufavo

1 Curtida

@Bruno_Gabriel se quiser e puder, compartilha comigo a página no privado pra eu poder dar uma olhada. Acho que vai ficar mais fácil. Talvez seja o z-index.

2 Curtidas

@Bruno, é o https://santamaria.com.br.

Se eu criar uma página separada funciona… Dá uma olhada, por favor.

2 Curtidas

Pior que também estou com esse problema e já tentei de tudo, mas nada de resolver.

Access to script at ‘https://js-cdn.dynatrace.com/jstag/16898c892dc/bf88991hgd/51a57ded5ceb58bf_complete.js’ from origin ‘https://chat.blip.ai’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
chat.blip.ai/:1 GET https://js-cdn.dynatrace.com/jstag/16898c892dc/bf88991hgd/51a57ded5ceb58bf_complete.js net::ERR_FAILED
app.js?v=37ef6388555533141b48:1 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.
e.get @ app.js?v=37ef6388555533141b48:1
e.isTenantWebsocketEnabled @ app.js?v=37ef6388555533141b48:1
e.getTenantFromHost @ app.js?v=37ef6388555533141b48:1
x35b @ app.js?v=37ef6388555533141b48:1
o @ manifest.js?v=ac8d7dd8fcef9ea68b36:1
0 @ app.js?v=37ef6388555533141b48:1
o @ manifest.js?v=ac8d7dd8fcef9ea68b36:1
window.webpackJsonp @ manifest.js?v=ac8d7dd8fcef9ea68b36:1
(anonymous) @ app.js?v=37ef6388555533141b48:1
DevTools failed to load source map: Could not load content for https://unpkg.com/lime-js@3.0.1/dist/lime.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for https://chat.blip.ai/static/js/app.js.map?v=37ef6388555533141b48: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for https://chat.blip.ai/static/js/vendor.js.map?v=688ae17acbc54ab1efa1: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for https://chat.blip.ai/static/js/manifest.js.map?v=ac8d7dd8fcef9ea68b36: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for https://chat.blip.ai/static/css/app.css.map?v=7049aae2ff1a42843e2d737b4d6bc392: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
vue.min.js:6 TypeError: Cannot read property ‘startsWith’ of undefined
at a.evaluateString (app.js?v=37ef6388555533141b48:1)
at fn.run (vue.min.js:6)
at un (vue.min.js:6)
at Array. (vue.min.js:6)
at qe (vue.min.js:6)
Ue @ vue.min.js:6
Be @ vue.min.js:6
Re @ vue.min.js:6
fn.run @ vue.min.js:6
un @ vue.min.js:6
(anonymous) @ vue.min.js:6
qe @ vue.min.js:6
Promise.then (async)
ze @ vue.min.js:6
Ye @ vue.min.js:6
(anonymous) @ vue.min.js:6
fn.update @ vue.min.js:6
ce.notify @ vue.min.js:6
set @ vue.min.js:6
pn.set @ vue.min.js:6
(anonymous) @ app.js?v=37ef6388555533141b48:1
(anonymous) @ app.js?v=37ef6388555533141b48:1
(anonymous) @ app.js?v=37ef6388555533141b48:1
t @ app.js?v=37ef6388555533141b48:1
Promise.then (async)
r @ app.js?v=37ef6388555533141b48:1
(anonymous) @ app.js?v=37ef6388555533141b48:1
Ma @ app.js?v=37ef6388555533141b48:1
a.setupThread @ app.js?v=37ef6388555533141b48:1
(anonymous) @ app.js?v=37ef6388555533141b48:1
(anonymous) @ app.js?v=37ef6388555533141b48:1
(anonymous) @ app.js?v=37ef6388555533141b48:1
t @ app.js?v=37ef6388555533141b48:1
Promise.then (async)
r @ app.js?v=37ef6388555533141b48:1
(anonymous) @ app.js?v=37ef6388555533141b48:1
Ma @ app.js?v=37ef6388555533141b48:1
a.onReceivePostMessage @ app.js?v=37ef6388555533141b48:1
(anonymous) @ app.js?v=37ef6388555533141b48:1

O código apresenta várias falhas elementos

Eu vi que você tirou o chat de lá.

E encontrei isso aqui, oh:

2 Curtidas

Sim, eu tirei ontem.

Vish, deixa eu tirar essa tarja aqui, eu coloquei para tentar resolver… kkk

1 Curtida

Se eu criar uma nova página HTML funciona de boas, só no index que não.

1 Curtida

Tentei fazer assim, mas mesmo erro:

<script src="https://unpkg.com/blip-chat-widget" type="text/javascript">
</script>
<script>
(function () {
  window.onload = function () {
        var customStyle = `#blip-chat-open-iframe {
        position: relative;
      }`
    var blipClient = new BlipChat()
       .withAppKey('Key')
       .withButton({"color":"#535353","icon":""})
       .withCustomStyle(customStyle);
       blipClient.build();
     }
})();
</script>
2 Curtidas

Pessoal, aqui no meu funciona perfeitamente no mobile e desktop, mas pode ser algo relacionado aos meus dispositivos… seria bom fazer testes em outros modelos, talvez…

De qualquer forma, segue o CSS que utilizo, pode ser que ajude vocês:

/* STYLE DO FRAME DO BLIP 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;
}
3 Curtidas

Não consegui resolver aqui :confused:

No index não funciona, se criar uma página nova funciona.

Erro que tem na página quando é mobile:

@GabrielPetrone, alguma ideia?