Saltar al contenido
Documentación para desarrolladoresSoporte Solicitar demo Iniciar sesión
Pushwoosh.com

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 tienes conocimientos de HTML y prefieres escribir tu propio código, puedes crear correos electrónicos utilizando el editor de código HTML de Pushwoosh.

Crear contenido de correo electrónico

Anchor link to

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 Upload HTML File (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 Tag (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 Insert (Insertar) para incluir la etiqueta personalizada en el contenido de tu correo electrónico.
Interfaz de inserción de etiquetas personalizadas que muestra la selección de etiquetas y las opciones de valor predeterminado

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

Usar la localización

Anchor link to

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 garantiza 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 Localization Tab (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 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, y aquellos que optaron por recibirlo en español lo recibirán en español. Esto garantiza que todos los destinatarios reciban tu mensaje en su idioma preferido.

Insertar y combinar bloques de contenido de correo electrónico

Anchor link to

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 copiar manualmente el contenido cada vez.

Sintaxis

Anchor link to

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

{% email_content "AAAAA-BBBBB" %}

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

Visualización del ID del contenido del correo electrónico que muestra el nombre del contenido y el identificador único

Ejemplo

Supongamos 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 deseas 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 garantiza la coherencia en todos tus correos electrónicos.

Añadir un enlace de cancelación de suscripción

Anchor link to

Asegúrate de incluir un enlace de cancelación de suscripción en tu correo electrónico para proporcionar a los destinatarios una opción para darse de baja fácilmente de futuras comunicaciones, en cumplimiento con las regulaciones y para respetar sus preferencias con respecto a la recepción de correos electrónicos.

Añade el enlace de cancelación de suscripción a tu correo electrónico de la siguiente manera:

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

El valor del atributo %%PW_EMAIL_UNSUBSCRIBE%% será reemplazado por el enlace de cancelación de suscripción de Pushwoosh en el momento en que envíes el mensaje de correo electrónico. Cuando los destinatarios sigan el enlace, se darán de baja de tus correos electrónicos y se contabilizarán en la tasa de cancelación de suscripción para ese mensaje de correo electrónico en particular en el Historial de mensajes.

Guardar contenido de correo electrónico

Anchor link to

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

Diálogo para guardar el contenido del correo electrónico que muestra los campos de nombre y etiqueta

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 Save (Guardar).

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

Enviar un correo electrónico de prueba

Anchor link to

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 garantizar la precisión antes de finalizar la campaña. Si es necesario, ajusta el contenido en función de los resultados de la prueba.

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

Botón de correo electrónico de prueba en la interfaz del editor de correo electrónico

En la ventana que se abre:

  1. En el campo Email address (Dirección de correo electrónico), introduce la dirección de correo electrónico donde deseas recibir el correo electrónico de prueba.

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

Menú desplegable de selección de dirección de correo electrónico de prueba verificada
  1. 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:

  • Age (integer): Introduce un número para representar el marcador de posición de la edad (por ejemplo, 21).
  • FirstName (string): Introduce un nombre de pila de muestra (por ejemplo, David).

Estos valores reemplazarán los datos reales del destinatario en el correo electrónico de prueba, lo que te permitirá verificar cómo aparece el contenido dinámico.

  1. Una vez que hayas rellenado los detalles necesarios, haz clic en Send test email (Enviar correo electrónico de prueba) para enviar el mensaje de prueba a la dirección de correo electrónico proporcionada.
Diálogo de confirmación de envío de correo electrónico de prueba con campos de datos de muestra