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();
};
})();

Referência:
BLiPChat Widget - Example 3 - CustomStyle


2 comentários

Reputação 7

@AndyDaSilva52


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

@BrunoC


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([email protected]) 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>

Comente