Comment créer des liens « Ajouter au calendrier » ?

Posté par Jonathan Bengio  le 10/09/19 10:55

illustration-calendrier

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 ».

capture-ecran-ical

Une fenêtre s’ouvre. Entrez les informations relatives à votre événement et sauvegardez.

capture-ecran-ical

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 ».

capture-ecran-ical

Une nouvelle fenêtre va s’ouvrir. Ici, cliquez sur « OK » pour télécharger votre fichier .ics.

capture-ecran-ical

Vous accédez ensuite à une nouvelle fenêtre.

capture-ecran-ical

Enregistrez ensuite le fichier sur votre ordinateur comme avec tout autre fichier. Puis hébergez-le et retenez le lien.

capture-ecran-ical

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).

code_bouton_simple

 

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 »

capture-ecran-kalinka

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.

capture-ecran-kalinka

code_bouton_gevent

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 :

code_bouton_gmail_cache

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.

code_bouton_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)

code_boutons_gmail_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

http://kalinka.tardate.com/

https://ical.marudot.com/

Topics: Événement, tips, emailing, tech, techtips

    Recevez nos derniers articles directement dans votre boîte mail !

    Nos derniers articles