Aller au contenu principal

Extraits HTML prêts à l'emploi

Pour simplifier le processus, des exemples HTML prêts à l'emploi sont fournis. Vous pouvez les copier, les coller et les adapter selon vos besoins.

Insérer un saut de ligne - <br>

Bonne nouvelle {{order.first_name}} ! <br> Votre colis {{shop.name}} a été pris en charge par {{carrier.name}} et est en route.

Mettre du texte en gras - <b></b>

<b> "Bonjour {{order.first_name}}" </b>

Mettre du texte en italique - <i></i>

<i> Bonne nouvelle {{order.first_name}} ! Votre colis {{shop.name}} a été pris en charge par {{carrier.name}} et est en route. </i>

Mettre du texte en minuscules (dans le titre d'une notification, par exemple)

<div style="text-transform:none;">Votre colis est en route ! </div>

Aligner le texte à gauche

<p align="left"> Bonne nouvelle {{order.first_name}} ! {{carrier.name}} a indiqué que votre colis a été livré.</p>

Aligner le texte à droite

<p align="right"> Bonne nouvelle {{order.first_name}} ! {{carrier.name}} a indiqué que votre colis a été livré.</p>

Justifier le texte

<p align="justify"> Bonne nouvelle {{order.first_name}} ! {{carrier.name}} a indiqué que votre colis a été livré.</p>

Modifier la couleur d'un mot

Bonjour <font style="color:#ee8900";> {{order.first_name}} {{order.last_name}} </font>

Insérer un lien hypertexte sur un mot ("ICI" dans notre exemple)

<a href = "URL de la page">ICI</a>

Insérer un bouton d'appel à l'action (CTA)

Copiez et collez l'extrait HTML ci-dessous dans la section "email body" de la notification souhaitée.

<tr><td align="center">Bonjour {{ order.first_name }},</td></tr>
<tr><td align="center">Vous venez de recevoir votre commande de XXX.com</td></tr>
<tr><td align="center">Nous aimerions recueillir votre avis.</td></tr>
<tr><td align="center">Votre avis est important pour nous et cela ne prend que quelques secondes.</td></tr>
<tr><td align="center">Un grand merci pour votre participation.</td></tr>
<tr><td align="center" style="padding-top:20px;padding-bottom:10px;">L'équipe {{ shop.name }}
</td></tr>
</br>
<tr>
  <td align="center" class="button-wrapper" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;word-break:break-word;padding-top:40px;padding-bottom:20px;padding-right:25px;padding-left:25px;">
    <table cellpadding="0" cellspacing="0" align="center" border="0" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;">
      <tbody>
        <tr>
          <td align="center" valign="middle" class="button email-main-color-bg" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;background-color:#d0063c;border-radius:0px;cursor:pointer;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;text-transform:uppercase;">
            <a href=
            "https://survey.diduenjoy.com/fr/ABCD?ref_mail={{order.email}}&date_shipping={{tracker.expedition_date}}&order_ref={{order.order_number}}&country={{shipping_address.country_code}}&date_order={{order.order_date}}&firstname={{order.first_name}}&name={{order.last_name}}"
            target="_blank" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:Helvetica, Arial, sans-serif;font-size:16px;cursor:pointer;color:#FFFFFF;text-decoration:none;">
            JE PARTICIPE
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </td>
</tr>

Remarque : L'extrait ci-dessous (tiré du code précédent) correspond à l'URL que vous pouvez modifier à l'aide des variables disponibles dans ZigZag si vous souhaitez récupérer automatiquement des informations :

"https://survey.diduenjoy.com/fr/ABCD?ref_mail={{order.email}}&date_shipping={{tracker.expedition_date}}&order_ref={{order.order_number}}&country={{shipping_address.country_code}}&date_order={{order.order_date}}&firstname={{order.first_name}}&name={{order.last_name}}"