--- url: "/es/emailify/integrations/customer-io.md" description: "Sube emails de Emailify a Customer.io mediante su API como emails o plantillas de Design Studio, o exporta un ZIP para copiar el HTML a mano." --- # Subir tus emails a Customer.io > Sube emails de Emailify a Customer.io mediante su API como emails o plantillas de Design Studio, o exporta un ZIP para copiar el HTML a mano. ### 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. [Embedded media](https://www.youtube-nocookie.com/embed/KQyaQy6gYps) 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 {#uploading-directly-to-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](https://docs.customer.io/integrations/api/app/) válida de Customer.io y elige la región de Customer.io que corresponda a tu espacio de trabajo. > **Note:** 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. > **Note:** 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](https://docs.customer.io/integrations/api/app/#tag/assets/createAsset). 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 {#updating-customer-io-emails-and-templates-uploaded-from-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. > **Tip:** 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. > **Note:** 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 {#manually-uploading-a-zip-export-to-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](https://fly.customer.io/login) 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 {#creating-a-totally-blank-layout-in-customer-io} > **Warning:** **¡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](https://customer.io/docs/journeys/3-layouts-and-customerio/), y tiene que estar totalmente en blanco para que solo se renderice tu propia plantilla HTML personalizada. ![Seleccionar un diseño de email en Customer.io](/assets/images/emailify/customer-io-one.jpg) 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 ``, que envuelven el contenido de tu plantilla HTML). ![HTML predeterminado en un diseño de Customer.io](/assets/images/emailify/customer-io-two.jpg) Para solucionarlo, elimina a mano el HTML que Customer.io añade a tu Layout en blanco y deja solo la etiqueta `content` (abajo). ![Diseño de Customer.io en blanco con solo la etiqueta content](/assets/images/emailify/customer-io-three.jpg) Cuando hayas guardado el **Layout** y solo contenga la etiqueta `content`, tu plantilla HTML personalizada debería renderizarse como esperas.