Tutoriel vidéo : importer vos emails dans Klaviyo

Cette vidéo explique comment importer des emails HTML dans Klaviyo depuis le plugin Figma Emailify.

Si vous avez besoin de liens de modèle Klaviyo (par exemple {{ event.url }}) dans vos paragraphes de texte, le champ de lien natif de Figma les bloque comme URL non valides. Pour contourner ce problème, utilisez plutôt le format de lien Klaviyo spécial d’Emailify, https://klaviyo.invalid/?{{ event.url }} : Emailify écrira la syntaxe de modèle Klaviyo brute dans le HTML exporté.

Dans le panneau d’export d’Emailify, sélectionnez l’option Klaviyo dans la liste déroulante, puis collez une clé API privée Klaviyo valide (obtenue en suivant les étapes ci-dessous) :

1. Connectez-vous à Klaviyo et ouvrez la page de réglages des clés API Klaviyo.
2. Cliquez sur le bouton Create Private API Key.
3. Donnez-lui un nom (par exemple, « Clé API Emailify ») et cliquez sur le bouton radio Custom Key.
4. Réglez le bouton radio des API Scopes Templates sur Read/Write Access (tous les autres scopes d’API peuvent rester sur No Access).
5. Sur l’écran de confirmation de création de la clé, cliquez sur le bouton icône Copy dans la section Your Private Key.
6. Collez la clé API copiée (qui doit ressembler à pk_b3338b071136f98817d2a0e0a9581137ee) dans le plugin Emailify.

Lorsque tout est prêt, cliquez sur le bouton Upload To Klaviyo pour lancer l’export en HTML des emails sélectionnés dans Figma : ils sont automatiquement importés dans la page de vos modèles Klaviyo.

Si votre email HTML pèse moins de 102 Ko mais est quand même tronqué dans Gmail après un envoi depuis Klaviyo, la cause est le suivi des liens activé dans Klaviyo : il remplace automatiquement les URL d’origine de vos liens par des « URL de suivi » beaucoup plus longues, ce qui augmente le poids du HTML envoyé. Pour éviter cela, vous pouvez désactiver le réglage de suivi des liens/GA dans votre compte Klaviyo.

Mettre à jour les modèles Klaviyo importés depuis Emailify

Si vous voulez qu’Emailify mette automatiquement à jour le même modèle Klaviyo au lieu d’en créer un nouveau à chaque fois, vous pouvez activer l’option Enable Updatable Templates dans les réglages d’export du plugin lorsque l’option Klaviyo est sélectionnée.

Après le premier import réussi, une valeur klaviyoTemplateId est alors ajoutée automatiquement au nom du frame Figma, et Emailify réutilise cet ID de modèle enregistré la prochaine fois que le même frame est importé dans Klaviyo.

Assurez-vous que l’option Enable Updatable Templates est activée avant d’importer le modèle pour la première fois. C’est ce premier import qui enregistre l’ID du modèle Klaviyo d’origine dans le nom de votre frame Figma pour les imports suivants.

Seul le modèle enregistré dans votre bibliothèque de modèles Klaviyo est mis à jour. Si ce modèle a déjà servi dans une campagne ou un flow Klaviyo, Klaviyo crée une copie pour ce message : un nouvel import depuis Emailify ne remplace donc pas automatiquement ces copies en cours d’utilisation.

Utiliser votre modèle d’email Klaviyo importé dans une campagne

1. Créez une campagne d’emailing dans Klaviyo
2. Cliquez sur le nom de votre nouveau modèle dans l’onglet Email:saved de la liste de la page Templates.
3. Cliquez sur le bouton Use template dans la fenêtre d’aperçu.
4. Cliquez sur le bouton Save de la page de l’éditeur de code (cette étape est importante)
5. Une fois le message « Your changes have been saved. » affiché, cliquez sur le bouton Back to Content.
6. Planifiez votre campagne d’emailing selon vos besoins.

Faire de l’A/B testing sur des modèles HTML personnalisés dans Klaviyo

Klaviyo permet l’A/B testing d’emails HTML personnalisés, mais lorsque vous créez le test, la variante B est automatiquement une copie identique de la variante A. Pour tester deux designs Emailify différents :

1. Dans Figma, donnez aux deux frames Emailify des noms explicites, par exemple Summer Sale - Test A et Summer Sale - Test B. Emailify utilise ces noms de frames comme noms des modèles enregistrés dans Klaviyo.
2. Importez les deux frames dans Klaviyo sous forme de deux modèles enregistrés distincts.
3. Créez votre campagne Klaviyo à partir du modèle Test A, puis cliquez sur Create A/B test au-dessus de la ligne d’objet. Klaviyo crée la variante B comme copie de la variante A.
4. Dans un autre onglet du navigateur, ouvrez le modèle enregistré Test B sous Content > Templates, ouvrez son éditeur de code et copiez tout le HTML.
5. Revenez à la campagne, ouvrez la variante B, cliquez sur Edit, remplacez le HTML de Test A copié par le HTML de Test B, puis enregistrez vos modifications.
6. Donnez des noms parlants aux deux variantes, puis prévisualisez chaque version ou envoyez-vous un test, et vérifiez la version en texte brut avant de planifier la campagne.

Si vous testez le design ou le contenu de l’email, gardez la même ligne d’objet et les mêmes informations d’expéditeur pour ne faire varier qu’un seul paramètre.

Pour en savoir plus sur la configuration du test et le choix de la métrique gagnante, consultez le guide de l’A/B testing de Klaviyo.

Textes et images modifiables dans Klaviyo (facultatif)

IMPORTANT : le nouvel éditeur de Klaviyo ajoute automatiquement des marges intérieures (padding) aux blocs de texte et aux boutons modifiables. Malheureusement, vous devrez remettre manuellement chacune d’elles à « 0 » pour que l’email ressemble à vos designs Figma d’origine, en suivant la vidéo de la section Corriger les marges intérieures ajoutées automatiquement par Klaviyo dans les campagnes modifiables ci-dessous.

Si vous voulez que les blocs de contenu restent modifiables après l’import du modèle dans Klaviyo, activez l’option Editable Content dans les options d’export d’Emailify, puis suivez les étapes ci-dessous dans Klaviyo :

1. Créez une campagne d’emailing dans Klaviyo
2. Cliquez sur l’option Drag and Drop à l’étape Content de la campagne
3. Cliquez sur l’onglet My Templates, puis sur votre nouveau modèle
4. Cliquez sur le bouton Save, puis sur Back to Content
5. Cliquez sur le bouton Edit Email

Corriger les marges intérieures ajoutées automatiquement par Klaviyo dans les campagnes modifiables

Klaviyo a mis à jour son éditeur et l’impose à tous les modèles depuis le 6 juin 2023. Malheureusement, si vous exportez des emails HTML avec l’option Editable Content activée dans Emailify, Klaviyo applique par défaut environ 18px de marge intérieure supplémentaire autour de chaque élément de texte, sous forme d’attribut style en ligne sur un nouvel élément <td> qu’il injecte dans le HTML lorsque le modèle est modifiable.

L’option Force the padding added by Klaviyo's new editor to be 0px d’Emailify ajoute automatiquement du CSS pour supprimer cette marge sur tous les clients mobiles et sur les clients desktop autres qu’Outlook, comme Gmail. En revanche, Outlook affichera toujours la marge tant que chacune des valeurs « Padding » des blocs de texte modifiables de votre modèle n’a pas été remise manuellement à « 0 » lors de la modification de l’email de votre campagne dans l’éditeur Klaviyo.

Ajouter un flux de produits dynamique à vos emails Klaviyo

Tutoriel vidéo : ajouter un flux de produits dynamique à vos emails Klaviyo

Cette vidéo explique comment ajouter des flux de produits Klaviyo personnalisés dans des modèles HTML personnalisés avec le plugin Figma Emailify.

Pour ajouter un flux de produits Klaviyo dynamique à votre modèle d’email HTML dans Emailify, vous pouvez utiliser l’un des préréglages de composants de l’onglet Ecomm, parmi les onglets de catégories du plugin Emailify.

Après avoir ajouté le composant à votre frame Emailify, remplacez le nom YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE dans le composant ajouté par le nom du flux de produits (Product Feed) que vous avez créé dans votre compte Klaviyo.

Pour utiliser des flux de produits en HTML personnalisé dans Klaviyo, vous devez aussi activer l’option Editable Content dans les options d’export d’Emailify : vous pourrez ainsi glisser-déposer un bloc « Product » par défaut depuis la barre latérale « Blocks » de l’éditeur Klaviyo dans votre email, une fois celui-ci importé dans vos modèles Klaviyo.

Nous vous conseillons de suivre le tutoriel vidéo ci-dessus pour voir comment procéder étape par étape et vous assurer que votre modèle Klaviyo est correctement configuré : sinon, les données de votre flux de produits risquent de ne pas s’afficher.

Si vous avez besoin d’aide, adressez-vous à un développeur de votre équipe ou à votre contact au support Klaviyo : nous (Emailify) ne pouvons pas fournir d’expertise technique ni accompagner les implémentations personnalisées de cette fonctionnalité de modèles avancée de Klaviyo.

Ajouter manuellement une région modifiable pour glisser-déposer le flux de produits Klaviyo

Depuis 2025, il semble que vous deviez aussi ajouter manuellement cette région modifiable à votre modèle HTML dans l’éditeur de code de modèles de Klaviyo au préalable, puis réenregistrer le modèle avant de l’utiliser dans une campagne, pour que le flux de produits dynamique charge bien ses données :

<table>
  <tr>
    <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
      <div class="klaviyo-block klaviyo-text-block">
        Drag and Drop your Klaviyo Product Feed Block Here <br/>
        NOTE: Remove this text element in Klaviyo's editor when you're done! <br/>
        Video Tutorial: <a href="https://www.youtube.com/watch?v=PaRSIxVLYlo" target="_blank">https://www.youtube.com/watch?v=PaRSIxVLYlo</a>
      </div>
    </td>
  </tr>
</table>

Dans l’éditeur de modèles Klaviyo, collez-le au-dessus de la ligne <div dir="auto" lang="en"... de votre modèle HTML : il sera ainsi ajouté en haut de votre modèle.

Ajouter un flux de produits de panier abandonné à vos emails Klaviyo

Tutoriel vidéo : créer dans Figma un modèle d’email pour un flow Klaviyo de panier abandonné

Cette vidéo explique comment ajouter des flows Klaviyo de panier abandonné personnalisés dans des modèles HTML personnalisés avec le plugin Figma Emailify.

Pour ajouter un bloc de flow de panier abandonné Klaviyo dynamique à votre modèle d’email HTML dans Emailify, vous pouvez utiliser l’un des préréglages de composants de l’onglet Ecomm, parmi les onglets de catégories du plugin Emailify, pour les variantes suivantes :

• Shopify
• WooCommerce
• Magento 1
• Magento 2
• BigCommerce

Les calques contenant les variables de données d’événements produit Klaviyo sont alors créés automatiquement pour chaque plateforme. Notez que vous devrez quand même configurer votre flow Klaviyo de panier abandonné pour que cela fonctionne.

Si vous avez besoin d’aide, adressez-vous à un développeur de votre équipe ou à votre contact au support Klaviyo : nous (Emailify) ne pouvons pas fournir d’expertise technique ni accompagner les implémentations personnalisées de cette fonctionnalité de modèles avancée de Klaviyo.