Hace ya unas semanas en HoyGeek agregamos un chat (formulario) para que puedan enviarnos sus dudas, peticiones de tutoriales o algún comentario sobre el blog. Y curiosamente uno de los mensajes mas recibidos fue el de hacer un tutorial sobre agregar un chat en Blogger.
Como siempre hoy te compartimos el tutorial paso a paso de cómo agregar un chat igual al de HoyGeek en Blogger.
Antes de Empezar
Lo primero que debemos de hacer es comprobar que nuestro blog en blogger tenga integrado la líbreria de jQuery. Esta librería es importante para el funcionamiento de nuestro chat.
Para poder comprobar si nuestro blog tiene jQuery podemos revisar este tutorial Cómo saber si mi blog tiene jQuery.
Además para este tutorial vamos a utilizar los iconos de FontAwesome, en caso que no tengas esta librería en tu blogger puedes revisar esta guía de como instalar FontAwesome en Blogger.
Instalar CHAT en Blogger
Una vez comprobado que nuestro blog tiene jQuery integrado, vamos a agregar el script de funcionalidades para nuestro chat. Para ello vamos a Tema > Editar HTML y luego buscamos la etiqueta de cierre de body </body> y encima de ella pegamos lo siguiente:
<script>
//<![CDATA[
$(document).ready(function($) {
$('.hg-chat__msg').delay(1500).fadeIn(1000).delay(5000).fadeOut(1000);
$('.hg-chat').click(function() {
$('#ContactForm1').css('transform', 'scale(1)');
});
$('.hg-chat__close').click(function() {
$('#ContactForm1').css('transform', 'scale(0)');
});
});
//]]>
</script>
Vamos a explicar un poco que es lo que hace este script.
La primera línea es la animación que tendrá nuestro mensaje. Usamos el método delay(), fadeIn() y fadeOut() de jQuery:
| Método | Función |
|---|---|
| delay(duración) | Lo usamos para retrasar el mostrado de nuestro mensaje después de la carga completa de nuestro blog. |
| fadeIn(duración) | Método para hacer apareer nuestro mensaje. |
| fadeOut(duración) | Método para hacer desaparecer nuestro mensaje. |
En los tres métodos indicamos la duración de la animación en milisegundos.
Luego tenemos dos eventos de click, la primera es para cuando se quiera abrir el chat la cual agrega la propiedad transform de css con el valor de scale(1).
El segundo evento agrega la misma propiedad pero con el valor scale(0), esto para que simule el cierre de la ventana del chat.
Agregar botón para Chat en Blogger
El siguiente paso es agregar nuestro botón para que se active/abra el chat en nuestro Blog. Para este ejemplo vamos a ubicar nuestro botón en la parte inferior derecha, que es la ubicación más común para este tipo de botones.
Entonces nos vamos a Tema > Editar HTML y buscamos la etiqueta de cierre de body </body> y justo encima de ella pegamos el siguiente código:
<div class="hg-chat">
<div class="hg-chat__msg">
<span class="hg-chat__msg--title">🟢 Estamos en linea</span><br/>
<span class="hg-chat__msg--subtitle">¿En qué podemos ayudarte hoy?</span>
</div>
<i class="fas fa-comments"></i>
</div>
Podemos cambiar el título y subtitulo por un mensaje diferente para darle un toque más personalizado, también podemos cambiar el icono por cualquiera de los que nos ofrece FontAwesome.
Agregar Formulario de Contacto Blogger / Chat
Ya tenemos la animacion y funcionalidad para nuestro chat, ahora vamos agregar el formulario de contacto a nuestro blog.
Vamos a utilizar como base el gadget de formulario de contacto de Blogger pero con unas modificacion para que se vea mucho mejor. Vamos a nuestro Panel de Blogger > Diseño y aquí vamos a ubicar cualquier sección para gadgets, por ejemplo yo voy a usar "footer-col-4"
Vamos a copiar este nombre ya que en el siguiente paso nos sera de mucha utilidad.
Ahora ingresamos a Tema > Editar HTML y vamos a buscar el nombre que copiamos anteriormente, en este caso "footer-col-4". Debemos de encontrar algo similar a la siguiente imagen.
Es importante que encontre una línea muy similar a esta, ya que si no nuestro chat no va a funcionar.
Una vez localizado esta línea, pegamos justo debajo de esta el siguiente código:
<b:widget id='ContactForm1' locked='false' title='💬 Déjanos tus dudas' type='ContactForm' version='1'>
<b:includable id='main'>
<i aria-hidden='true' class='fa fa-times-circle hg-chat__close'></i>
<b:if cond='data:title != ""'>
<p class='widget-title'><data:title/></p>
<p class='small'>AQUI VA UN MENSAJE DESCRIPTIVO</p>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg + " *"' name='email' size='30' type='text' value=''/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg + " *"' name='email-message' rows='5'/>
<input class='contact-form-button contact-form-button-submit btn btn-primary' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'></p>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'></p>
</div>
</form>
</div>
</div>
</b:includable>
</b:widget>
Vamos a darle estilos a nuestro Chat de Blogger
Ya tenemos toda la estructura de nuestro Chat en nuestro blog, ahora vamos a darle unos estilos para que tenga una mejor apariencia y nuestras animaciones funcionen.
Vamos a dirigirnos a Tema > Editar HTML y buscamos ]]></b:skin>, ahora justo encima vamos a pegar el siguiente código:
#ContactForm1 {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
background-color: #eaf8ff;
-webkit-box-shadow: 0 2px 7px #455d6b1a;
box-shadow: 0 2px 7px #455d6b1a;
padding: 28px 30px 20px;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all ease 0.4s;
transition: all ease 0.4s;
max-width: 380px;
}
#ContactForm1 input:not([type="button"]),
#ContactForm1 textarea {
display: block;
border: solid 1px #ccc;
padding: 5px 10px;
width: 100%;
margin-bottom: 12px;
}
#ContactForm1 .hg-chat__close {
position: absolute;
top: 12px;
right: 12px;
}
.hg-chat {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.hg-chat .hg-chat__msg {
background: #fff;
padding: 10px;
font-size: 14px;
line-height: 20px;
margin-right: 12px;
-webkit-box-shadow: 1px 1px 10px -1px #aaa;
box-shadow: 1px 1px 10px -1px #aaa;
border-radius: 10px;
display: none;
}
.hg-chat i {
width: 60px;
height: 60px;
background: #4a9ef2;
color: #fff;
font-size: 26px;
text-align: center;
line-height: 60px;
border-radius: 50%;
}
Configurar y Personalizar nuestro Chat en Blogger
Ya tenemos nuestro chat de contacto funcionando perfectamente ahora nos queda personalizar un poco los mensajes para adaptarlo a nuestro blog.
Como te comente anteriormente estamos usando un gadget que nos ofrece Blogger, es decir que el título podemos configurarlo ingresando a Diseño y aquí podremos ubicar nuestro gadget. Vamos a encontrar algo muy similar a esto:
Vemos que tenemos un nuevo Gadget de tipo Formulario de contacto que es justo el que agregamos, podemos darle en editar para cambiar el título de nuestro formulario para nuestro ejemplo usamos "💬 Déjanos tus dudas" pero tu puedes agregar el que más se adapte a tu blog o necesidades.
¿Tienes alguna duda?