Intégrer les variables et blocs de code Actito

Dans cet article vous apprendrez comment intégrer les variables et blocs de code Actito dans vos emails. Nous vous invitons à lire en amont notre article concernant l’intégration de variables dans l’Email Builder.

Voir également la documentation Actito.

Pour ajouter un lien de désinscription, ajoutez un élément texte (avec le contenu de votre choix, par exemple “Je souhaite me désinscrire”). Depuis l’onglet “Styles” du volet de conception, accédez au champ Lien de la catégorie “Lien” de cet élément texte, et insérez la variable ${unsubscribe}.

Comme pour le lien de désinscription, depuis l’onglet “Styles” du volet de conception, dans la catégorie “Lien”, ajoutez la variable ${WebVersion} dans le champ Lien d’un élément Texte ou d’un Bouton.

Voici la syntaxe d’une variable Actito: ${ma_variable}

Par exemple, pour afficher le prénom d’un contact, on pourra utiliser la variable ${firstName}.

Vous pouvez insérer du contenu texte présent en base de données en prenant à chaque fois la variable correspondante et en respectant la syntaxe Actito. Insérez simplement cette variable au sein de vos textes.

Côté Actito, vous pouvez définir la valeur de la variable ${genderTest} en fonction de la civilité du destinataire de l’email.

Dans l’Email Builder, il vous suffit alors d’intégrer cette variable dans un champ texte, comme vu au point précédent.

Par exemple, si votre variable ${genderTest} vaut « Cher monsieur » pour un destinataire (masculin) et « Chère madame » pour une destinatrice (féminin), vous pouvez insérer les deux variables ${genderTest} ${lastName} dans un texte pour obtenir « Cher monsieur Dupont » ou « Chère madame Dupont ».

Comme pour le lien miroir, si vous souhaitez rediriger le destinataire de votre email vers un formulaire. Depuis l’onglet “Styles” du volet de conception, accédez au champ Lien de la catégorie “Lien” d’un élément cliquable (comme texte, un bouton ou une image) et insérez la variable ${form} dans le champ Lien.

Les conditions et les critères associés sont créés dans Actito conformément à la documentation fournie.

Une fois créés, insérez vos blocs HTML conditionnels dans l’Email Builder en utilisant l’élément code.

Ici, nous souhaitons que le code HTML d’une image cliquable soit présent dans l’email lorsque la condition1 est remplie.

Pour cela, insérez le bloc de code HTML ci-dessous dans un élément code, à l’emplacement où vous souhaitez voir apparaître l’image cliquable. 

<span data-actito-if=${condition1} align="left"> 
<a href="https://www.actito.com/en-BE" target="_blank" style="border:0;"><img src="https://pbs.twimg.com/profile_images/1194974678969917440/HWjtzNpP_400x400.jpg" height="23" class="resize320" style="display:block; border:0; width:100%; height:auto;" alt="" /></a> 
</span>

Ici, nous souhaitons que l’ensemble du contenu d’une section soit présent lorsque la condition2 est remplie.

Pour cela, insérez un élément code en haut de la section avec la balise ouvrante de la condition : 

<span data-actito-if=${condition2} align="left">

Puis, insérez un élément code en bas de la section avec la balise fermante de la condition :

</span>

Pour créer une boucle personnalisée, créez un bloc contenant les informations à afficher en boucle, puis encadrez-le avec 2 éléments Code. Le premier contiendra la déclaration d’ouverture de la boucle, et le second, la déclaration de fermeture.

Par exemple, pour générer la liste des produits contenus dans un panier qui a été abandonné on aura : 

Un élément Code pour ouvrir la boucle :

<div data-actito-each="purchase:${purchases}">

Le contenu permettant d’afficher les produits et les prix associés (intégré à l’aide de 2 variables de personnalisation renseignées dans 2 éléments texte) :

${purchase.article} = le nom de l’article

${purchase.price} = le prix de l’article

Un élément Code pour fermer la boucle :

</div>

Il est possible d’appeler un bloc préalablement paramétré dans Actito (voir article Actito).

Une fois le bloc créé vous pouvez l’appeler dans l’Email Builder via un élément code. 

On aura par exemple :

<span data-actito-content="@{content:${librairie}#${offre2}}" data-actito-link-id="link_2" data-actito-content-default="true">This is the default value if missing content block</span>

Votre bloc de contenu a un identifiant bien spécifique, il faudra donc l’indiquer dans l’attribut data-actito-content (ici "@{content:${librairie}#${offre2}}").

Si le bloc n’est pas affichable ou inexistant vous pouvez paramétrer une valeur par défaut.

Voir également la documentation relative aux variables Actito et à la personnalisation.