Photo by Estée Janssens on Unsplash
Si vous organisez des événements ou des formations, de manière physique ou virtuelle, vous saurez que l’e-mail est un canal privilégié pour lancer les invitations, les reminders, etc. Et vous savez l'importance de permettre à vos inscrits d'ajouter ces événements à leur calendrier afin de ne pas l'oublier le jour-J. C’est pourquoi aujourd’hui nous allons voir comment créer le fichier « ajouter au calendrier » à implémenter derrière un joli bouton ou une chouette icône dans vos mails ou sur vos landing pages, microsites, etc. En cliquant sur ce bouton, vos prospects ou vos clients pourront directement ajouter votre événement sur leur calendrier.
Créer un FICHIER .ICS « Ajouter à son calendrier »
En premier lieu, il vous faudra créer un fichier .ics, c’est-à-dire un fichier de calendrier, ce format étant universel et utilisé par plusieurs programmes de messagerie et de calendrier (google, Outlook, Apple, etc). C’est un format de fichier texte qui permet de partager des informations relatives à des événements.
Vous pouvez utiliser l’outil Ical pour créer le fichier ICS. Pour cela cliquez sur le lien, et créez un nouvel événement en cliquant sur « +New ».
Une fenêtre s’ouvre. Entrez les informations relatives à votre événement et sauvegardez.
L’événement créé s’affiche au milieu de votre fenêtre. Ici, cliquez dans la case à cocher pour la sélectionner puis et cliquer ensuite sur « √ Generate iCal ».
Une nouvelle fenêtre va s’ouvrir. Ici, cliquez sur « OK » pour télécharger votre fichier .ics.
Vous accédez ensuite à une nouvelle fenêtre.
Enregistrez ensuite le fichier sur votre ordinateur comme avec tout autre fichier. Puis hébergez-le et retenez le lien.
Ensuite vous n’avez plus qu’à créer, au sein de votre un mail ou sur votre landing page, un bouton renvoyant à votre fichier ics (hébergé par exemple sur votre plateforme d’e-mailing, ou de marketing automation).
Créer un fichier google calendar pour Gmail
Vous pouvez également créer un bouton contenant un événement google Calendar, en créant votre lien pour l’événement avec cet outil (Kalinka). Cet outil générera l’URL entière pour faire renvoyer votre bouton à un événement Google.
Remplissez les éléments nécessaires dans les champs prévus et cliquez ensuite sur « Make Google Calendar Link »
Le lien apparaîtra automatiquement dans la fenêtre du bas. Vous pouvez le vérifier en cliquant sur la link. Pour le copier, utilisez le champs «URL ». Copiez-le et utilisez-le pour le href de votre bouton.
Il est également possible de faire apparaître uniquement ce bouton lorsque le mail est ouvert sur la messagerie Gmail. Pour cela il faut ajouter dans le code de votre bouton un attribut de style qui va par défaut ne pas l’afficher :
Ainsi le bouton est part défaut non affiché. Vous pouvez l’afficher uniquement sur la messagerie Gmail, en ajoutant des classes supplémentaires en utilisant le CSS suivant :
u ~ div .event-gmail {
display:block!important;
}
Avec ceci, le CTA correspondant à la classe event-email sera visible que sur Gmail, puisque Gmail converti automatiquement le DOCTYPE de tout email en « u », et le <body> en <div>.
Vous pouvez alors cumuler les deux boutons, le premier renvoyant à votre fichier .ics, qui sera visible partout sauf sur Gmail, et le deuxième renvoyant à votre événement Google Calendrier, visible uniquement sur Gmail.
Avec le CSS correspondant :
// le CSS qui cachera le bouton comprenant le fichier .ics si l’email est ouvert sur Gmail
u ~ div .event {
display:none;
}
// le CSS qui révélera le bouton comprenant le lien Google Calendar si l’email est ouvert sur Gmail
u ~ div . event-gmail {
display:block!important;
}
Etendre la technique à Yahoo ! Mail
Vous pouvez cumuler alors encore un troisième bouton et le rendre uniquement visible sur Yahoo ! Mail. Pour cela, il va falloir créer son URL renvoyant à l’événement Yahoo Calendar.
L’URL va commencer par : http://calendar.yahoo.com/?v=60
Suivi d’un titre : &TITLE=nomdelevent
Suivi d’une description : &DESC=Description+de+l+evenement
Suivi d’une date et d’une heure : &ST=AAAAMMDDTHHMMSS
D’une durée : &DUR=HHMM
Et d’un lieu : &in_loc=Lieu+de+l+evenement
Par exemple, si je veux fêter mon anniversaire le 03 septembre 2019, de 20h à 23h, au Bureau Busybiz. L’URL sera la suivante :
http://calendar.yahoo.com/?v=60&TITLE=Anniversaire+Jonathan&DESC=Jonathan+vous+invite+a+son+anniversaire &ST=20190903T200000&DUR=0300&in_loc=Bureau+Busybiz
Ensuite vous allez créer trois boutons :
- Un bouton visible partout sauf sur Gmail et Yahoo !Mail (nous allons lui attribuer les classes « gmail-hide » et « yahoomail-hide »)
- Un bouton visible uniquement sur Gmail (event-gmail)
- Un bouton visible uniquement sur Yahoo Mail (event-yahoo)
Avec le CSS correspondant :
// class gmail-hide cachée sur Gmail
u ~ div .gmail-hide {
display:none;
}
// class event-gmail révélée sur Gmail
u ~ div .event-gmail {
display:block!important;
}
// class yahoo-hide cachée sur Yahoomail
@media yahoo {
.yahoo-hide {
display:none;
}
// class event-yahoo révélée sur Yahoomail
.event-yahoo {
display:block!important;
}
}
Vous avez maintenant la technique pour créer des boutons "Ajouter au calendrier" ainsi qu'une manière de les superposer afin de s'adapter à l'outil utilisé pour ouvrir les mails, et ajouter aux différent calendriers !
Source et outils :
https://litmus.com/blog/how-to-create-an-add-to-calendar-link-for-your-emails
