Guía práctica: Cómo añadir un temporizador de cuenta atrás a los mensajes

Hoy te mostramos en un sencillo tutorial cómo añadir un temporizador de cuenta atrás en tus e-mail. Utilizaremos el bloque HTML del editor de arrastrar y soltar de MailUp y una herramienta gratuita disponible online que permite generar el código HTML para el temporizador.

El tutorial está disponible en forma de vídeo (en inglés porque se hizo en las oficinas de MailUp de San Francisco); también puedes seguir la siguiente presentación paso a paso.

Hoy utilizaremos dos herramientas para construir nuestro temporizador dinámico:

1. El editor de arrastrar y soltar BEE de MailUp. Su bloque de contenido HTML (el sexto recuadro abajo) permite añadir cadenas personalizadas de código HTML, exactamente como la que necesitaremos para el temporizador.
2. Una herramienta para generar código HTML debajo del temporizador. Es conveniente asegurarse de elegir una herramienta que genere un GIF animado, para así saber exactamente cómo se verá en el e-mail. Nosotros hemos elegido Sendtric, pero hay muchas otras a disposición en la web (más detalles al final del texto).

Probaremos a reproducir el temporizador de cuenta atrás que aparece en el mensaje que anuncia el final de las rebajas de temporada de J. Crew Factory.

Una vez dentro del editor BEE, hay que abrir una plantilla simple, de una sola columna, para poder empezar a construir la cabecera. Se comienza añadiendo el bloque de imagen para el logotipo…

Se pasa entonces al menú de navegación…

Y al bloque de HTML para el temporizador…

Añadimos otro bloque de texto bajo el temporizador y estamos listos para empezar a personalizar el mensaje. A nivel de contenido, haremos lo siguiente:

• Cargar el logotipo de J.Crew Factory
• Actualizar el texto

Por otro lado, a  nivel de formato, es necesario:

• Actualizar el color y el estilo de la fuente (hemos elegido Tahoma cuerpo 14, negro sobre blanco y blanco sobre fondo negro)
• Modificar a color negro el HTML correspondiente al color de fondo de la parte inferior de la cabecera.
• Introducir líneas divisorias por encima y por debajo del menú de navegación.

¡Ya tenemos una buena parte! Veamos cómo está quedando el mensaje:

Crear un temporizador con sendtric.com es fácil y rápido. Se comienza por introducir la fecha final de la cuenta atrás, que con esta herramienta puede establecerse hasta a un mes de distancia.

El segundo paso es personalizar los colores. El fondo sigue siendo negro, pero los números son de color verde para coordinarse con el resto del mensaje de J.Crew. También podríamos introducir con HTML el código de color exacto para estar completamente en línea con la identidad corporativa de la marca.

Para crear el temporizador debemos añadir también una dirección de e-mail (de modo que J.Crew pueda configurar sus campañas de e-mail). También se recomienda marcar la casilla para encapsular el temporizador en una tabla centrada.

Después de hacer clic en Generar, Sendtric nos lleva a una nueva ventana que contiene una vista previa del temporizador y un bloque de código HTML.

¡El temporizador está listo para usar!

Es el momento de copiar el código generado por Sendtric:

Ya de nuevo en el editor BEE, basta hacer clic en el bloque HTML y pegar código dentro del campo Propiedades de Contenido, a la derecha. De esa manera, el temporizador se activa dentro del mensaje:

En el modo Vista Previa, podemos comprobar que la anchura del temporizador se adapte correctamente a la visualización en pantallas más pequeñas. ¡Funciona!

Hay varias plataformas online que permiten crear temporizadores para añadir en los e-mail de forma fácil y rápida. Por ejemplo:

• FreshRelevance
• PowerInbox
• MotionMail

¿Conoces alguno más? Comparte tu experiencia en los comentarios más abajo.