--- url: "/es/emailify/integrations/klaviyo.md" description: "Emailify incluye una integración con Klaviyo que sube emails HTML directamente desde el plugin de Figma a tus plantillas de Klaviyo." --- # Subir tus emails a Klaviyo > Emailify incluye una integración con Klaviyo que sube emails HTML directamente desde el plugin de Figma a tus plantillas de Klaviyo. ### Vídeo tutorial: subir tus emails a Klaviyo Este vídeo explica cómo subir a Klaviyo los emails HTML del plugin Emailify de Figma. [Embedded media](https://www.youtube-nocookie.com/embed/7OCqmOsrAYk) > **Tip:** Si necesitas enlaces con variables de plantilla de Klaviyo (por ejemplo, `{{ event.url }}`) en tus [párrafos de texto](/es/emailify/content/link-paragraphs), el campo de enlace nativo de Figma los bloqueará por no ser URL válidas. Para evitarlo, puedes usar el formato especial de enlace de Klaviyo de Emailify, `https://klaviyo.invalid/?{{ event.url }}`, y Emailify incluirá la sintaxis de plantilla de Klaviyo sin modificar en el HTML exportado. En el panel de exportación de Emailify, selecciona la opción **Klaviyo** en la lista desplegable y, después, pega una clave de API privada válida de Klaviyo (siguiendo estos pasos): 1. Inicia sesión en Klaviyo y ve a la [página de ajustes API Keys de Klaviyo](https://www.klaviyo.com/settings/account/api-keys). 2. Haz clic en el botón **Create Private API Key**. 3. Ponle un nombre (por ejemplo, "Emailify API Key") y marca la opción **Custom Key**. 4. Marca la opción **Read/Write Access** en el ámbito de API **Templates** (todos los demás ámbitos de API pueden quedarse en _No Access_). 5. Haz clic en el botón de icono **Copy** de la sección **Your Private Key**, en la pantalla de confirmación de creación de la clave. 6. Pega en el plugin Emailify la clave de API que has copiado (debería tener un aspecto parecido a `pk_b3338b071136f98817d2a0e0a9581137ee`). Cuando estés listo, haz clic en el botón **Upload To Klaviyo** para empezar a exportar a HTML los emails que hayas seleccionado en Figma y subirlos automáticamente a tu página de [plantillas de Klaviyo](https://www.klaviyo.com/email-templates/list). > **Info:** Si tu email HTML pesa menos de 102kb pero Gmail lo sigue recortando después de enviarlo desde Klaviyo, la causa es que tienes activado el seguimiento de enlaces en Klaviyo, que sustituye automáticamente las URL originales de tus enlaces por "URL de seguimiento" mucho más largas y aumenta el tamaño del HTML que se envía. Para evitarlo, puedes desactivar el ajuste de seguimiento de enlaces/GA en tu cuenta de Klaviyo. ## Actualizar plantillas de Klaviyo subidas desde Emailify {#updating-klaviyo-templates-uploaded-from-emailify} Si quieres que Emailify actualice automáticamente la misma plantilla de Klaviyo en lugar de crear una nueva cada vez, puedes activar el interruptor **Enable Updatable Templates** en los ajustes de exportación del plugin cuando esté seleccionada la opción **Klaviyo**. Así, después de la primera subida correcta, se añade automáticamente un valor `klaviyoTemplateId` al nombre del frame de Figma, y Emailify reutiliza ese ID de plantilla guardado la próxima vez que se sube el mismo frame a Klaviyo. > **Tip:** Asegúrate de que el interruptor **Enable Updatable Templates** está activado antes de subir la plantilla por primera vez. Esa primera subida es la que guarda el Template ID original de Klaviyo en el nombre del frame de Figma para las siguientes subidas. > **Warning:** Esto solo actualiza la plantilla guardada en tu biblioteca de plantillas de Klaviyo. Si esa plantilla ya se ha usado en una campaña o un flujo de Klaviyo, Klaviyo crea una copia para ese mensaje, así que volver a subirla desde Emailify no sustituirá automáticamente esas copias en uso. ## Usar en una campaña la plantilla de email subida a Klaviyo {#using-your-uploaded-klaviyo-email-template-in-a-campaign} 1. Crea una [campaña de email](https://www.klaviyo.com/campaigns) nueva en Klaviyo 2. Haz clic en el nombre de tu nueva plantilla en la pestaña **Email:saved** de la lista de la página **Templates**. 3. Haz clic en el botón **Use template** de la ventana emergente de vista previa. 4. Haz clic en el botón **Save** de la página del editor de código (**este paso es importante**) 5. Cuando aparezca "Your changes have been saved.", haz clic en el botón **Back to Content**. 6. Programa tu campaña de email como necesites. ## Tests A/B de plantillas HTML personalizadas en Klaviyo {#a-b-testing-custom-html-templates-in-klaviyo} Klaviyo admite tests A/B de emails HTML personalizados, pero al crear el test, la variante B se convierte automáticamente en una copia idéntica de la variante A. Para probar dos diseños distintos de Emailify: 1. En Figma, ponles nombres claros a los dos frames de Emailify, por ejemplo, **Summer Sale - Test A** y **Summer Sale - Test B**. Emailify usa estos nombres de frame como nombres de las plantillas guardadas en Klaviyo. 2. Sube los dos frames a Klaviyo como plantillas guardadas independientes. 3. Usa la plantilla Test A para crear tu campaña de Klaviyo y, después, haz clic en **Create A/B test**, encima de la línea de asunto. Klaviyo creará la variante B como copia de la variante A. 4. En otra pestaña del navegador, abre la plantilla guardada Test B en **Content > Templates**, abre su editor de código y copia todo el HTML. 5. Vuelve a la campaña, abre la variante B, haz clic en **Edit**, sustituye el HTML copiado de Test A por el HTML de Test B y guarda los cambios. 6. Ponles nombres descriptivos a las dos variantes y, después, previsualiza o envía una prueba de cada versión y revisa la versión de texto sin formato antes de programar la campaña. > **Tip:** Si estás probando el diseño o el contenido del email, mantén iguales la línea de asunto y los datos del remitente para que solo cambie una variable. Para más información sobre cómo configurar el test y elegir la métrica ganadora, consulta la [guía de tests A/B](https://help.klaviyo.com/hc/en-us/articles/115005228148) de Klaviyo. ## Textos e imágenes editables en Klaviyo (opcional) {#editable-text-images-in-klaviyo-optional} > **Warning:** **IMPORTANTE: el nuevo editor de Klaviyo añade relleno automático a los bloques de texto y botones editables**. Por desgracia, tendrás que volver a ponerlos a mano en "0" uno a uno para que el email se vea como tus diseños originales de Figma, siguiendo el vídeo de la sección **Corregir el relleno automático que añade Klaviyo en las campañas editables**, más abajo. Si quieres que los bloques de contenido se puedan editar después de subir la plantilla a Klaviyo, activa el interruptor **Editable Content** en las opciones de exportación de Emailify y, después, sigue estos pasos en Klaviyo: 1. Crea una [campaña de email](https://www.klaviyo.com/campaigns) nueva en Klaviyo 2. Haz clic en la opción **Drag and Drop** en el paso **Content** de la campaña 3. Haz clic en la pestaña **My Templates** y, después, en tu nueva plantilla 4. Haz clic en el botón **Save** y, después, en **Back to Content** 5. Haz clic en el botón **Edit Email** ### Corregir el relleno automático que añade Klaviyo en las campañas editables {#fixing-klaviyo-s-automatic-padding-overrides-in-editable-campaigns} [Video](/assets/videos/emailify/export/klaviyo-padding-overrides.mp4) Como Klaviyo [actualizó su editor](https://help.klaviyo.com/hc/en-us/articles/13160284274459) y obliga a todas las plantillas a usarlo desde el 6 de junio de 2023, por desgracia, si exportas emails HTML con el interruptor **Editable Content** activado en Emailify, Klaviyo aplica de forma predeterminada unos ~18px de relleno adicional alrededor de cada elemento de texto, como atributo `style` en línea de un nuevo elemento `` que inserta en el HTML si la plantilla es editable. Al activar el interruptor **Force the padding added by Klaviyo's new editor to be 0px** en Emailify, se añade automáticamente algo de CSS adicional para quitar este relleno en todos los clientes móviles y en los clientes de escritorio que no son Outlook, como Gmail. Sin embargo, _Outlook_ **seguirá mostrando el relleno** salvo que cambies a mano a "0" cada uno de los valores de "Padding" de los bloques de texto editables de tu plantilla al editar el email de tu campaña en el editor de Klaviyo. ## Añadir un feed de productos dinámico a tus emails de Klaviyo {#adding-a-dynamic-product-feed-to-your-klaviyo-emails} ### Vídeo tutorial: añadir un feed de productos dinámico a tus emails de Klaviyo Este vídeo explica cómo añadir feeds de productos personalizados de Klaviyo a plantillas HTML personalizadas con el plugin Emailify de Figma. [Embedded media](https://www.youtube-nocookie.com/embed/PaRSIxVLYlo) Para añadir un [feed de productos](https://help.klaviyo.com/hc/en-us/articles/115005082787) dinámico de Klaviyo a tu plantilla de email HTML en Emailify, puedes usar uno de los ajustes predefinidos de componentes de la pestaña **Ecomm**, entre las pestañas de categorías del plugin Emailify. Después de añadir el componente a tu frame de Emailify, tienes que sustituir el nombre `YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE` del componente añadido por el nombre del Product Feed que hayas creado como feed de productos en tu cuenta de Klaviyo. Para usar feeds de productos en HTML personalizado en Klaviyo, también tienes que asegurarte de activar el interruptor **Editable Content** en las opciones de exportación de Emailify, que te permitirá arrastrar y soltar en tu email un bloque "Product" predeterminado desde la barra lateral "Blocks" del editor de Klaviyo después de subirlo a tus plantillas de Klaviyo. Te recomendamos seguir el vídeo tutorial de arriba para ver cómo hacerlo paso a paso y asegurarte de que tu plantilla de Klaviyo está bien configurada; si no sigues los pasos correctamente, puede que los datos de tu feed de productos no aparezcan. > **Note:** **Si necesitas ayuda con esto**, ponte en contacto con un desarrollador de tu equipo o con [tu representante de soporte de Klaviyo](https://www.klaviyo.com/support), ya que nosotros (Emailify) no podemos ofrecer asistencia técnica ni ayudar con implementaciones personalizadas de esta función de plantillas más avanzada de Klaviyo. ### Añadir a mano una región editable para arrastrar y soltar el Product Feed de Klaviyo {#manually-adding-editable-region-to-drag-drop-the-klaviyo-product-feed} Desde 2025, parece que también tienes que incluir a mano _primero_ esta región editable en tu plantilla HTML desde el propio editor de código de plantillas HTML de Klaviyo y volver a guardar la plantilla antes de usarla en una campaña, para que el feed de productos dinámico cargue los datos: ``` Drag and Drop your Klaviyo Product Feed Block Here NOTE: Remove this text element in Klaviyo's editor when you're done! Video Tutorial: https://www.youtube.com/watch?v=PaRSIxVLYlo ``` Puedes pegarlo encima de la línea ` **Note:** **Si necesitas ayuda con esto**, ponte en contacto con un desarrollador de tu equipo o con [tu representante de soporte de Klaviyo](https://www.klaviyo.com/support), ya que nosotros (Emailify) no podemos ofrecer asistencia técnica ni ayudar con implementaciones personalizadas de esta función de plantillas más avanzada de Klaviyo.