Le bloc HTML personnalisé vous permet d'ajouter votre propre code aux emails dans l'Éditeur d'emails d'Omnisend. Utilisez-le pour intégrer des widgets tiers, appliquer un style personnalisé ou insérer des éléments de contenu avancés comme des compteurs.

Deux façons d'utiliser HTML personnalisé dans Omnisend :

Cet article couvre le workflow de bloc HTML pour les campagnes Email et les workflows d'Automatisation.

Avant d'ajouter HTML, vérifiez :

1. Dans l'Éditeur d'emails, ouvrez le menu Ajouter des éléments et faites glisser le bloc HTML dans le contenu de votre email.

2. Cliquez sur le bloc HTML pour ouvrir l'éditeur HTML dans la barre latérale droite.

3. Collez ou écrivez votre code HTML dans l'éditeur.

4. Cliquez sur Enregistrer.

Le bloc HTML vous permet d'ajouter du code personnalisé comme des compteurs, des tableaux et des widgets. Utilisez le CSS en ligne pour le style et testez votre email avant de l'envoyer.

Pour garantir que vos emails sont compatibles avec les principaux clients de messagerie, le bloc HTML ne prend en charge qu'un ensemble limité de balises HTML, d'attributs et de styles CSS.

<a><p><br><span><hr><ul><li><ol><u><strong><em><s><sub><sup><pre><h1><h2><h3><img><table><tr><td>

Voir la liste complète avec les attributs :

Votre code contient des balises non prises en charge ou des problèmes d'encodage.

Pour corriger :

Balises non prises en charge qui causent des erreurs :
​<iframe><script><div><font><video><audio><object><embed>

Les aperçus vides signifient généralement que les URL des images manquent de https://, ou que vous avez supprimé des balises d'enveloppe requises.

Pour corriger :

Non. L'Éditeur d'emails d'Omnisend est axé sur le visuel et ne fournit pas d'éditeur HTML brut pour l'ensemble de l'email.

Vous ne pouvez modifier le HTML que dans des blocs HTML personnalisés individuels.

Pour modifier l'HTML complet de l'email :

Les clients email comme Gmail, Outlook et Apple Mail remplacent le CSS en mode sombre, indépendamment des déclarations !important.

Recommandation :
Concevez votre email pour qu'il ait fière allure à la fois en mode clair et en mode sombre. Testez en utilisant Aperçu → Mode Sombre avant d'envoyer.

Omnisend ne met pas en évidence la ligne exacte causant l'erreur.

Pour corriger :

Vous pouvez ajouter des compteurs à rebours aux campagnes Email ou aux workflows d'Automatisation en utilisant le bloc HTML personnalisé.

Choisissez votre configuration :

Étape 1 : Faites glisser et déposez le Bloc HTML dans votre modèle d'email.

Étape 2 : Créez une minuterie de compte à rebours :

Étape 3 : Collez le code dans le bloc HTML dans Omnisend et cliquez sur Sauvegarder.

Pour centrer la minuterie :

Pour rendre la minuterie dynamique (compter à partir du temps d'envoi) :

Ajoutez [[ current_date | date: "%s" | plus: 86400 ]] à l'URL de l'image.

Cette fonction convertit la date/heure actuelle en secondes et ajoute 86400 secondes (1 jour) au temps d'envoi.

Exemple:

Vous pouvez changer 86400 à n'importe quel nombre de secondes. Par exemple:

Pour les flux de travail d'Automatisation, vous avez besoin d'un minuteur dynamique qui calcule la date d'expiration chaque fois que l'email est envoyé.

Exemple de cas d'utilisation : Ajoutez un minuteur de compte à rebours dynamique qui expire lorsque le code de réduction expire (2 jours après l'envoi de l'email).

Ajoutons notre minuteur basé sur un cas d'utilisation spécifique : imaginez que vous souhaitiez un minuteur dynamique qui expire à la fin de la vente (en utilisant un article en promotion).

Étape 1. Créez votre automatisation dans Omnisend → Ouvrez l'Éditeur d'emails et ajoutez un bloc de réduction pour votre vente. Définissez la date d'expiration de votre réduction, qui sera la même que la date d'expiration de votre minuteur.

Étape 2. Ajoutez un code HTML ici avec un compte à rebours indiquant quand le code de réduction expire. Copiez le Année-Mois-Jour et Décalage de Fuseau Horaire HTML des images Nifty et ajoutez-le à l'élément HTML dans Omnisend.

Maintenant, vous devez changer le format de date au format de date d'Omnisend. Trouvez la date dans votre code. Vous verrez qu'il y a un tiret entre chaque balise de personnalisation, que vous remplacerez par des balises de date dynamiques Omnisend.

Supprimez la partie date du code et insérez les balises de personnalisation Omnisend :[[current_date | date:'%Y']]-[[current_date | date:'%m']]-[[current_date | date:'%d']].

Une fois remplacée, la date affichera des zéros, mais lorsque l'email sera envoyé, une date réelle sera affichée ici car nous avons ajouté des balises de personnalisation.

Étape 3. Ajoutez le fuseau horaire. Dans la personnalisation, vous verrez un fuseau horaire réglé sur l'heure de Greenwich. Vous devez le changer pour le fuseau horaire de votre compte. Comme indiqué dans la capture d'écran ci-dessous, changez "T00:00:00-07" en "T00:00:00+2," etc., en fonction de votre fuseau horaire.

Étape 4. Votre minuteur est réglé sur la date d'aujourd'hui, mais vous souhaitez également qu'il compte dynamiquement jusqu'à la fin de votre vente (la date d'expiration de la promotion est fixée à 2 jours).

Par exemple, si votre code de réduction expire dans 2 jours, vous devez faire fonctionner votre minuteur dynamiquement pendant 72 (il ne compte pas aujourd'hui, donc vous devez ajouter 24h à 2 jours).

Pour cela, allez sur Niftyimages, copiez ce code, revenez à l'élément HTML dans Omnisend et placez-le juste après le tag de format. Veuillez noter que le nombre d'heures doit être ajusté en fonction de la durée de votre vente. Si votre réduction expire dans 10 jours, vous devez mettre 264 (240h+24h).

Voici un exemple de code collé dans Omnisend:

C'est tout ; vous avez réglé le minuteur pour fonctionner jusqu'à la fin de votre promotion. Veuillez vous rappeler que vous ne pouvez tester l'automatisation qu'en la déclenchant vous-même.

Si vous avez conçu votre Email dans Canva et souhaitez l'importer en tant que modèle complet :