How to customize Blip Chat Widget using CSS

At first, it may seem that when adding the Blip Chat Widget to your page, it didn't quite fit with the surrounding style. Maybe you use a more aggressive theme, or you want to put your chatbot in a different and more attractive way on your website.

Don’t worry, as the widget comes from the factory, with tools that can easily help you adapt it to the style of your page. And if you still feel that something is missing, here are some tips on how you can give that up and draw more attention to the chat.

Floating button vs Embedded chat

It may happen that the floating circle does not fit much with the style of your website or, it may be, that you simply want to place the chat inside any element on your page.

<!-- some element of your site -->

<div id="chat">

</div>




<script>

    new BlipChat()

        .withTarget("chat")

        .build();

</script>

The Blip Chat widget's withTarget method allows you to place your chat wherever you want on the website. Just use the "id" of an HTML element on your page. From there, the extension will load the chat in the element you specify and you will be able to have more freedom to handle the chat on your page.

Before

After

Customizing within the iFrame

For security reasons, provided by the browser itself, your chat is embedded within an iframe element. The issue is the limitation that comes with this security.

The browser prevents any attempt to send style rules to customize the widget's internal appearance. Therefore, it is not possible to modify the chat's CSS. Or is it?

<script>

    new BlipChat()

        .withTarget("chat")

        .withCustomStyle("div { padding: 0; }")

        .build();

</script>

The withCustomStyle method allows you to send to the Widget, a string containing your custom CSS that will be applied internally in the chat.

If you want to keep this CSS in an external file, to keep linting, organize and make your life easier, you can use a request to upload (almost like adding a link to your website):

<script>

    fetch("localização do seu .css")

    .then(r => r.text()) // recupera o conteúdo como texto

    .then(styleSheet => { // "styleSheet" está preenchida com o conteúdo do arquivo

        new BlipChat()

                .withTarget("chat")

                .withCustomStyle(styleSheet)

                .build();

    });          

</script>

That way, you will be able to fully customize your chat.

Before

After

Calling attention

Even knowing the shortcuts to make the chat more attractive, you can still judge that the way the page visitor views the chat window is still not satisfactory.

A good option to improve the presence of your bot is to add, for example, a balloon with a message inviting the user.

Before

After

You can also change the way the chat opens: 

All done using CSS, external to the widget, controlling what already exists around the iframe.

The code used in all examples can be found in this GitHub repository.