Importer vos emails dans Customer.io

Emailify importe vos emails dans Customer.io via l’API (emails ou modèles Design Studio), ou exporte un ZIP pour copier le HTML manuellement.

Tutoriel vidéo : importer vos emails dans Customer.io

Cette vidéo montre comment importer manuellement dans Customer.io des emails HTML créés avec le plugin Figma Emailify.

Emailify propose deux options d’export vers Customer.io :

  • Customer.io (API) importe vos emails directement dans Customer.io Design Studio, sous forme d’emails ou de modèles d’email réutilisables.
  • Customer.io (Zip) exporte un fichier ZIP que vous pouvez copier manuellement dans Customer.io.

Importer directement dans Customer.io Design Studio ​

Dans le panneau d’export d’Emailify, sélectionnez l’option Customer.io (API) dans la liste déroulante, puis collez une App API Key Customer.io valide et choisissez la région Customer.io correspondant à votre espace de travail.

Si votre espace de travail Customer.io est hébergé dans l’UE, choisissez la région EU dans Emailify. Sinon, laissez la région US sélectionnée par défaut.

Utilisez le réglage Upload As pour choisir si Emailify crée dans Customer.io des modèles d’email réutilisables ou des emails Design Studio classiques. Pour des raisons de rétrocompatibilité, la valeur par défaut est Template. Quand vous êtes prêt, cliquez sur le bouton Upload To Customer.io pour exporter en HTML les emails sélectionnés dans Figma et les importer automatiquement dans Customer.io Design Studio.

Vous aurez besoin d’une App API key Customer.io autorisée à créer des emails Design Studio dans votre espace de travail Customer.io.

Lors d’un import via l’API Customer.io, Emailify importe par défaut les images d’email prises en charge dans Customer.io Assets. Il utilise un dossier emailify dans Customer.io Assets et le crée automatiquement s’il n’existe pas encore. Les images que Customer.io Assets ne peut pas accepter, y compris celles qui dépassent la limite de 2 Mo par fichier de Customer.io, sont importées chez Hypermatic en solution de repli, afin que l’email ou le modèle Design Studio puisse tout de même référencer une URL d’image hébergée.

Mettre à jour les emails et modèles Customer.io importés depuis Emailify ​

Si vous souhaitez que vos emails ou modèles Customer.io soient automatiquement mis à jour au lieu d’être recréés à chaque fois, vous pouvez activer l’option Enable Updatable Templates dans les réglages d’export du plugin (ou Enable Updatable Emails lorsque le réglage Upload As est défini sur Email).

Une valeur customerioEmailId ou customerioTemplateId est alors automatiquement ajoutée au nom du calque du frame Figma importé, puis réutilisée lorsque ce même frame est de nouveau importé dans Customer.io via l’API lors du prochain export depuis le plugin.

Remarque : vous devez vérifier que l’option Enable Updatable Templates ou Enable Updatable Emails est activée avant d’importer votre email ou modèle initial, car c’est ainsi que l’ID d’origine de l’email ou du modèle Customer.io est ajouté au nom de votre frame Figma. Cet ID servira ensuite à chaque nouvel import pour mettre à jour ce même élément dans votre compte Customer.io (au lieu d’en créer un nouveau à chaque fois), à condition que l’option de mise à jour reste elle aussi activée.

Pour mettre à jour des emails ou des modèles dans Customer.io, vous devez utiliser une App API key du même espace de travail et de la même région Customer.io que ceux qui ont reçu l’import initial.

Importer manuellement un export ZIP dans Customer.io ​

Dans le panneau d’export d’Emailify, sélectionnez l’option Customer.io (Zip) dans la liste déroulante. Quand vous êtes prêt, cliquez sur le bouton Export For Customer.io pour lancer l’export en HTML des emails sélectionnés dans Figma.

Une fois l’export terminé, téléchargez le fichier .zip sur votre ordinateur et décompressez-le. Ouvrez ensuite le fichier index.html situé dans le dossier portant le nom de votre email dans un éditeur de code ou de texte, copiez tout le HTML du fichier, puis :

  • Connectez-vous à votre compte Customer.io.
  • Dépliez l’élément de menu Content dans la navigation d’administration.
  • Cliquez ensuite sur l’élément de menu Email Layouts.
  • Cliquez sur le bouton Create Layout.
  • Cliquez sur l’option Start from scratch.
  • Nommez votre layout et cliquez sur Create Layout.
  • Collez le HTML copié depuis le fichier index.html exporté dans l’éditeur de l’onglet Edit.
  • Cliquez sur le bouton Save changes.

Créer un layout entièrement vierge dans Customer.io ​

Assurez-vous d’utiliser un layout entièrement vierge ! Par défaut, Customer.io ajoute automatiquement ses propres balises HTML supplémentaires (par exemple head, body, etc.) à chaque nouveau layout créé. Vous devez supprimer ce code, sinon votre modèle HTML s’affichera de façon cassée à l’envoi.

Dans Customer.io, lorsque vous commencez à créer un email, vous devez sélectionner un Layout. Celui-ci doit être entièrement vierge, afin que votre propre modèle HTML personnalisé soit le seul élément affiché.

Sélection d’un layout d’email dans Customer.io

Comme le montre la capture d’écran ci-dessous, un Layout qui semble vierge ne l’est pas réellement (il inclut automatiquement des balises <html> qui encadrent le contenu de votre modèle HTML).

HTML par défaut dans un layout Customer.io

Pour corriger cela, supprimez manuellement tout le HTML que Customer.io ajoute à votre Layout vierge, et ne conservez que la balise content (ci-dessous).

Layout Customer.io vierge ne contenant que la balise content

Une fois le Layout enregistré et ne contenant plus que la balise content, votre modèle HTML personnalisé devrait s’afficher comme prévu.