Aller au contenu principal

Widget de site web

Ajoutez ce widget au site web de votre studio et vos visiteurs peuvent parcourir votre planning de cours en direct, vos prestations de rendez-vous, vos formules d'abonnement et vos produits de détail — et réserver ou acheter, directement depuis votre site — sans quitter votre page.

Libellé de navigation — Widget de site web (onglet Paramètres) : EN: Website Widget · IT: Widget del sito web · FR: Widget du site web · DE: Website-Widget · ES: Widget del sitio web · PT: Widget do site · NL: Website-widget

Avant de commencer​

Le widget de site web est un petit panneau intégrable comportant jusqu'à quatre onglets — Calendrier, Rendez-vous, Abonnements et Produits — chacun s'appuyant sur les mêmes données publiques que celles que voient vos clients sur l'application mobile ; de plus, un visiteur peut créer un compte, se connecter, réserver un cours ou un rendez-vous, et acheter un abonnement ou un produit, le tout à l'intérieur du widget lui-même.

Vous aurez besoin :

  • D'un accès aux Paramètres dans l'application de bureau Agon (studio manager uniquement).
  • De la possibilité de coller un extrait de HTML dans l'éditeur de votre site web (Squarespace, Wix, WordPress ou un site sur mesure fonctionnent tous — partout où vous pouvez ajouter un bloc « intégration » ou « HTML » personnalisé).

Ce que le widget affiche​

Une fois intégré, le widget affiche un en-tête avec le nom de votre studio et votre couleur d'accent de marque, ainsi qu'une barre d'onglets comportant jusqu'à quatre onglets :

  • Calendrier — chaque cours planifié à venir : nom, date et heure, instructeur (lorsqu'il est affecté), et le nombre de places restantes (ou « Complet »). Cliquer sur un cours ouvre son détail, avec un bouton Réserver (ou Rejoindre la liste d'attente, une fois complet).
  • Rendez-vous — vos prestations de rendez-vous actives. Cliquer sur l'une d'elles ouvre un parcours de réservation étape par étape : choisir un instructeur, choisir une date, choisir un créneau disponible.
  • Abonnements — chaque formule d'abonnement à la fois active et marquée comme vendable en ligne, avec un bouton Acheter sur chacune.
  • Produits — votre catalogue de détail (produits actifs avec du stock disponible), avec un bouton Acheter sur chacun. Il n'y a pas de panier — chaque clic sur Acheter démarre son propre paiement pour une unité de ce produit.

Il n'affiche jamais les listes de participants ni les coordonnées des instructeurs — seulement ce qu'un visiteur pourrait raisonnablement voir ou faire depuis votre site web public.

Réserver ou acheter nécessite un compte​

Parcourir tous les onglets est toujours public — aucune connexion requise. Dès qu'un visiteur clique sur Réserver, Rejoindre la liste d'attente, Acheter (abonnement) ou Acheter (produit), une fenêtre de connexion/inscription s'ouvre s'il n'est pas déjà connecté. L'inscription ne demande qu'un e-mail, un mot de passe et un nom complet ; se connecter ou s'inscrire achève automatiquement l'action d'origine — le visiteur n'a jamais à cliquer deux fois. Cette session n'existe que dans la mémoire de l'onglet du navigateur : actualiser la page, ou fermer et rouvrir le widget, déconnecte à nouveau le visiteur (un choix délibéré — le widget ne stocke jamais de session dans localStorage ni dans un cookie, puisqu'il s'exécute à l'intérieur d'un iframe en bac à sable sur une page qu'Agon ne contrôle pas).

Réserver un cours ou un rendez-vous déduit un crédit d'abonnement exactement comme dans l'application mobile. Acheter un abonnement ou un produit ouvre le paiement hébergé de Stripe dans un nouvel onglet de navigateur (pas à l'intérieur du widget) — le visiteur y effectue le paiement, et cet onglet affiche une simple confirmation de réussite/annulation et peut être fermé une fois terminé.

Trouver votre extrait d'intégration​

  1. Ouvrez l'application de bureau Agon et allez dans Paramètres.

  2. Cliquez sur l'onglet Widget de site web.

  3. Copiez l'extrait d'intégration qui y est affiché. Il ressemble à ceci :

    <iframe
      src="https://your-tunnel-url.trycloudflare.com/widget/your-public-studio-id"
      sandbox="allow-scripts allow-forms allow-same-origin allow-popups">
    </iframe>

  4. Collez l'extrait dans le bloc HTML/intégration de votre site web, exactement tel que copié — y compris l'attribut sandbox. Ne le retirez pas et ne le raccourcissez pas : allow-popups en particulier est requis pour l'onglet de paiement Stripe décrit ci-dessus, et le reste correspond aux permissions minimales dont le widget a besoin pour s'exécuter en toute sécurité sur votre page.

L'ajouter à votre site web​

Les étapes exactes dépendent de votre créateur de site, mais le principe est le même partout :

  1. Dans l'éditeur de votre site web, ajoutez un nouveau bloc « Intégration », « HTML » ou « Code personnalisé » à la page où vous voulez que le widget apparaisse.
  2. Collez l'extrait que vous avez copié depuis Paramètres → Widget de site web.
  3. Enregistrez et publiez la page.
  4. Visitez votre site web en ligne et vérifiez qu'il se charge avec le planning de votre studio.

N'intégrer qu'un seul onglet​

Par défaut, l'extrait intègre les quatre onglets avec la barre d'onglets visible. Pour n'en intégrer qu'un — par exemple, seulement le calendrier des cours sur votre page d'accueil, sans barre d'onglets et sans possibilité de changer d'onglet — ajoutez un paramètre de requête ?widget= à l'URL src avec l'une de ces valeurs : calendar, appointments, memberships ou products. Par exemple :

<iframe
  src="https://your-tunnel-url.trycloudflare.com/widget/your-public-studio-id?widget=calendar"
  sandbox="allow-scripts allow-forms allow-same-origin allow-popups">
</iframe>

C'est entièrement facultatif — laissez l'extrait exactement tel que copié depuis les Paramètres si vous voulez le widget complet à quatre onglets.

Important : votre extrait change au redémarrage de votre backend Agon​

L'adresse de tunnel de votre studio (la partie https://...trycloudflare.com de l'extrait) est temporaire par conception — elle est générée à neuf à chaque redémarrage de votre backend Agon, et l'ancienne adresse cesse de fonctionner. Ce n'est pas un bug.

Chaque fois que vous redémarrez votre backend Agon (ou votre ordinateur), retournez dans Paramètres → Widget de site web, copiez le nouvel extrait et mettez-le à jour sur votre site web. Tant que vous ne le faites pas, le widget de votre site en ligne affichera une erreur aux visiteurs au lieu de votre planning. Si vous avez personnalisé l'extrait avec un paramètre ?widget= (voir ci-dessus), rajoutez-le au nouvel extrait — les Paramètres vous donnent toujours l'URL simple, du widget complet.

Si vous avez besoin d'une adresse permanente qui ne change jamais, cela nécessite une configuration payante de Cloudflare Tunnel plutôt que le Quick Tunnel gratuit qu'Agon utilise par défaut — ce n'est pas quelque chose qu'Agon configure automatiquement aujourd'hui.

Que faire si quelque chose ne fonctionne pas ?​

Le widget affiche « Studio introuvable » sur mon site web Votre extrait d'intégration est obsolète — le plus probablement parce que votre backend Agon a redémarré et a obtenu une nouvelle adresse de tunnel. Allez dans Paramètres → Widget de site web, copiez l'extrait actuel et remplacez celui de votre site web.

Le widget n'affiche aucun cours, ou moins que prévu L'onglet Calendrier n'affiche que les cours encore à venir (pas déjà commencés) et toujours au statut « planifié ». Les cours annulés et les cours déjà passés n'apparaîtront pas. Consultez la page Cours pour vérifier que le cours est planifié correctement.

Mon créateur de site ne me laisse pas coller un bloc <iframe> ou « Code personnalisé » Certains créateurs de sites restreignent le HTML personnalisé sur les formules gratuites. Vérifiez la formule de votre créateur de site — la plupart (Squarespace, Wix, WordPress) exigent au moins leur premier palier payant pour ajouter du code d'intégration personnalisé.

Un visiteur dit qu'il ne s'est rien passé après avoir cliqué sur Acheter Le paiement Stripe s'ouvre dans un nouvel onglet de navigateur, pas à l'intérieur du widget lui-même — le visiteur a peut-être un bloqueur de fenêtres surgissantes qui l'en empêche, ou n'a peut-être pas remarqué le nouvel onglet. Demandez-lui de vérifier s'il y a une notification de fenêtre surgissante bloquée, ou de vérifier les autres onglets ouverts de son navigateur.

Un visiteur s'est inscrit dans le widget mais dit qu'il ne peut pas se connecter à l'application mobile Il devrait pouvoir — s'inscrire via le widget crée le même type de compte client que s'inscrire via l'application mobile, avec l'e-mail et le mot de passe qu'il a saisis.

Le widget semble cassé ou sans style sur mon site Assurez-vous d'avoir copié tout l'extrait, y compris l'attribut sandbox, et de ne pas avoir modifié par erreur l'URL src. Si l'adresse de tunnel a changé depuis votre dernière copie, recopiez un nouvel extrait depuis Paramètres → Widget de site web.

Pages associées​