Índice:
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. 😃