Comment ajouter un bouton « Ajouter au calendrier » à votre site web [Guide 2026]

Vous avez construit une page d'événement. Les gens la visitent. Ils lisent les détails, et peut-être même s'enthousiasment. Puis ils partent, oublient et ne viennent jamais.

La solution tient en un bouton. Un seul bouton — « Ajouter au calendrier » — qui place votre événement sur leur téléphone, dans leur agenda quotidien, avec un rappel qui se déclenche automatiquement. Les événements dotés d'un bouton d'ajout au calendrier affichent un taux de participation de 20 à 40 % plus élevé que ceux qui n'en ont pas.

Ce guide couvre quatre façons d'ajouter un bouton « Ajouter au calendrier » à votre site web, du HTML brut aux widgets tiers en passant par les pages d'événement qui s'en chargent pour vous. Exemples de code inclus.

Pourquoi les boutons « Ajouter au calendrier » sont incontournables

Si vous organisez des événements — webinaires, meetups, lancements de produits, permanences — le bouton d'ajout au calendrier est l'élément au plus fort ROI de votre page.

Voici ce que les données révèlent :

La psychologie est simple : une entrée de calendrier transforme un vague « j'irai peut-être » en un engagement. L'événement apparaît dans leur agenda quotidien. Leur téléphone leur rappelle. Ils planifient leur journée autour. Le bouton est le pont entre l'intérêt et la présence.

Vous en passer revient à compter sur la mémoire des gens — et ils vont oublier.

Méthode 1 : HTML + JavaScript (approche manuelle)

L'approche DIY. Vous construisez les URL de calendrier pour chaque fournisseur et vous les présentez sous forme de boutons. Contrôle total, coût nul, effort maximal.

Bouton Google Calendar

Google Calendar accepte les événements via paramètres d'URL. Voici un exemple fonctionnel :

<a
  href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Product+Launch+Webinar&dates=20260415T180000Z/20260415T193000Z&details=Join+us+for+the+Q2+product+launch.+Link:+https://example.com/join&location=https://zoom.us/j/123456"
  target="_blank"
  rel="noopener noreferrer"
  class="calendar-btn"
>
  Ajouter à Google Calendar
</a>

Bouton Outlook

Outlook Web et Office 365 utilisent des URL de base différentes. Vous avez besoin des deux :

<!-- Outlook personnel -->
<a
  href="https://outlook.live.com/calendar/0/deeplink/compose?subject=Product+Launch+Webinar&startdt=2026-04-15T18:00:00Z&enddt=2026-04-15T19:30:00Z&body=Join+us+for+the+Q2+product+launch.&location=https://zoom.us/j/123456"
  target="_blank"
  rel="noopener noreferrer"
  class="calendar-btn"
>
  Ajouter à Outlook
</a>

<!-- Office 365 -->
<a
  href="https://outlook.office.com/calendar/0/deeplink/compose?subject=Product+Launch+Webinar&startdt=2026-04-15T18:00:00Z&enddt=2026-04-15T19:30:00Z&body=Join+us+for+the+Q2+product+launch.&location=https://zoom.us/j/123456"
  target="_blank"
  rel="noopener noreferrer"
  class="calendar-btn"
>
  Ajouter à Office 365
</a>

Bouton Yahoo Calendar

<a
  href="https://calendar.yahoo.com/?v=60&title=Product+Launch+Webinar&st=20260415T180000Z&et=20260415T193000Z&desc=Join+us+for+the+Q2+product+launch.&in_loc=https://zoom.us/j/123456"
  target="_blank"
  rel="noopener noreferrer"
  class="calendar-btn"
>
  Ajouter à Yahoo Calendar
</a>

Implémentation JavaScript complète

Voici une fonction réutilisable qui génère les quatre URL de calendrier à partir d'un seul objet événement :

function generateCalendarLinks(event) {
  const { title, start, end, description, location } = event;

  // Format de date pour Google/Yahoo : YYYYMMDDTHHmmSSZ
  const formatGoogleDate = (date) =>
    date.toISOString().replace(/[-:]/g, "").replace(/\.\d{3}/, "");

  // Format de date pour Outlook : ISO 8601
  const formatOutlookDate = (date) => date.toISOString();

  const googleStart = formatGoogleDate(start);
  const googleEnd = formatGoogleDate(end);
  const outlookStart = formatOutlookDate(start);
  const outlookEnd = formatOutlookDate(end);

  return {
    google: `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&dates=${googleStart}/${googleEnd}&details=${encodeURIComponent(description)}&location=${encodeURIComponent(location)}`,

    outlook: `https://outlook.live.com/calendar/0/deeplink/compose?subject=${encodeURIComponent(title)}&startdt=${outlookStart}&enddt=${outlookEnd}&body=${encodeURIComponent(description)}&location=${encodeURIComponent(location)}`,

    office365: `https://outlook.office.com/calendar/0/deeplink/compose?subject=${encodeURIComponent(title)}&startdt=${outlookStart}&enddt=${outlookEnd}&body=${encodeURIComponent(description)}&location=${encodeURIComponent(location)}`,

    yahoo: `https://calendar.yahoo.com/?v=60&title=${encodeURIComponent(title)}&st=${googleStart}&et=${googleEnd}&desc=${encodeURIComponent(description)}&in_loc=${encodeURIComponent(location)}`,
  };
}

// Utilisation
const event = {
  title: "Product Launch Webinar",
  start: new Date("2026-04-15T18:00:00Z"),
  end: new Date("2026-04-15T19:30:00Z"),
  description: "Join us for the Q2 product launch. Link: https://example.com/join",
  location: "https://zoom.us/j/123456",
};

const links = generateCalendarLinks(event);

Styliser les boutons

.calendar-btn {
  display: inline-block;
  padding: 10px 20px;
  margin: 4px;
  border-radius: 6px;
  background: #1a73e8;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.calendar-btn:hover {
  background: #1557b0;
}

Le problème de cette approche

Cela fonctionne, mais la maintenance est pénible :

• Quatre formats d'URL différents. Chaque calendrier a ses propres noms de paramètres, formats de date et particularités.
• Pas de prise en charge d'Apple Calendar. Apple n'accepte pas la création d'événement par URL. Il vous faut une approche distincte via fichier ICS.
• Conversion manuelle des fuseaux horaires. Toutes les URL exigent l'UTC. Si votre événement a lieu à 14 h heure de l'Est, vous devez convertir vous-même.
• Aucun suivi. Vous n'avez aucune visibilité sur le nombre réel de clics.
• Fragile. Une seule faute de frappe dans un paramètre de date et l'événement apparaît au mauvais moment — ou pas du tout.

Pour un événement unique et statique, cette approche est acceptable. Pour tout ce qui est récurrent ou à grande échelle, elle devient un fardeau de maintenance.

Méthode 2 : téléchargement d'un fichier ICS

Le format .ics est la norme universelle des calendriers. Toutes les grandes applications de calendrier — Google, Apple, Outlook, Yahoo — peuvent l'importer. C'est aussi la seule façon de prendre en charge Apple Calendar depuis un site web.

Créer le fichier ICS

BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//Your Company//Event//EN
CALSCALE:GREGORIAN
METHOD:PUBLISH
BEGIN:VEVENT
DTSTART:20260415T180000Z
DTEND:20260415T193000Z
SUMMARY:Product Launch Webinar
DESCRIPTION:Join us for the Q2 product launch.\nLink: https://example.com/join
LOCATION:https://zoom.us/j/123456
STATUS:CONFIRMED
UID:product-launch-20260415@example.com
END:VEVENT
END:VCALENDAR

Servir le fichier depuis votre site

Enregistrez le fichier sous event.ics sur votre serveur et reliez-le :

<a href="/events/event.ics" class="calendar-btn">
  Ajouter au calendrier (Apple, Outlook, Google)
</a>

Votre serveur doit renvoyer le bon type MIME. Sous Apache :

AddType text/calendar .ics

Sous Nginx :

types {
  text/calendar ics;
}

Générer des fichiers ICS dynamiquement (Node.js)

function generateICS(event) {
  const formatDate = (date) =>
    date.toISOString().replace(/[-:]/g, "").replace(/\.\d{3}/, "");

  return `BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//YourApp//Events//EN
CALSCALE:GREGORIAN
METHOD:PUBLISH
BEGIN:VEVENT
DTSTART:${formatDate(event.start)}
DTEND:${formatDate(event.end)}
SUMMARY:${event.title}
DESCRIPTION:${event.description.replace(/\n/g, "\\n")}
LOCATION:${event.location}
STATUS:CONFIRMED
UID:${event.id}@yourdomain.com
END:VEVENT
END:VCALENDAR`;
}

// Endpoint Express.js
app.get("/api/event/:id/calendar", (req, res) => {
  const event = getEvent(req.params.id);
  const ics = generateICS(event);

  res.setHeader("Content-Type", "text/calendar");
  res.setHeader("Content-Disposition", `attachment; filename="${event.title}.ics"`);
  res.send(ics);
});

Limites des fichiers ICS

• L'étape de téléchargement ajoute de la friction. Les utilisateurs voient une invite de téléchargement. Sur mobile, cela peut être déroutant.
• Certains clients de messagerie bloquent les pièces jointes .ics pour des raisons de sécurité.
• Aucun suivi. Vous savez que quelqu'un a téléchargé le fichier, mais pas s'il l'a réellement importé.
• La gestion des fuseaux horaires est délicate. La valeur DTSTART doit correspondre exactement à la spécification du fuseau, sinon l'événement apparaîtra à la mauvaise heure.

Méthode 3 : widgets tiers d'ajout au calendrier

Si vous ne voulez pas construire la logique du calendrier vous-même, des services de widgets s'en chargent pour vous. Vous intégrez une balise script ou un snippet de bouton, et les boutons de calendrier sont générés automatiquement.

AddEvent

L'outil d'ajout au calendrier le plus établi. Vous intégrez un widget JavaScript sur votre site, et il affiche un menu déroulant avec les options de calendrier.

<!-- Exemple d'intégration AddEvent -->
<div class="addeventatc">
  Ajouter au calendrier
  <span class="start">04/15/2026 02:00 PM</span>
  <span class="end">04/15/2026 03:30 PM</span>
  <span class="timezone">America/New_York</span>
  <span class="title">Product Launch Webinar</span>
  <span class="description">Join us for the Q2 product launch.</span>
  <span class="location">https://zoom.us/j/123456</span>
</div>
<script src="https://addevent.com/libs/atc/1.6.1/atc.min.js"></script>

Réalité des tarifs : l'offre gratuite propose 100 ajouts au calendrier/mois et 20 abonnés. Les fonctionnalités intéressantes commencent à 36 USD/mois (forfait Small Business). Pour un bouton de calendrier sur votre propre site web.

CalGet

Une alternative plus simple. Créez un bouton, obtenez un snippet, intégrez-le.

Réalité des tarifs : gratuit jusqu'à 50 ajouts au calendrier par événement et 25 abonnés par calendrier. Au-delà, les forfaits payants démarrent à 16 USD/mois. Si votre événement attire 200 inscrits, vous avez déjà dépassé l'offre gratuite quatre fois.

Le problème des widgets

Les deux outils fonctionnent. Mais tous deux ont le même problème de fond : vous payez un abonnement pour ce qui se résume à quelques liens et un menu déroulant.

Pour une entreprise qui organise des événements chaque semaine, AddEvent coûte 432 USD par an. Pour un bouton. Le modèle à l'usage de CalGet pénalise la croissance — plus votre événement réussit, plus vous payez.

Méthode 4 : page d'événement avec ajout au calendrier intégré (Calen)

Il existe une autre approche qui contourne totalement le modèle des widgets. Au lieu d'intégrer des boutons sur votre site existant, vous créez une page d'événement dédiée qui intègre nativement l'ajout au calendrier.

Calen adopte cette approche. Vous créez un événement (titre, date, description, image) et vous obtenez une page d'événement partageable avec des boutons d'ajout au calendrier en un clic pour Google, Apple, Outlook, Yahoo et Office 365.

Fonctionnement

1. Créez votre événement sur Calen (environ 3 minutes)
2. Obtenez une URL partageable : https://calen.events/your-event-slug
3. Les participants visitent la page, cliquent sur « Ajouter au calendrier », choisissent leur calendrier — terminé
4. Liez la page d'événement depuis votre site web, vos e-mails, vos publications sociales

Ce que vous n'avez pas à construire

• La construction des URL de calendrier pour chaque fournisseur
• La génération et l'hébergement des fichiers ICS
• La logique de conversion des fuseaux horaires
• L'interface mobile des boutons de calendrier
• Le suivi et les analyses

Tarifs

Événements illimités. Ajouts au calendrier illimités. Gratuit.

L'offre gratuite inclut jusqu'à 100 abonnés e-mail (les personnes qui vous suivent pour vos futurs événements). Si vous avez besoin de plus d'abonnés, le forfait Pro est à 9,99 USD/mois. Mais la fonctionnalité de base — pages d'événement et ajouts au calendrier — n'a aucun plafond.

C'est la différence clé avec AddEvent et CalGet : aucune limite sur les ajouts au calendrier. Votre événement peut générer 10 ou 10 000 ajouts — le coût est le même.

Intégration sur votre site web

Vous pouvez relier directement votre page d'événement Calen, ou l'intégrer comme lien/bouton sur votre site existant :

<a
  href="https://calen.events/your-event-slug"
  target="_blank"
  rel="noopener noreferrer"
  class="calendar-btn"
>
  Voir l'événement & ajouter au calendrier
</a>

Aucun snippet JavaScript à maintenir. Aucun script tiers chargé sur votre page. Aucun conflit de style entre widget et CSS.

Comparatif : les quatre méthodes

Quand utiliser chaque méthode

Utilisez HTML + JavaScript si : vous êtes développeur et souhaitez un contrôle total, vous avez un ou deux événements statiques, et vous n'avez besoin ni du support Apple Calendar ni du suivi.

Utilisez les fichiers ICS si : vous avez besoin d'une compatibilité universelle incluant Apple, vous êtes à l'aise avec la génération de fichiers et votre audience est suffisamment technique pour gérer un téléchargement.

Utilisez un widget (AddEvent) si : vous êtes une entreprise avec un budget, vous avez besoin d'intégrer le bouton directement sur votre site avec votre charte graphique, et vous voulez une solution clé en main.

Utilisez une page d'événement (Calen) si : vous voulez le chemin le plus rapide entre « j'ai un événement » et « les gens l'ajoutent à leur calendrier ». Pas de code, pas de maintenance, pas de frais à l'ajout.

Bonnes pratiques pour les boutons d'ajout au calendrier

Quelle que soit la méthode choisie, suivez ces règles :

1. Placez le bouton au-dessus de la ligne de flottaison

Le bouton de calendrier doit être l'appel à l'action le plus visible de votre page d'événement ou de votre écran de confirmation. Ni en bas, ni dans une barre latérale. Bien en vue, au centre.

2. Utilisez un libellé de bouton direct

Bon :  « Ajouter au calendrier »
Bon :  « Enregistrer dans Google Calendar »
Bon :  « Ajouter à mon calendrier »

Mauvais :   « Cliquez ici »
Mauvais :   « RSVP »
Mauvais :   « Mettre cet événement en favori »

« Ajouter au calendrier » est la formulation standard reconnue par les utilisateurs. Ne cherchez pas à innover.

3. Prenez en charge plusieurs calendriers

Ne partez pas du principe que tout le monde utilise Google Calendar. Le marché est fragmenté :

Si vous ne proposez qu'un bouton Google Calendar, vous privez plus de la moitié de votre audience d'une expérience en un clic.

4. Incluez le lien de connexion dans l'événement du calendrier

C'est le détail le plus souvent oublié. L'entrée de calendrier doit contenir tout ce dont quelqu'un a besoin pour participer — en particulier l'URL de la réunion. Quand le rappel se déclenche sur leur téléphone 15 minutes avant, le lien de connexion doit être à portée de doigt. Pas de recherche dans les e-mails.

5. Placez aussi le bouton dans votre e-mail de confirmation

Tout le monde n'ajoute pas l'événement à son calendrier immédiatement. Incluez le bouton d'ajout au calendrier dans :

• La page de confirmation d'inscription
• L'e-mail de confirmation
• L'e-mail de rappel 24 heures avant

Trois points de contact. Chacun rattrape les personnes que le précédent a manquées.

6. Testez sur mobile

Plus de 60 % du trafic des pages d'événement provient du mobile. Testez vos boutons de calendrier sur de vrais téléphones. L'expérience de téléchargement d'un fichier ICS sur mobile est particulièrement pénible — un bouton natif (comme celui de Calen) est nettement plus fluide.

7. Ajoutez le balisage Schema.org Event

Si votre page d'événement est sur votre propre domaine, ajoutez des données structurées pour que les moteurs de recherche la comprennent :

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "Product Launch Webinar",
  "startDate": "2026-04-15T18:00:00Z",
  "endDate": "2026-04-15T19:30:00Z",
  "eventAttendanceMode": "https://schema.org/OnlineEventAttendanceMode",
  "eventStatus": "https://schema.org/EventScheduled",
  "location": {
    "@type": "VirtualLocation",
    "url": "https://zoom.us/j/123456"
  },
  "description": "Join us for the Q2 product launch."
}
</script>

Les pages d'événement Calen incluent automatiquement ce balisage.

Démarrage rapide : un bouton en ligne en 3 minutes

Si vous voulez un bouton d'ajout au calendrier fonctionnel aujourd'hui sans écrire de code :

1. Utilisez le générateur de liens de calendrier gratuit pour créer en une étape les liens d'ajout au calendrier pour Google, Apple, Outlook et Yahoo
2. Collez les liens sur votre site sous forme de boutons
3. Terminé

Si vous voulez une page d'événement complète avec ajouts au calendrier, cartes sociales, gestion des abonnés et analyses, créez un événement sur Calen et partagez le lien. Trois minutes, pas de code, aucune limite sur les ajouts au calendrier.

Cessez de perdre des participants entre « intéressé » et « présent ». Un simple bouton change l'équation.

---

Lecture complémentaire :

• Comment créer un lien d'ajout au calendrier (Guide 2026)
• 7 méthodes éprouvées pour réduire l'absentéisme aux événements
• 7 meilleurs créateurs gratuits de pages d'événement — comparatif
• Invitations webinaires : comment doubler le nombre de participants
• 15 façons d'augmenter le taux de participation aux événements
• 20 méthodes gratuites de promotion d'événements
• Comment partager des événements Google Calendar