Comment créer un lien « Ajouter au calendrier » pour vos e-mails

Publié: 2021-02-05

Les événements en personne ou virtuels consistent à faire connaissance avec d'autres personnes et à apprendre les uns des autres. Parce que le courrier électronique est un canal très personnel, c'est le moyen idéal pour susciter l'enthousiasme pour les événements et envoyer des rappels.

Pour vous assurer que les invités se présentent réellement, il peut être utile d'inclure un lien « Ajouter au calendrier » dans vos e-mails d'événement. Avec cela, les abonnés peuvent ajouter les événements à leurs propres calendriers, ce qui permet d'éviter plus facilement les conflits de calendrier et leur permet de configurer leurs propres rappels.

Traditionnellement, cela se fait avec un fichier ICS, également appelé iCalendar. Il s'agit d'un format de calendrier courant qui utilise généralement l'extension de fichier .ics et qui est largement accepté par la plupart des calendriers. À ne pas confondre avec l'iCal d'Apple, qui partage un nom similaire, bien que les fichiers iCalendar y fonctionnent également. Pour plus de clarté, nous appellerons cela un fichier ICS ou calendrier tout au long de cet article de blog.

Certains calendriers peuvent également ajouter des événements à partir de liens Web, ce que nous appellerons des liens de calendrier. Prendre le temps supplémentaire d'afficher dynamiquement le lien Ajouter au calendrier qui correspond au client de messagerie spécifique de chaque abonné peut leur rendre votre événement plus accessible. En d'autres termes, plus facile et plus rapide pour vos abonnés d'ajouter votre événement à leur calendrier.

Nous vous guiderons à travers les calendriers dont vous devriez vous soucier, en créant les fichiers et liens de calendrier réels, et en codant ces fichiers et liens dans votre e-mail d'événement pour la meilleure expérience d'abonnement par e-mail.

Table des matières

Étape 1 : Choisissez les calendriers à cibler
Étape 2 : Créez les liens et les fichiers du calendrier
1. Fichiers de calendrier ICS
2. Liens du calendrier
Étape 3 : Codez vos liens Ajouter au calendrier dans votre e-mail
1. Décidez comment afficher votre bouton Ajouter au calendrier
2. Créez vos boutons et liens CTA
3. Ciblez le bon public avec le bon lien de calendrier
Voir ces liens « Ajouter au calendrier » en action

Étape 1 : Choisissez les calendriers à cibler

Il existe d'innombrables applications de calendrier différentes : celles disponibles par défaut via le système d'exploitation de votre ordinateur, dans le cadre de votre messagerie Web ou d'une autre application de calendrier que vous avez téléchargée. Il est pratiquement impossible de prendre en charge toutes les applications de calendrier disponibles.

Pour vous aider à comprendre sur quels outils de calendrier vous concentrer, jetez un œil à vos données Email Analytics.

Litmus Email Analytics - données du client de messagerie — Exemple de données de client de messagerie de Litmus Email Analytics

Tous les calendriers sont capables d'utiliser un fichier ICS pour y ajouter de nouveaux événements. Mais cela oblige les gens à télécharger d'abord le fichier ICS, puis à le télécharger dans leur calendrier.

Cependant, dans Gmail, Office 365 et Outlook.com, vous pouvez également ajouter des événements à l'aide d'un lien qui inclut automatiquement les détails de votre événement. Cela conduit à une meilleure expérience pour les abonnés, car il suffit d'un clic pour ajouter votre événement à leur calendrier.

Voici un tableau pratique qui résume rapidement quel calendrier accepte quelle méthode Ajouter au calendrier pour vous aider à vous préparer à l'étape suivante.

Méthode « Ajouter au calendrier » par calendrier

Calendrier	Fichier de calendrier ICS	Lien du calendrier
Google Agenda	✓	✓
Outlook.com	✓	✓
AOL	✓	??
Yahoo	✓	??
Bureau 365	✓	✓
Perspectives	✓	??
Calendrier Apple	✓	??

Rappel amical que même s'il serait plus facile pour vous de créer uniquement un fichier de calendrier ICS car il est accepté par la plupart des clients de messagerie, ce n'est pas plus facile pour vos abonnés .

La personnalisation du lien du calendrier pour chaque client de messagerie augmente les chances que vos abonnés ajoutent réellement votre événement à leur calendrier (et y participent et se convertissent !) puisqu'il suffit d'un clic. Faire en sorte que quelqu'un ajoute un fichier ICS à son calendrier nécessite plus d'étapes et vous risquez de perdre des personnes en cours de route.

Étape 2 : Créez les liens et les fichiers du calendrier

Selon les clients de messagerie que vos abonnés utilisent pour lire les e-mails, vous pouvez choisir de créer un fichier de calendrier ICS, un lien de calendrier ou les deux.

Fichiers de calendrier ICS

Étant donné que les fichiers ICS alimentent les liens pour de nombreuses applications de calendrier, c'est toujours une excellente solution de secours.

Pour commencer, nous recommandons cet outil iCalendar Event Maker pour générer les fichiers. Il vous permet d'ajouter toutes les informations que vos abonnés peuvent avoir besoin de connaître sur l'événement, telles que l'emplacement, la description et une URL. Vous pouvez même être plus précis avec votre événement, le répéter ou ajouter des notifications pour votre invité.

Une fois que votre public a ajouté votre fichier à son calendrier, il dispose des détails qui indiquent clairement à quoi sert l'événement. Et cela leur rappelle pourquoi l'événement est dans leur calendrier.

Liens du calendrier

Pour créer des liens Ajouter au calendrier pour les calendriers de messagerie Web, nous suggérons l'outil Liens de calendrier d'Amit Agarwal. Il générera toutes les URL que vous devrez inclure dans votre e-mail pour le calendrier de chaque personne.

Il y a un inconvénient à cet outil : vous ne pouvez pas créer d'événements récurrents ou inclure une notification comme vous le pouvez avec les fichiers ICS. Vous pouvez ajouter ces détails aux URL du calendrier, mais vous devrez les créer dans chaque calendrier, auquel vous n'aurez peut-être pas accès.

C'est pourquoi il est recommandé de créer un fichier de calendrier ICS en plus des liens de calendrier.

N'envoyez plus jamais d'e-mail cassé

Empêchez les erreurs de courrier électronique, telles que les liens rompus Ajouter au calendrier, grâce aux tests d'assurance qualité automatiques avec la liste de contrôle Litmus. Envoyez des e-mails sans erreur sur la marque en toute confiance (et protégez la réputation de votre marque).

Commencez votre essai gratuit →

Étape 3 : Codez vos liens Ajouter au calendrier dans votre e-mail

Avant de passer à la partie vraiment amusante (le codage !), vous devez décider comment vous allez présenter votre lien Ajouter au calendrier.

Décidez comment afficher votre bouton Ajouter au calendrier

Comme nous l'avons mentionné précédemment, il existe traditionnellement plusieurs liens Ajouter au calendrier avec le bouton de fichier ICS. Lorsque vous utilisez des boutons dynamiques comme boutons Ajouter au calendrier, vous disposez de deux options différentes :

Afficher un : Vous pouvez cibler le client de messagerie de chaque abonné et afficher dynamiquement le lien spécifique qui correspond à son client de messagerie.
Afficher tout : vous pouvez utiliser un modèle hybride dans lequel le bouton principal d'appel à l'action (CTA) est personnalisé pour le client de messagerie de chaque abonné, et vous fournissez toujours les liens alternatifs du calendrier.

Si vous pouvez personnaliser le lien Ajouter au calendrier pour chaque abonné, vous vous demandez peut-être pourquoi vous voudriez envisager d'afficher les autres liens du calendrier.

Afficher un seul lien ne prend pas en compte les personnes comme, eh bien, moi. J'utilisais souvent ma messagerie professionnelle pour m'inscrire aux e-mails afin de pouvoir voir à quoi ils ressemblaient dans Outlook. Mais je voudrais ajouter l'événement à mon calendrier Gmail personnel. Cela peut être un point de friction pour les gens si un seul lien de calendrier est fourni.

La deuxième option consistant à afficher plusieurs liens de calendrier est un excellent moyen de résoudre ce problème.

Exemple d'e-mail Ajouter au calendrier — Exemple de bouton personnalisé avec liens calendrier

C'est un peu plus compliqué que de simplement masquer et afficher les boutons CTA en fonction des préférences du client de messagerie, mais cela offre la meilleure expérience utilisateur à mon avis, car vous rencontrez l'abonné dans sa boîte de réception, tout en s'adaptant à tout flux de travail qu'il peut avoir.

Créez vos boutons et liens CTA

Alors, maintenant pour la partie amusante : coder le bouton de fichier ICS par défaut. Commencez par cela, car cela fonctionne partout, quel que soit le client de messagerie, l'application ou l'appareil à partir duquel vos abonnés lisent.

Tout d'abord, récupérez le fichier ICS que vous avez créé à l'étape 2 à l'aide de l'outil iCalendar Event Maker. Ensuite, téléchargez-le sur les serveurs de votre entreprise, le système de gestion de contenu (CMS) ou la médiathèque du fournisseur de messagerie.

Il est maintenant temps de créer des boutons. Il existe de nombreuses façons de créer un bouton ; vous pouvez consulter notre Guide ultime des boutons pare-balles pour quelques-uns d'entre eux. Ces jours-ci, nous sommes un fan du bouton accessible de Mark Robbins, voici donc un exemple que vous pouvez utiliser :

<a href="https://campaigns.litmus.com/_email/test/newnewyork.ics" class="cta btn-yellow" style="background-color: #F4D66C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-decoration: none; padding: 14px 20px; color: #1D2025; border-radius: 5px; display:inline-block; mso-padding-alt:0; box-shadow:0 3px 6px rgba(0,0,0,.2);"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt"> </i><![endif]--><span style="mso-text-raise:15pt;">Add to your Calendar</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a>

Ensuite, créez les URL des liens de calendrier de l'autre client de messagerie que vous prévoyez d'utiliser et placez-les sous le bouton que vous venez de créer :

<p style="font-family: Helvetica, Arial, sans-serif; color: #fdfdfd; font-size: 18px; line-height: 24px; margin: 20px 0 0 0;">
     <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Outlook.com</a> |
                       	 
     <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Office 365</a> |
                   	 
     <a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220112T180000Z%2F20220112T200000Z&details=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&location=New%20Earth&text=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Google</a>
</p>

Enfin, enveloppez le tout dans une balise <div> afin de pouvoir le cibler pour la personnalisation :

<div class="default">
     <a href="https://campaigns.litmus.com/_email/test/newnewyork.ics" class="cta btn-yellow" style="background-color: #F4D66C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-decoration: none; padding: 14px 20px; color: #1D2025; border-radius: 5px; display:inline-block; mso-padding-alt:0; box-shadow:0 3px 6px rgba(0,0,0,.2);"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt"> </i><![endif]--><span style="mso-text-raise:15pt;">Add to your Calendar</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a>
     <p style="font-family: Helvetica, Arial, sans-serif; color: #fdfdfd; font-size: 18px; line-height: 24px; margin: 20px 0 0 0;">
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Outlook.com</a> |
                       	 
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Office 365</a> |
                       	 
          <a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220112T180000Z%2F20220112T200000Z&details=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&location=New%20Earth&text=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Google</a>
     </p>
</div>

Ciblez le bon public avec le bon lien de calendrier

Pour chaque client de messagerie que vous souhaitez cibler, vous devrez créer une nouvelle version du bloc de contenu <div> que vous avez créé ci-dessus, mais avec le lien de calendrier approprié du client de messagerie ciblé comme bouton Ajouter au calendrier CTA, puis en déplaçant le liens de calendrier supplémentaires en dessous.

Enfin, utilisez CSS pour cibler des clients de messagerie spécifiques et montrez-leur leur contenu spécifique au client tout en masquant le contenu par défaut. Conseil de pro : placez chaque CSS de ciblage dans son propre bloc de style, car il est connu que leur ajout au bloc de style principal perturbe le ciblage.

Alors, quels clients de messagerie pouvez-vous cibler ?

Gmail
Bureau 365
Outlook.com
Yahoo*
AOL*

Vous pouvez également cibler le client de bureau pour Outlook, mais comme cela utiliserait de toute façon le bouton par défaut, vous n'avez pas besoin de le cibler pour une fois. (Waouh !)

Passons maintenant aux détails de la façon de cibler chaque client de messagerie (et consultez notre note mise à jour pour Yahoo et AOL).

Gmail

Le bloc de contenu que vous allez afficher pour Gmail a l'URL de Google Calendar comme bouton principal. Faites défiler les autres liens sous le bouton pour inclure le fichier ICS. De plus, vous devez masquer tout le bloc à tous les autres, alors ajoutez la propriété d'affichage avec une valeur de none à la balise <div> et enveloppez le tout dans un code conditionnel pour le masquer dans Outlook.

Le résultat ressemble à ceci :

<!--Gmail Button-->
<!--[if (gte mso 9)|(IE)]><!-->
<div class="gmail" style="display: none;">
     <a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220112T180000Z%2F20220112T200000Z&details=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&location=New%20Earth&text=Welcome%20to%20the%20Motorway" class="cta btn-yellow" style="background-color: #F4D66C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-decoration: none; padding: 14px 20px; color: #1D2025; border-radius: 5px; display:inline-block; mso-padding-alt:0; box-shadow:0 3px 6px rgba(0,0,0,.2);"><span style="mso-text-raise:15pt;">Add to your Google Calendar</span></a>
                       	 
     <p style="font-family: Helvetica, Arial, sans-serif; color: #fdfdfd; font-size: 18px; line-height: 24px; margin: 20px 0 0 0;">
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Outlook.com</a> |
                       	 
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Office 365</a> |
                       	 
          <a href="https://campaigns.litmus.com/_email/test/newnewyork.ics" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Apple Mail/Outlook Desktop</a>
     </p>
</div>                   	 
<!--<![endif]-->

Gmail remplace automatiquement le doctype par <u></u>. Celui-ci est placé à côté d'un élément <div> qui hérite de la classe et de l'ID de la balise <body>. Utilisez donc les éléments suivants pour cibler le contenu dans Gmail :

u + .body .foo {}

Le bloc de style pour masquer la valeur par défaut et afficher le bouton Gmail ressemble à ceci :

<!--gmail styles-->
<style>
     u + .body .gmail { display: block !important; }
     u + .body .default { display: none !important; }
</style>

Outlook.com et Office 365

Le bloc pour Outlook.com (Outlook Web App ou OWA) et Office 365 ressemble au bloc Gmail avec des modifications mineures : la classe et le cycle des URL du bouton et du lien pour prendre en compte le nouveau client ciblé.

Il peut y avoir une certaine confusion car Office 365 possède à la fois un client de bureau et un client de messagerie Web. Cependant, le ciblage ne s'applique qu'au client de messagerie Web Outlook qui garantit que le bouton principal pour les liens du client de bureau vers le fichier ICS tandis que dans le client de messagerie Web, il s'agit de l'URL du lien du calendrier.

Les messages Web Outlook.com et Office 365 préfixent les noms de classe avec x_ mais ne le font pas sur le sélecteur d'attributs. Ainsi, votre bloc <div> peut être ciblé avec :

[class="x_foo"] {}

… et cela ne s'appliquera qu'au client de messagerie Web Outlook. Par conséquent, le bloc de style pour le client de messagerie Web Outlook ressemble à ceci :

<!--owa styles-->
<style>
     [class~="x_outlook"] { display: block !important; }
     [class~="x_default"] { display: none !important; }
</style>

Yahoo et AOL

Yahoo avait l'habitude d'avoir un lien de calendrier, mais lors de nos derniers tests, le lien vous amène à une page de calendrier pour ajouter un événement, mais aucun des détails de l'événement n'est plus reporté.

Cela peut être dû à un changement chez Yahoo. Étant donné qu'AOL et Yahoo appartiennent tous deux à Verizon, ils peuvent rationaliser les clients de messagerie pour les aligner davantage les uns sur les autres.

Bien que vous puissiez toujours cibler spécifiquement Yahoo et AOL, ils ne prennent désormais en charge que le fichier ICS. Alors économisez du temps et utilisez simplement le code Ajouter au calendrier par défaut partagé au début de l'étape 3 dans cet article de blog jusqu'à nouvel ordre.

Voir ces liens « Ajouter au calendrier » en action

Ainsi, bien que le code ci-dessus soit magnifique, vous vous demandez probablement à quoi il ressemble lorsqu'il est implémenté dans un e-mail réel. Heureusement pour vous, nous l'avons codé dans Litmus Builder afin que vous puissiez voir à quoi ressemblent le bouton Ajouter au calendrier et les liens en direct et comment ils s'affichent sur différents clients de messagerie et appareils.

Maintenant, offrez à vos invités ce traitement spécial par e-mail !

Assurez-vous que vos e-mails d'événement semblent corrects

Les e-mails brisés signifient moins de conversions, comme les personnes qui ajoutent votre événement à leur calendrier. Aïe. Prévenez les erreurs de courrier électronique et protégez la réputation de votre marque avec les aperçus par courrier électronique Litmus et plus encore.

Commencez votre essai gratuit →

Cet article de blog a été initialement publié le 8 mai 2019 par Jaina Mistry. Il a été mis à jour le 5 février 2021, pour plus de clarté et avec de nouvelles informations.