Vídeo tutorial: subir tus emails a Customer.io

Este vídeo explica cómo subir a mano emails HTML desde el plugin Emailify de Figma a Customer.io.

Emailify incluye dos opciones de exportación para Customer.io:

• Customer.io (API) sube tus emails directamente a Customer.io Design Studio como emails o como plantillas de email reutilizables.
• Customer.io (Zip) exporta un archivo ZIP que puedes copiar a mano en Customer.io.

Subir directamente a Customer.io Design Studio

En el panel de exportación de Emailify, selecciona la opción Customer.io (API) en la lista desplegable, pega una App API Key válida de Customer.io y elige la región de Customer.io que corresponda a tu espacio de trabajo.

Si tu espacio de trabajo de Customer.io está alojado en la UE, elige la región EU en Emailify. Si no, deja seleccionada la región predeterminada US.

Usa el ajuste Upload As para elegir si Emailify crea plantillas de email reutilizables o emails normales de Design Studio en Customer.io. De forma predeterminada está en Template por compatibilidad con versiones anteriores. Cuando lo tengas todo listo, haz clic en el botón Upload To Customer.io para empezar a exportar a HTML los emails que hayas seleccionado en Figma y subirlos automáticamente a Customer.io Design Studio.

Necesitas una App API key de Customer.io que pueda crear emails de Design Studio en tu espacio de trabajo de Customer.io.

Al subir con la API de Customer.io, Emailify sube de forma predeterminada las imágenes compatibles del email a Customer.io Assets. Usa una carpeta emailify en Customer.io Assets y la crea automáticamente si todavía no existe. Las imágenes que Customer.io Assets no acepta, incluidas las que superan el límite de 2 MB por archivo de Customer.io, se suben a Hypermatic como alternativa, para que el email o la plantilla de Design Studio pueda seguir haciendo referencia a una URL de imagen alojada.

Actualizar emails y plantillas de Customer.io subidos desde Emailify

Si quieres que tus emails o plantillas de Customer.io se actualicen automáticamente en lugar de crearse como elementos nuevos cada vez, puedes activar el interruptor Enable Updatable Templates en los ajustes de exportación del plugin (o Enable Updatable Emails cuando el ajuste Upload As está en Email).

Así se añade automáticamente un valor customerioEmailId o customerioTemplateId al nombre de la capa del frame de Figma que se ha subido, y ese ID se reutiliza cuando el mismo frame se vuelve a subir a Customer.io mediante la API en la siguiente exportación desde el plugin.

Ten en cuenta que el interruptor Enable Updatable Templates o Enable Updatable Emails también tiene que estar activado antes de subir tu email o plantilla inicial, porque así se añade al nombre de tu frame de Figma el ID original del email o la plantilla de Customer.io. Ese ID se usará en las siguientes subidas para actualizar ese mismo elemento en tu cuenta de Customer.io (en lugar de crear uno nuevo cada vez), siempre que el interruptor de actualización siga activado.

Para actualizar emails o plantillas en Customer.io, tienes que usar una App API key del mismo espacio de trabajo y la misma región de Customer.io que recibieron la subida original.

Subir a mano una exportación ZIP a Customer.io

En el panel de exportación de Emailify, selecciona la opción Customer.io (Zip) en la lista desplegable y, cuando lo tengas todo listo, haz clic en el botón Export For Customer.io para empezar a exportar a HTML los emails que hayas seleccionado en Figma.

Cuando termine la exportación, descarga el archivo .zip en tu ordenador y descomprímelo. Abre el archivo index.html que hay dentro de la carpeta con el nombre de tu email en un editor de código o de texto, copia todo el HTML del archivo y, después:

• Inicia sesión en tu cuenta de Customer.io
• Despliega el elemento de menú Content en la navegación de administración
• Haz clic en el elemento de menú Email Layouts
• Haz clic en el botón Create Layout
• Haz clic en la opción Start from scratch
• Ponle nombre a tu diseño y haz clic en Create Layout.
• Pega en el editor de la pestaña Edit el HTML que has copiado del archivo index.html exportado.
• Haz clic en el botón Save changes.

Crear un diseño totalmente en blanco en Customer.io

¡Asegúrate de que usas un diseño totalmente en blanco! De forma predeterminada, Customer.io añade automáticamente sus propias etiquetas HTML adicionales (por ejemplo, head, body, etc.) a cada diseño nuevo; tienes que asegurarte de eliminar ese código, o tu plantilla HTML se verá rota al enviarla.

En Customer.io, al empezar a crear un email, tienes que seleccionar un Layout, y tiene que estar totalmente en blanco para que solo se renderice tu propia plantilla HTML personalizada.

Como ves en la captura de pantalla de abajo, un Layout que parece estar en blanco en realidad no lo está (porque incluye automáticamente esas etiquetas <html>, que envuelven el contenido de tu plantilla HTML).

Para solucionarlo, elimina a mano el HTML que Customer.io añade a tu Layout en blanco y deja solo la etiqueta content (abajo).

Cuando hayas guardado el Layout y solo contenga la etiqueta content, tu plantilla HTML personalizada debería renderizarse como esperas.