[Resolvido] BlipChat Widget - Custom Style

Eu tentei usar o withCustomStyle para customizar o botão

No caso, preciso aumentar o posicionamento do botão na página em alguns pixels

(function () {
    window.onload = function () {
        var customStyle = `#blip-chat-open-iframe { bottom: 75px; }`;
          
        var blipClient = new BlipChat()
        .withAppKey('KEY')
        .withButton({"color":"#3a183d"})
        .withoutHistory()
        .withCustomStyle(customStyle)
        ;
        blipClient.build();
    };
})();

O resultado que se espera:

Referência:
BLiPChat Widget - Example 3 - CustomStyle

@AndyDaSilva52

Você conseguiu resolver seu problema? Nenhuma customização está funcionando ou apenas esta?

@Bruno

Implementei outras customizações com sucesso, exemplo da que é colocada na própria documentação
Doc BLiPChat Widget - Example 3 - Custom Style, mas essa em questão não foi possível.

Acredito que a questão seja o escopo que só ajusta estilo dentro do iframe

Tive uma resposta do time de CustomerSupport Business(csbusiness@take.net) que recomendou usar CSS direto na página, por conta disso voltei a usar o GTM (Google Tag Manager) já que ele não aceita a sintaxe:

`#blip-chat-open-iframe { bottom: 75px; }`

Assim após o ajuste no GTM funcionou e ficou assim a implementação:

<script 
    src="https://unpkg.com/blip-chat-widget" 
    type="text/javascript"></script>
<script type="text/javascript">
    /*jshint esversion: 6 */
    (function () {
        //window.onload = function () {
        var blipClient = new BlipChat()
            .withAppKey('KEY=')
            .withButton({ "color": "#3a183d" })
            ;
        blipClient.build();
        //};
    })();
</script>
<style>
    #blip-chat-open-iframe {
        bottom: 75px !important;
    }
</style>
2 Curtidas