--- url: "/fr/emailify/integrations/klaviyo.md" description: "Emailify intègre Klaviyo : importez vos emails HTML directement depuis le plugin Figma dans vos modèles Klaviyo." --- # Importer vos emails dans Klaviyo > Emailify intègre Klaviyo : importez vos emails HTML directement depuis le plugin Figma dans vos modèles Klaviyo. ### Tutoriel vidéo : importer vos emails dans Klaviyo Cette vidéo explique comment importer des emails HTML dans Klaviyo depuis le plugin Figma Emailify. [Embedded media](https://www.youtube-nocookie.com/embed/7OCqmOsrAYk) > **Tip:** Si vous avez besoin de liens de modèle Klaviyo (par exemple `{{ event.url }}`) dans vos [paragraphes de texte](/fr/emailify/content/link-paragraphs), 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](https://www.klaviyo.com/settings/account/api-keys). 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](https://www.klaviyo.com/email-templates/list). > **Info:** 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 {#updating-klaviyo-templates-uploaded-from-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. > **Tip:** 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. > **Warning:** 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 {#using-your-uploaded-klaviyo-email-template-in-a-campaign} 1. Créez une [campagne d’emailing](https://www.klaviyo.com/campaigns) 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 {#a-b-testing-custom-html-templates-in-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. > **Tip:** 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](https://help.klaviyo.com/hc/en-us/articles/115005228148) de Klaviyo. ## Textes et images modifiables dans Klaviyo (facultatif) {#editable-text-images-in-klaviyo-optional} > **Warning:** **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](https://www.klaviyo.com/campaigns) 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 {#fixing-klaviyo-s-automatic-padding-overrides-in-editable-campaigns} [Video](/assets/videos/emailify/export/klaviyo-padding-overrides.mp4) Klaviyo a [mis à jour son éditeur](https://help.klaviyo.com/hc/en-us/articles/13160284274459) 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 `` 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 {#adding-a-dynamic-product-feed-to-your-klaviyo-emails} ### 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. [Embedded media](https://www.youtube-nocookie.com/embed/PaRSIxVLYlo) Pour ajouter un [flux de produits](https://help.klaviyo.com/hc/en-us/articles/115005082787) 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. > **Note:** **Si vous avez besoin d’aide**, adressez-vous à un développeur de votre équipe ou à [votre contact au support Klaviyo](https://www.klaviyo.com/support) : 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 {#manually-adding-editable-region-to-drag-drop-the-klaviyo-product-feed} 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 : ``` 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 ``` Dans l’éditeur de modèles Klaviyo, collez-le au-dessus de la ligne ` **Note:** **Si vous avez besoin d’aide**, adressez-vous à un développeur de votre équipe ou à [votre contact au support Klaviyo](https://www.klaviyo.com/support) : 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.