6 Ejemplos de Contenido Interactivo en Emails

Los emails interactivos son la tendencia número 1 en diseño en el marketing de email en 2019.

Ahora que se habla mucho de Google AMP 4 Emails, casi todos olvidamos que no es la única forma de crear emails interactivos. 

En esta guía veremos cómo incrustar los elementos interactivos más populares en emails con Stripo.

Tipo y uso de interactividad en emails.

Los elementos interactivos que presentaremos aquí cargan perfectamente en todos los clientes, y si la interactividad no es soportada por un cliente de email, es reemplazada por una alternativa totalmente segura.

• Botón animado-CSS para emails promocionales;
• formularios de encuesta para emails activados por eventos y cuestionarios;
• carrusel de imágenes para mostrar unos cuantos productos en una pantalla en emails promocionales;
• efecto rollover para mostrar productos desde diferentes ángulos y sus características en emails promocionales;
• acordeón para todo tipo de campaña para hacer los boletines interactivos más compactos;
• videos para presentar mejor nuestro nuevo producto, felicitar a los clientes por días festivos y explicar a los más nuevos cómo usar nuestra herramienta.

No mencionamos los temporizadores de cuenta regresiva, personalización u otros elementos que ayudan a informar a nuestros suscriptores de las últimas noticias de Instagram y gráficos integrados, ya que son elementos de contexto en los emails. El contenido es dinámico, pero los cambios se hacen automáticamente — no hace falta interacción.

Te mostraremos cómo hacer un email interactivo y luego probaremos cada uno.

Nota importante:

Es comúnmente sabido que Email on Acid y Litmus son las mejores herramientas para probar emails. Pero no nos ayudarán ahora porque solo brindan capturas de pantalla. Sin embargo, sigue siendo razonable utilizarlas, ya que muestran si los bloques han sido quitados o no.

La única solución para ver si, por ejemplo, un slider funciona o los clientes solo ven una imagen estática, es probar tu email interactivo enviándolo a todos los clientes que tú y tus amigos tengan, a todos los posibles escritorios y dispositivos móviles. Mientras más, mejor.

Esta es una lista de los clientes más utilizados en marzo de 2019, de acuerdo con Litmus.

Nota: deberías también considerar la combinación de dispositivos y clientes.

1. Botón animado CSS

Botones animados CSS. Todos usamos botones CTA en nuestros mails, ¿por qué no animar uno cuando el lector pasa el puntero por encima? Llama su atención, añade un concepto de juego, y te ayuda a ajustarse con tu diseño de marca si los botones en tu sitio web son animados por CSS.

Antes, nuestros usuarios tenían que añadir un elemento del código CSS mediante el editor de código HTML para animar los botones. Y esto no era fácil.

El 15 de abril, lanzamos una nueva característica — botón interactivo, que cambia de color cuando pasas el puntero por encima.

Cómo se hace:

• Arrastra el bloque de botón básico a la plantilla HTML con la que estás trabajando;

• Toca el bloque de botón en tu plantilla para activar el panel de ajustes;
• Coloca el estilo de texto, como fuente, tipo y tamaño;
• Coloca el color de botón, color de fuente;

En esta captura, “button color” es para el color principal, “highlighted button color” es para el color que el usuario verá cuando coloque el puntero encima, y “text color” es para el color de fuente. Si no quieres un efecto hover en tus emails, solo aplica highlighted button color del mismo color que el color principal;

• listo.

2. Encuestas y cuestionarios

En nuestro blog, ya hemos mencionado que la compra de un cliente debería ser seguida por una invitación a una encuesta.

Tipos de invitaciones a encuesta:

    a) Encuesta de una sola pregunta — no es interactiva, pero es segura

A pesar del hecho de que no es un diseño interactivo, lo pongo aquí porque igual requiere de algunas acciones de los lectores.

Para una encuesta de una pregunta en un boletín, la mejor solución es colocar el cuestionario directo en el cuerpo del email.

Cómo se hace:

• la empresa insertó 5 imágenes horizontalmente;
• añadió 5 enlaces individuales a cada imagen.

El cliente hacía clic en la imagen que coincidía con su opinión.

Un buen ESP debe brindarte un informe detallado de cuántas veces se ha hecho clic en una imagen.

Cómo se hace:

• la empresa insertó 4 imágenes verticalmente;
• añadió 4 enlaces URL a cada imagen.

Una vez más, el cliente hacía clic en la imagen que coincidía con su opinión.

    b) encuesta de varias preguntas — incrustada en una plantilla de email interactivo

Si necesitas hacer unas cuantas preguntas, deberías crear un formulario con preguntas e incrustarlo en tu boletín interactivo, así tus clientes no deben hacer acciones superfluas — pueden votar directamente en el email.

Cómo se hace:

• necesitas crear un formulario de preguntas

Yo prefiero Google Forms;

• envíalo a tu dirección de email

cuando envíes Google Form, asegúrate de elegir “enviar por email”, e ingresa tu dirección de email, cambia el asunto y el mensaje si hace falta, ya que todos los lectores lo verán y marcarán la opción “incluir formulario en el email”;

• copia el código incrustado

abre el formulario en tu bandeja de entrada, haz clic derecho en el formulario y selecciona “inspeccionar”. Busca la línea table align=”center”. Cuando esté resaltada, presiona “CTRL+C” (y no clic derecho y copiar);

• añade un nuevo bloque HTML a tu plantilla interactiva;
• inserta el código incrustado al editor de código;

verás “Insert your HTML code in the editor”, haz clic ahí y se abrirá el editor de código. En vez de “insert your...” entre las etiquetas <p> y </p>, pondrás el código incrustado;

• listo.

Por favor, mira el GIF para ver el proceso entero.

Nota: los formularios de encuesta incrustados en nuestras plantillas de boletín interactivo se muestran correctamente en todo tipo de dispositivos. ¡PERO! Solo se puede hacer clic en las casillas en versión de escritorio, en los dispositivos móviles no se puede hacer.

Por lo tanto, cuando se abran emails de encuestas en dispositivos móviles y tabletas, tus usuarios tendrán el enlace a Google Form en sí (¿recuerdas el asunto del formulario que especificaste? Ese es el nombre del enlace. — Es añadido automáticamente. Los lectores pueden hacer clic sin problemas al enlace para entregar sus respuestas).

En mi caso, dice “Christmas Sales”.

Clientes de email que pasaron con éxito la prueba:

• ¿Todos :)

Esta forma de incrustar encuestas es totalmente segura para web.

Nota: actualmente, Stripo.email es el único creador de plantillas que permite incrustar Google Forms de esta manera.

Algunos creadores de plantillas no te dejarán trabajar con código HTML abierto, otros te permitirán hacerlo, pero las modificaciones al código en el editor y formulario se verán mal en los dispositivos de escritorio.

La forma en que algunos ESP transfieren Google Forms incrustadas:

• eSputnik — se puede hacer clic a las casillas en escritorio, y en dispositivos móviles está el enlace;
• MailChimp — no muestra las casillas directamente;
• Campaign Monitor ofrece su bloque básico de encuesta.

La alternativa

Si por alguna razón, el formulario incrustado en un email interactivo no funciona en ut ESP o tu creador de email no permite insertar Google Forms, entonces puedes probar este método:

Inserte un botón CTA con el enlace que lleve a tus clientes a la página de aterrizaje de tu sitio web que has colocado antes en el cuestionario.

Cómo se hace:

• crea una página de preguntas o incrusta Google Form en tu sitio web; 
• añade un botón CTA en tu email;
• coloca el enlace en el botón.

Nota: puedes probar si el enlace funciona solamente enviándote a ti mismo un email de prueba. Los enlaces nunca funcionan en editores de plantillas.

3. Efecto rollover de imagen en los emails

Usando el efecto rollover puedes brindar a tus lectores un acercamiento a algunos productos, puedes mostrarlos desde diferentes ángulos, ocultar detalles del producto tras su fragmento de código, y jugar a algunos juegos con los clientes cuando sea razonable.

Stripo.email ofrece un efecto rollover de imagen seguro para web que es mostrado correctamente en casi todos los clientes de email y nuestro código único es soportado por todos los ESP, incluyendo MailChimp.

Nota importante:

El efecto rollover de imagen está pensado solo para dispositivos de escritorio. En dispositivos móviles, los lectores solo verán el primer marco.

Cómo se hace:

• añade una imagen a tu plantilla;
• en el panel de ajustes, toca el botón “rollover effect”;

• añade la segunda imagen;
• ¡listo!

Clientes de email que pasaron con éxito la prueba:

• Yahoo! Mail;
• AOL;
• Thunderbird;
• Mail.ru;
• Gmail;
• Apple Mail;
• Outlook 2003;
• Outlook Web;
• Outlook para Mac.

Encuentra nuevas ideas, recomendaciones y requerimientos para imágenes en esta publicación en el blog.

4. Carrusel de imágenes en emails

El carrusel de imágenes es una manera muy interesante de mostrar unas cuantas fotos del producto en una pantalla.

¿Quieres promocionar los productos con precios y descripciones? Entonces prepáralas de antemano con cualquier editor de fotos (Stripo ofrece uno integrado) — coloca esta información directo en las imágenes. Así, todos los fragmentos de código de tu producto en el slider/rollover de imagen/carrusel será informativo y único. De esta manera definitivamente podrás atraer a usuarios inactivos y al menos persuadirlos a hacer clic en los botones si no los conviertes en clientes.

Cómo se hace:

• Crea un carrusel con la herramienta apropiada. Yo utilicé Freshinbox;
• Copia el código incrustado;
• En Stripo, arrastra el código de HTML básico y suéltalo en tu plantilla de email;
• Haz doble clic para activar el panel de ajustes;
• Inserta el código incrustado.

Así, si decides crear un email interactivo con carrusel de imagen, necesitarás una herramienta de terceros para crear este elemento interactivo, o utilizar nuestras plantillas interactivas con carrusel de imágenes que ya está creado — solo tendrás que reemplazar las imágenes y pegar tus URL.

Por desgracia, solo unos cuantos ESP soportan este tipo de interactividad en los emails: por ejemplo, MailChimp no soporta interactividad en los emails.

Clientes de email que pasaron con éxito la prueba:

• Apple Mail;
• Apple iPhone;
• Apple iPad;
• Yahoo! Mail.

Otros usuarios verán la imagen que colocaste primero.

5. Acordeón

Este tipo de interactividad en los emails se está volviendo popular. ¿Por qué lo amamos nosotros? Porque están hechos para ocultar largos textos en viñetas, es decir, para ahorrar grandes espacios en tus emails en dispositivos móviles.

Apenas puedes encontrar estos ejemplos de emails interactivos porque solo unas pocas compañías son lo suficientemente valientes para utilizar (su editor de email está técnicamente listo para hacerlo) acordeones en los emails.

No he encontrado el código incrustado online que quedaría bien en nuestro editor pero esta plantilla de email de Stripo ya tiene acordeón incrustado en ella. Todo lo que tienes que hacer es reemplazar los enlaces, cambiar los nombres de las pestañas, y trabajar en el diseño del email interactivo.

Cómo se hace:

• Abre esta plantilla de email interactivo en el editor;
• Haz doble clic en cualquier elemento del acordeón que necesites editar;
• Puedes hacer todos los cambios al texto, fuente, tamaño de fuente, etc. ya sea en el panel de ajustes, o en el código, como se muestra debajo:

Para información más detallada en ambas alternativas, por favor, lee la publicación del blog.

6. Videos incrustados en los emails

Los videos en los emails pueden aumentar el CTR hasta un 85%. Y el 65% de los lectores son más propensos a comprar una vez que han tenido la oportunidad de mirar un video sobre los productos que promocionas en tus emails.

Hay cuatro maneras de añadir video en el email:

• utilizando un video de Youtube/Video

El cliente de email muestra solo la vista previa — en Stripo, puedes reemplazarla con cualquier imagen que quieras;

• cargando tu video en formato mp4

Al hacer esto, creas un email interactivo, el video es reproducido directamente en las bandejas de entrada de los lectores;

• utilizando nuestra combinación de código

Si un cliente de email soporta interactividad, entonces los usuarios mirarán el video en la bandeja de entrada. Si el cliente no soporta interactividad, los usuarios serán llevados a YouTube para ver el video;

• utilizando una herramienta de terceros

Herramientas como Viwomail.com o Liveclicker te proporcionan el código incrustado.

De hecho, permiten incrustar videos en tiempo real.

Nota: para evitar violación de derechos de autor, recomendamos utilizar solo videos de los que tengas derechos para compartir.

Cargando un video MP4

Cargué un video en MP4 a un sitio web de terceros, y luego inserté este enlace en el bloque HTML. Esto es lo que planeaba ver:

Nuestro propio video en formato mp4 fue mostrado y hasta reproducido en Outlook 2011 y 2016.

Gmail y Apple no lo mostraron. Buu...

No es la mejor solución para atraer a tus clientes.

Utilizando nuestra combinación de código

Nuestro programador me ayudó y escribió la siguiente combinación de código:

<video poster="https://tlr.stripocdn.email/content/guids/CABINET_f98886e36d3d2f7b2dc5420f03cfb022/images/20091519918813053.png" controls="controls" width="100%" height="176"><source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"><a href="https://www.youtube.com/watch?v=8gqqANVWdjU"><img src="https://tlr.stripocdn.email/content/guids/CABINET_f98886e36d3d2f7b2dc5420f03cfb022/images/20091519918813053.png" width="320" height="176"></a></video>

Los primeros dos enlaces son los enlaces principales. Y los dos últimos, los que comienzan con <a href>, son los enlaces Alternativos. Aquí utilizamos dos videos — uno de youtube y el que fue subido a otro sitio web porque necesitábamos un enlace extra — y una imagen como principal y una como Alternativa. Solo haz una captura de pantalla de tu video en youtube.

Cuando los enlaces principales no funcionan, nuestros clientes verán el plan b.

Para la pureza del experimento, utilizamos a propósito dos imágenes diferentes para poder distinguir qué enlace y qué imagen funcionó.

Clientes de email que pasaron con éxito la prueba:

• iPhone 7 reprodujo nuestros videos;
• Gmail mostró la vista previa. Solo cuando hice clic sobre ella el cliente de email mostró el enlace que me llevó a youtube;
• Outlook 2011 reprodujo mi video.

Nota: cuando añadas una imagen de vista previa como plan b, asegúrate de colocar el botón de reproducir sobre ella. De lo contrario, ¿cómo se supone que tus lectores sepan que hay un video incrustado y que deberían hacer clic sobre la imagen?

Alternativa

• Puedes utilizar este código seguro como alternativa;
• Modifica nuestra plantilla que ya contiene este código. Solo tendrás que reemplazar los enlaces:

• O añade el bloque de Video en tu plantilla e inserta el enlace ahí. El sistema añadirá automáticamente el nombre alternativo, el botón de reproducción, y la imagen de vista previa. En Stripo, podrías hasta reemplazar la imagen de vista previa por una personalizada — y de igual manera colocaremos el botón de reproducción encima. ¿Por qué recomendamos hacer esto cuando el enlace lleva a Youtube o Vimeo? Porque todos los clientes de email lo muestran correctamente, no hay ninguna limitación o sorpresa.

Resumen

Los boletines interactivos dependen de los clientes de email. La mayoría de los clientes verán los elementos interactivos como imágenes estáticas o no los verán directamente.

Nosotros, en Stripo, hacemos lo posible para brindar a nuestros fieles usuarios alternativas seguras para web a los elementos interactivos debido a su método de diseño único — ahora los emails interactivos funcionan en las bandejas de entrada de los lectores.

Trucos y consejos

• El diseño de email interactivo debería ser sencillo, ya que el foco está en el elemento interactivo;
• ¡Siempre! envía un email de prueba a todas las direcciones y dispositivos ya que esta es la única manera de verificar si los elementos interactivos funcionan en verdad o son solo imágenes estáticas.

Sinceramente deseo que crees boletines efectivos y que vendan con nuestras plantillas de email interactivo.

registrarse en Stripo