Cómo personalizar Blip Chat Widget a través de CSS

Índice:

1. Botón flotante vs Chat embarcado
2. Personalización dentro del iframe
3. Llamando la atención

A primera vista, puede parecer que al adicionar el Blip Chat Widget este no se integre bien a la estética de tu página. Tal vez utilices un tema más agresivo o quieras poner tu chatbot de una manera diferente y más atractiva en tu sitio web.

No te preocupes, pues el widget viene de fábrica, con herramientas que pueden ayudarte fácilmente a adaptarlo al estilo de tu página. Y si todavía sientes que falta algo, aquí hay algunos consejos sobre cómo puedes darle un upgrade para que el chat llame la atención.

Botón flotante vs Chat embarcado

Puede suceder que el círculo flotante no encaje mucho con el estilo de tu sitio web o, puede ser, que simplemente quieras colocar el chat dentro de cualquier elemento de tu página.

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

<div id="chat">

</div>




<script>

    new BlipChat()

        .withTarget("chat")

        .build();

</script>

El método withTarget del widget de Blip Chat te permite colocar tu chat donde quieras en el sitio web. Simplemente usa el "id" de un elemento HTML en tu página. A partir de ahí, la extensión cargará el chat en el elemento que especifiques y podrás tener más libertad para manejar el chat en tu página. Observa un ejemplo a continuación:

Antes

Después

Personalización dentro del iframe

Por razones de seguridad, proporcionadas por el propio navegador, tu chat está incrustado dentro de un elemento iframe. El problema es la limitación que viene con esta seguridad.

El navegador evita cualquier intento de enviar reglas de estilo para personalizar la apariencia interna del widget. Por tanto, no es posible modificar el CSS del chat. ¿O sí es posible?

<script>

    new BlipChat()

        .withTarget("chat")

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

        .build();

</script>

El método withCustomStyle te permite enviar al widget una cadena que contiene su CSS personalizado que se aplicará internamente en el chat.

Si deseas mantener este CSS en un archivo externo, para seguir almacenando, organizar y hacer tu vida más fácil, puedes usar una solicitud para cargar (casi como agregar un enlace a tu sitio web):

<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>

De esa manera, podrás personalizar completamente tu chat:

Antes

Después

Llamando la atención

Incluso conociendo los atajos para hacer el chat más atractivo, aún puedes juzgar que aún no te satisface  la forma en que el visitante de la página ve la ventana del chat.

Una buena opción para mejorar la presencia de tu bot, es agregar, por ejemplo, un globo con un mensaje invitando al usuario:

Antes

Después

O incluso cambiar la forma en que se abre el chat:

Todo es hecho usando CSS, externo al widget, controlando lo que ya existe alrededor del iframe.

El código utilizado en todos los ejemplos se puede encontrar en: https://henriquetorquato.github.io/

Para obtener más información, acceda a la discusión sobre el tema en nuestra comunidad o los videos en nuestro canal. 😃