Tutoriel vidéo : importer vos emails dans MailChimp
Cette vidéo explique comment importer des emails HTML dans MailChimp depuis le plugin Figma Emailify.
Si vous avez besoin de liens avec des merge tags Mailchimp (par exemple *|UNSUB|*) 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 Mailchimp spécial d’Emailify, https://mailchimp.invalid/?*|UNSUB|* : Emailify écrira le merge tag Mailchimp brut dans le HTML exporté.
Dans le panneau d’export d’Emailify, sélectionnez l’option MailChimp (API) dans la liste déroulante, puis collez une clé API MailChimp valide. Vous pouvez la générer depuis la page des réglages de votre compte MailChimp.
Lorsque tout est prêt, cliquez sur le bouton Upload To MailChimp 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 MailChimp (accessible aussi depuis le menu du tableau de bord MailChimp, en cliquant sur Content, puis sur Email templates).
Rendre les images modifiables dans l’éditeur de campagne MailChimp
Par défaut, les zones de contenu texte et les rangées de votre modèle HTML sont modifiables dans l’éditeur de campagne MailChimp après l’import. Vous pouvez aussi rendre les images modifiables en activant l’option Editable Images dans les réglages d’export d’Emailify.
Les images modifiables sont exportées en @1x (et non en @2x Retina). Vous pouvez rendre les images du modèle modifiables dans MailChimp avec l’option Editable Images, mais malheureusement, MailChimp ne prend pas en charge les images Retina @2x modifiables : elles seront donc en @1x. Si vous préférez des images Retina @2x non modifiables, laissez cette option désactivée.
Images floues dans l’éditeur MailChimp (modèle modifiable)
Malheureusement, MailChimp ne prend pas en charge les images Retina @2x modifiables : vos images sont donc exportées en résolution @1x si vous avez activé l’option Editable Images. Si vous préférez des images Retina @2x non modifiables, laissez l’option Editable Images désactivée.
Importer manuellement des exports .zip locaux vers MailChimp (sans l’API MailChimp)
Si vous préférez importer manuellement vos modèles d’email dans MailChimp sous forme de fichier .zip, sélectionnez l’option MailChimp (Zip) dans la liste déroulante Export HTML, puis cliquez sur le bouton Export For MailChimp.
Une fois l’export terminé, cliquez sur le bouton Download your .zip file, enregistrez le fichier sur votre ordinateur et décompressez-le. Vous pourrez alors importer les fichiers .zip du dossier _zips (For upload to MailChimp) situé dans le dossier principal décompressé (comme dans la capture vidéo ci-dessus).
Modifications du HTML par MailChimp et affichage dans Gmail
MailChimp modifie automatiquement les modèles d’email HTML importés avant l’envoi. Ces modifications sont imposées et ne peuvent pas être désactivées.
Parmi les modifications connues :
- la scission des blocs de media queries
@mediacombinés en plusieurs media queries distinctes ; - la réécriture ou la restructuration de règles CSS ;
- la suppression des guillemets
"de certains sélecteurs CSS (par exemple,a[href^="tel:"]devienta[href^=tel:]).
Ces modifications peuvent avoir des effets indésirables, en particulier dans Gmail. Gmail utilise un analyseur CSS strict et ignore tous les styles d’une balise <style> s’il y rencontre un seul sélecteur ou une seule propriété non valide. Résultat possible : des largeurs de colonnes qui ne s’appliquent pas ou des mises en page qui s’empilent de façon inattendue.
Dans la mesure du possible, Emailify applique des solutions de contournement propres à MailChimp pour éviter les problèmes connus lors de l’export depuis le plugin. Toutefois, comme ces modifications ont lieu après l’import du HTML, une partie du comportement nous échappe (surtout si vous ajoutez aussi votre propre CSS personnalisé).
Si vous rencontrez des problèmes de mise en page propres à Gmail lors d’envois via MailChimp, ils viennent très probablement de ces transformations automatiques du modèle, et non du HTML exporté depuis Figma.