Enfin, un Add to Calendar Button fonctionnel

Le cas d’utilisation est assez simple dans de nombreux cas : permettre aux utilisateurs d’ajouter un événement à leur calendrier préféré via un bouton ou un lien.
Pourtant, ce cas simple comporte de nombreux pièges et problèmes, tandis que la plupart des scripts sur le web finissent par ne plus fonctionner tôt ou tard.

Voici l’histoire de la façon dont nous avons développé notre technologie Add to Calendar Button de classe mondiale, qui alimente nos services chez Add to Calendar PRO.

Si vous êtes seulement intéressé par la solution fonctionnelle, vous pouvez directement aller sur notre page d’accueil et la découvrir !

💡 Comment tout a commencé

En 2021, j’étais sur le point d’organiser mon mariage.

Super !
Mais cela implique des obligations et des implications. L’une d’elles a été la création d’un site web pour informer les invités de la date.
Oui, nous avons économisé sur la carte imprimée « save-the-date » et avons voulu utiliser un site web à la place.

Pour construire ce site web, il me fallait inclure un moyen simple pour que les utilisateurs puissent ajouter cet événement à leur calendrier. Comme je ne voulais vraiment pas passer trop de temps là-dessus, je cherchais un script ou un package facile à utiliser, peu importe le type.

😓 Le Problème

Je n’ai rien trouvé qui corresponde à mes exigences.

En gros, tous les packages gratuits et codes que vous trouvez sont en quelque sorte obsolètes. Ils utilisent soit des schémas très anciens, plus supportés, soit il leur manque des fonctionnalités de base comme la création d’un fichier iCal/ics.
Si vous pensez en avoir trouvé un, attendez qu’une personne l’utilise sur une « configuration étrange » comme Chrome sur iOS.

De l’autre côté, j’ai trouvé environ 2545 références à addevent.com.

Par « références », je veux dire des résultats Google, mais encore plus, des codepens. Là, beaucoup de gens (ou de faux gens ? 🙊) ont simplement placé le code pour intégrer le bouton de base d’addevent. Je ne suis pas sûr pourquoi on mettrait ça sur codepen, sauf pour ses propres raisons SEO - ce qui est embêtant pour quelqu’un qui cherche des conseils.

Le problème avec AddEvent (et aussi les concurrents plus récents, comme Calendarlink) :
Ils ont une offre gratuite, mais celle-ci limite le bouton à un nombre assez faible de clics, ce qui n’aurait pas fonctionné - même pour mon petit événement de mariage. Donc, je dirais même que c’est complètement inutile, sauf si utilisé uniquement à des fins de test. Et même avec la version payante, c’est toujours limité (bien caché dans leurs termes 🤨) et cela peut facilement ruiner votre budget (mais c’est une autre histoire).

Ils ont quelques fonctionnalités supplémentaires sympas, mais je n’en avais pratiquement pas besoin - aucune d’entre elles. Et je voulais ajouter une meilleure UI/UX.

J’ai fini par créer mon propre bouton et le mettre en open source, afin que d’autres personnes puissent bénéficier de mon travail et peut-être même proposer de nouvelles idées géniales.

📝 Définir les exigences

• UI/UX sympa
• Fonctionne sur Desktop et Mobile
• Prend en charge tous les calendriers modernes
• Génère un fichier iCal/ics à la volée pour prendre en charge tous les autres calendriers (partie importante ici : le générer et ne pas nécessiter qu’un fichier soit créé manuellement au préalable)

Semble simple.
Mais quand même, il y a mille mises en garde au niveau du détail et, comme toujours, quand vous commencez à construire une telle chose, beaucoup de besoins supplémentaires apparaissent un par un.

Quand vous décidez d’en faire un projet open source, vous devez aussi penser aux autres utilisateurs (alias développeurs). Comment vont-ils utiliser votre code ? Quel est leur niveau de compétence ? Quelles seront leurs attentes ? Pour qui construisez-vous cela ?

Pour être honnête, c’était la partie la plus difficile !
J’avais toujours en tête le codeur amateur plutôt inexpérimenté. Ces personnes devraient pouvoir utiliser ce code facilement. En ajoutant simplement quelques fichiers css et js à leur code. Sans se soucier d’autre chose. Il suffit que cela fonctionne.
D’un autre côté, pour le rendre également attrayant pour d’autres développeurs, il devrait être conforme à leurs environnements de travail quotidiens. Je pensais à des frameworks/bibliothèques modernes JavaScript, comme Angular ou React.
Ainsi, il serait nécessaire de mettre ce projet sur npm. Et importer des scripts dans ces projets fonctionne un peu différemment que d’ajouter un simple morceau de code sur une page HTML.

En termes d’exigences supplémentaires, vous devez différencier (en regardant les publics cibles) entre les exigences fonctionnelles et techniques.

Du côté fonctionnel, toute configuration devrait pouvoir se faire facilement en ajoutant une simple structure HTML. On pourrait également voir cela comme une exigence technique, mais pour moi, cela fait partie de l’expérience utilisateur d’une certaine manière.

En regardant les événements que l’on souhaiterait utiliser ; ils peuvent commencer à tout moment, se terminer à tout moment. Ils peuvent durer toute la journée ou avoir des horaires spécifiques. Mais vous devez aussi prendre en compte différents fuseaux horaires !
Avez-vous déjà travaillé avec des fuseaux horaires ? Chose folle - nous avons donc créé notre propre bibliothèque pour cela, rendant notre service encore plus stable pour un public mondial.
Ajouter le sujet, la description et le lieu d’un événement semble évident.
Mais qu’en est-il des options d’ajout au calendrier ? Peut-être que l’on ne veut pas offrir Yahoo Calendar et garder les choses simples ?
Concernant l’interaction, je considère que le survol est un bon déclencheur pour ouvrir le menu déroulant. Peut-être, dans d’autres cas, que le clic serait un meilleur déclencheur !
Enfin et surtout, peut-être qu’un utilisateur ne veut pas en faire un événement statique, mais le garder flexible - en étant toujours à 10 jours de la date actuelle ?

Encore sur le plan technique, j’ai senti qu’il devrait être documenté à un niveau très détaillé. Personnellement, je détestais ça à mes débuts, quand le code n’était pas documenté (correctement ou pas du tout).
Le code doit être bien structuré, mais toujours facilement lisible ! Cela signifie que le diviser en trop de choses abstraites pourrait trop confuser les gens - même si cela pourrait rendre le code plus propre (entre-temps, la base de code a un peu trop grandi pour encore répondre à cette exigence, mais c’est sur la feuille de route).

🛠️ Le construire

Arriver à la première version était la partie assez facile.
Le monde a maintenant un Add to Calendar Button qui fonctionne réellement - et peut être implémenté en moins d’une minute !

Nous avons eu un mariage génial - et un site web - et j’ai reçu beaucoup de retours positifs de la part de la communauté sur GitHub. Je l’ai même mis sur ProductHunt, en faisant le produit #1 du jour et j’ai reçu encore plus de retours.
De nombreux autres développeurs ont partagé leurs pensées et idées.

Au fil du temps, de plus en plus de personnes m’ont approché, demandant une solution encore plus simple.
Cela provenait bien sûr de non-développeurs. Mais même au niveau technique, les gens demandaient des services supplémentaires, comme la gestion des RSVP, ce qui nécessiterait une solution logicielle complète au lieu du snippet JavaScript.
Il y a encore plus de problèmes avec le Add to Calendar Button open source gratuit, ce qui est en quelque sorte voulu par conception. Les fichiers Ics sont générés côté client, directement dans le navigateur de l’utilisateur. Cela fonctionne bien dans 90% des cas, mais échoue pour tous les autres. Normalement à cause d’environnements restrictifs, de plugins de sécurité du navigateur et d’autres choses étranges.

Add to Calendar PRO est né - du moins en tant qu’idée.

🚀 Passage à la version PRO

Fin 2023, nous avons lancé notre nouveau service et notre entreprise, rendant les Add to Calendar Button, la génération de fichiers ics, la gestion des RSVP et plus accessibles à tout le monde - que vous soyez développeur, organisateur d’événements, ou en train de planifier votre propre mariage.
Nous avons fixé un prix juste et transparent et avons rendu de nombreuses personnes très heureuses depuis lors.

Add to Calendar Buttons fonctionnent encore mieux de cette façon, car vous bénéficiez de la stabilité et de la nature transparente du code open source, tout en ayant une solution entièrement gérée, avec une application web facile sans code, où vous pouvez gérer et définir vos événements sans aucune connaissance technique.

Grâce au support serveur, les fichiers ics sont parfaitement rendus, tandis que nous vérifions même à l’avance le fournisseur de calendrier (par exemple, Yahoo est parfois indisponible) et guidons l’utilisateur vers des alternatives si quelque chose ne va pas.

Et nous n’avons pas encore fini. Restez à l’écoute !

Testez notre offre sans aucun risque et gratuitement !
→ Inscrivez-vous ici…