Crear contenido de correo electrónico con el editor de código HTML

Video de Youtube: Crea el contenido de tu correo electrónico desde cero con HTML

Si dominas el HTML y prefieres escribir tu propio código, puedes crear correos electrónicos utilizando el editor de código HTML de Pushwoosh.

Nota

¿No tienes conocimientos de programación? Utiliza el editor de arrastrar y soltar para crear contenido de correo electrónico sin esfuerzo. No se requieren conocimientos de programación. Aprende más

Importante

Antes de empezar a crear el contenido del correo electrónico, es esencial configurar correctamente tu correo electrónico en el editor que elijas. Esto implica configurar los idiomas, especificar la línea de asunto, proporcionar la información del remitente y más. Aprende cómo hacerlo

Crear contenido de correo electrónico

Para empezar a crear contenido de correo electrónico, pega tu código HTML en la pestaña HTML. El editor proporciona vistas previas del correo electrónico en tiempo real mientras trabajas en ellos.

Alternativamente, puedes subir un archivo HTML haciendo clic en Subir archivo HTML ubicado en el panel inferior.

Para añadir un toque personalizado a tus correos electrónicos, utiliza etiquetas personalizadas. Para ello:

1. Haz clic en el icono de Etiqueta situado en la parte inferior del editor.
2. Selecciona la Etiqueta deseada y su modificador, y proporciona un valor predeterminado si es necesario.
3. Haz clic en Insertar para incluir la etiqueta personalizada en el contenido de tu correo electrónico.

Para incluir un emoji en tu correo electrónico, haz clic en el icono de Emoji situado en la parte inferior del editor.

Añadir imágenes

Para añadir una imagen a tu correo electrónico, incluye una etiqueta <img> en tu HTML y establece el atributo src en la URL de la imagen.

Para reutilizar una imagen de tu Almacén de medios, copia su URL allí y pégala en el atributo src. Consulta Copiar la URL de una imagen para ver los pasos.

<img src="YOUR-MEDIA-STORE-URL" alt="Summer sale banner" width="600" style="display:block;max-width:100%;height:auto;" />

Reemplaza YOUR-MEDIA-STORE-URL con la URL que copiaste del Almacén de medios.

Usar localización

La localización te permite ofrecer experiencias personalizadas a los usuarios en diferentes idiomas.

En el editor de código HTML, puedes utilizar la localización definiendo un idioma predeterminado y añadiendo múltiples opciones de idioma. Por ejemplo, puedes establecer un mensaje predeterminado en inglés y luego incluir traducciones en alemán y español. Esto asegura que el contenido de tu correo electrónico se adapte a las preferencias de idioma de cada usuario.

A continuación se muestra un ejemplo de cómo estructurar tus datos de localización. Esto utiliza el inglés como idioma predeterminado y traducciones al alemán y al español.

{
  "default": {
    "button": "Shop now",
    "description": "For a limited time, you can enjoy a 20% discount on all our premium coffee blends",
    "subtitle": "Don't miss it",
    "title": "☕ Coffee Promotion Alert!"
  },
  "de": {
    "button": "Jetzt einkaufen",
    "description": "Für kurze Zeit erhalten Sie einen Rabatt von 20% auf alle unsere Premium-Kaffeemischungen",
    "subtitle": "Verpassen Sie es nicht",
    "title": "☕ Kaffee-Promotion Benachrichtigung!"
  },
  "es": {
    "button": "Comprar ahora",
    "description": "Por tiempo limitado, puedes disfrutar de un descuento del 20% en todas nuestras mezclas de café premium",
    "subtitle": "No te lo pierdas",
    "title": "☕ ¡Alerta de Promoción de Café!"
  }
}

Una vez que tus datos de localización estén estructurados y añadidos en la Pestaña de Localización del editor, incorpóralos en tu contenido HTML utilizando marcadores de posición. Los marcadores de posición insertan dinámicamente texto localizado en tu contenido, basándose en la preferencia de idioma del usuario. A continuación se explica cómo implementarlo en tu HTML

{{title|text|}}
{{subtitle|text|}}
{{description|text|}}
{{button|text|}}

Considera este escenario: estás anunciando un descuento por tiempo limitado en mezclas de café. Al utilizar la estructura de localización mencionada anteriormente, puedes comunicar tu mensaje promocional de manera efectiva a los usuarios que hablan diferentes idiomas. Tu código HTML para la promoción podría verse así:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☕ Coffee Promotion Alert</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    background-color: #fff;
    padding: 20px;
    margin: 10px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ff6f61;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  .button:hover {
    background-color: #ff5733;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>{{title|text|}}</h1>
    <p>{{description|text|}}</p>
    <a href="https://www.example.com/promotion" class="button">{{button|text|}}</a>

  </div>
</body>
</html>

Con esta configuración, si el idioma de un usuario es el alemán, verá el correo electrónico en alemán. Los usuarios que optaron por recibir correos electrónicos en inglés lo verán en inglés. Aquellos que optaron por recibirlo en español lo recibirán en español. Esto asegura que todos los destinatarios reciban tu mensaje en su idioma preferido.

Insertar y combinar bloques de contenido de correo electrónico

Pushwoosh te permite combinar contenido de correo electrónico insertando una pieza de contenido de correo electrónico en otra. Esto facilita la reutilización de elementos como encabezados, pies de página o bloques de contenido específicos en diferentes correos electrónicos.

Por ejemplo, si tienes el Contenido de correo electrónico A (un encabezado) y el Contenido de correo electrónico B (un boletín informativo), puedes insertar el Contenido de correo electrónico A en el Contenido de correo electrónico B sin tener que copiar manualmente el contenido cada vez.

Sintaxis

Para insertar una pieza de contenido en otra, utiliza la siguiente sintaxis:

{% email_content "AAAAA-BBBBB" %}

Donde “AAAAA-BBBBB” es el ID del contenido de correo electrónico que quieres insertar. Puedes encontrar el ID ubicado debajo del nombre del contenido en tu lista de contenidos de correo electrónico.

Importante

• Puedes insertar contenido de forma recursiva, lo que significa que un bloque de contenido puede incluir otro, hasta una profundidad máxima de 3 niveles. Por ejemplo:
  • El Contenido A puede insertar el Contenido B.
  • El Contenido B puede insertar el Contenido C.
  • Sin embargo, el Contenido C no puede insertar otro bloque.
• Las inserciones cíclicas (p. ej., donde el Contenido A inserta el Contenido B y el Contenido B intenta insertar el Contenido A) no están permitidas y resultarán en un error.

Ejemplo

Digamos que tienes dos piezas de contenido:

• Contenido de encabezado (ID: “AAAAA-BBBBB”) con un diseño de encabezado predefinido.
• Contenido de boletín informativo, donde quieres incluir el encabezado.

Para insertar el encabezado en el boletín informativo, usarías lo siguiente:

{% email_content "AAAAA-BBBBB" %}

Esto te permite reutilizar fácilmente un encabezado predefinido en múltiples campañas de correo electrónico. Ahorra tiempo y asegura la consistencia en todos tus correos electrónicos.

Añadir un enlace para cancelar la suscripción

Incluye un enlace para cancelar la suscripción en tu correo electrónico para que los destinatarios puedan optar por no recibirlo de acuerdo con las regulaciones y sus preferencias. Pushwoosh proporciona tres variables que puedes usar en tu HTML.

Enlace para cancelar la suscripción

Añade este enlace para que los usuarios puedan optar por no recibir el mensaje que recibieron:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Cancelar suscripción </a>

La variable se reemplaza con la URL de cancelación de suscripción de Pushwoosh cuando envías el correo electrónico.

• Cuando el centro de preferencias de suscripción está habilitado, los destinatarios solo cancelan la suscripción de la categoría asignada a ese correo electrónico (p. ej., Boletín informativo). Aparece una pantalla de confirmación donde pueden Volver a suscribirse a esa categoría o Gestionar preferencias para ajustar todas las categorías de correo electrónico. Aprende más

• Cuando el centro de preferencias de suscripción no está habilitado, los destinatarios cancelan la suscripción de todos los correos electrónicos de marketing.

Los clics se cuentan en la tasa de cancelación de suscripción para ese mensaje en el Historial de mensajes.

Cancelar la suscripción de todas las categorías

Añade un enlace que cancele la suscripción del usuario de todas las categorías de correo electrónico a la vez:

<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> Cancelar la suscripción de todos los correos electrónicos </a>

Nota

Para permitirte entregar correos electrónicos importantes a tus clientes, no eliminamos a los usuarios que han cancelado la suscripción de tu base de usuarios. Para los usuarios que han optado por no recibir correos (por ejemplo, a través del enlace de cancelación de suscripción predeterminado cuando el centro de preferencias no está habilitado, o a través del enlace para cancelar la suscripción de todo), la etiqueta predeterminada Correos electrónicos cancelados se establece en ‘true’.

Considera crear un segmento de usuarios que no han cancelado la suscripción (valor de etiqueta ‘false’) para seguir enviándoles mensajes. Para evitar quejas, no envíes correos electrónicos a los usuarios que han cancelado la suscripción.

Enlace al centro de preferencias

Añade un enlace directo al centro de preferencias donde los usuarios gestionan qué categorías reciben:

<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Gestionar preferencias </a>

Aprende cómo funciona el centro de preferencias

La siguiente captura de pantalla muestra un pie de página que utiliza los tres tipos de enlaces.

Precaución

Si utilizas tu propio enlace para cancelar la suscripción en lugar de las variables de Pushwoosh, los usuarios que opten por no recibir correos a través de tu enlace no se incluirán en la tasa de cancelación de suscripción en el Historial de mensajes. Solo los usuarios que siguieron el enlace de Pushwoosh se cuentan en las estadísticas de ese correo electrónico.

Guardar contenido de correo electrónico

Una vez que hayas terminado de crear tu correo electrónico, haz clic en el botón Guardar situado en la parte superior del editor.

En la nueva ventana que aparece, dale a tu correo electrónico un nombre claro, que podría ser el mismo que tu línea de asunto. Además, crea una etiqueta para ayudarte a encontrarlo fácilmente en tu lista de correos electrónicos.

Si aún no has configurado los detalles del remitente, asegúrate de hacerlo también. Luego, haz clic en Guardar.

Ahora que el contenido de tu correo electrónico está listo, se puede utilizar en campañas de correo electrónico. Aprende más

Enviar un correo electrónico de prueba

Antes de enviar tu campaña de correo electrónico, puedes enviar un correo electrónico de prueba para previsualizar cómo aparecerá el contenido en las bandejas de entrada de los destinatarios. Esto te permite revisar el diseño, el contenido y cualquier elemento personalizado para asegurar la precisión antes de finalizar la campaña. Si es necesario, ajusta el contenido basándote en los resultados de la prueba.

Nota

Si no se ha completado el KYC (Conoce a tu cliente), aún puedes enviar correos electrónicos de prueba verificando una dirección de correo electrónico de prueba. Para ello, ve a la sección de Dispositivos de prueba, añade la dirección de correo electrónico que quieres usar para las pruebas y completa el proceso de verificación.

Para enviar un correo electrónico de prueba, haz clic en Correo electrónico de prueba en el editor de correo electrónico.

En la ventana que se abre:

1. En el campo Dirección de correo electrónico, introduce la dirección de correo electrónico donde quieres recibir el correo electrónico de prueba.

Si no se ha completado el KYC, tendrás que seleccionar una dirección de correo electrónico verificada de la lista de direcciones de prueba en lugar de introducir un correo electrónico.

2. Si tu correo electrónico contiene contenido dinámico (marcadores de posición para datos personalizados), añade valores de muestra para fines de prueba.

Por ejemplo:

• Edad (entero): Introduce un número para representar el marcador de posición de la edad (p. ej., 21).
• Nombre (cadena): Introduce un nombre de muestra (p. ej., David).

Estos valores reemplazarán los datos reales del destinatario en el correo electrónico de prueba, permitiéndote verificar cómo aparece el contenido dinámico.

3. Una vez que hayas rellenado los detalles necesarios, haz clic en Enviar correo electrónico de prueba para enviar el mensaje de prueba a la dirección de correo electrónico proporcionada.