Intégrer un iFrame dans un site web WordPress

Vous pouvez intégrer edoobox à WordPress avec le plugin WordPress edoobox ou un iFrame. Ce guide décrit la variante iFrame. Elle convient pour afficher une catégorie précise, une offre individuelle ou une simple vue d’ensemble des offres directement dans une page WordPress.

Pour la variante plugin, utilisez le guide distinct Intégration avec le plugin WordPress.

Préparer la page WordPress

Dans WordPress, ouvrez la page où les offres edoobox doivent apparaître.
Si nécessaire, créez une nouvelle page, par exemple Réserver des cours.
Dans l’éditeur WordPress, ajoutez un bloc HTML personnalisé.

Copier le code iFrame dans edoobox

Dans edoobox, ouvrez le répertoire principal, une catégorie ou une offre individuelle. Sélectionnez Aperçu / Partager, ouvrez la rubrique Intégrer et copiez le code iFrame.

Choisissez délibérément le bon point d’entrée : le répertoire principal donne une vue d’ensemble large, une catégorie affiche uniquement les offres sélectionnées et un lien d’offre mène directement à une offre précise.

Insérer le code dans WordPress

Insérez le code iFrame dans le bloc HTML et actualisez la page WordPress. Vérifiez ensuite la page publiée dans le navigateur. Soyez attentif à la hauteur, la largeur, au défilement et à l’affichage sur smartphone.

Si aucune offre ne s’affiche, vérifiez dans edoobox que les offres sont publiées et que la période, la catégorie et le statut permettent leur affichage.

Configurer précisément le lien et l’intégration

Copiez toujours le lien ou le code iFrame généré par Aperçu / Partager. Une adresse de la barre du navigateur peut contenir un état temporaire et n’est pas destinée à servir de lien d’intégration permanent. Pour une offre individuelle, vous pouvez choisir entre la vue standard et le formulaire d’inscription direct ; pour les catégories et le répertoire principal, la vue d’ensemble est privilégiée.

Dans la boîte de dialogue de partage, vous pouvez aussi adapter le code généré à son utilisation :

Libellé : identifie la source d’une réservation, par exemple wordpress-kurse. Utilisez des libellés distincts pour plusieurs intégrations.
Langue : démarre automatiquement ou dans une langue de réservation active sélectionnée.
Tags : ouvre l’intégration avec une sélection d’offres déjà adaptée.
Promotion : transmet directement un code promotionnel sélectionné via le lien. Partagez ces liens uniquement avec le public prévu.
Scroll-to-top : ramène la page englobante au début de l’intégration lors d’un changement d’étape.

Si aucun lien correct vers votre site ne figure dans la boîte de dialogue de partage, enregistrez d’abord sous Paramètres > Offres l’URL de base de la page qui intègre l’iFrame.

Vérifier l’affichage et le parcours de réservation complet

Insérez l’intégralité du code généré dans un élément HTML ou d’intégration. Il contient l’iFrame et le script edoobox pour l’affichage intégré. Si seul le lien interne est repris ou si WordPress retire des parties du script, la hauteur et la navigation peuvent réagir différemment de l’aperçu.

Après chaque modification, vérifiez l’ordinateur et le smartphone ainsi que le parcours complet : ouvrir l’offre, remplir le formulaire, accepter les conditions, accéder à la page de paiement et afficher la page finale. Contrôlez aussi que la langue, le filtre par tag, la promotion et le libellé sont repris comme prévu.

Exemple d’utilisation : vue d’ensemble des séminaires dans WordPress

Un prestataire crée la page Séminaires dans WordPress. Dans edoobox, il copie le code iFrame de la catégorie Formation continue et l’insère dans le bloc HTML. Les visiteurs voient ainsi uniquement les offres de formation continue actuelles et peuvent réserver directement.

Exemple d’utilisation : page de campagne multilingue dans WordPress

Une organisation crée une page WordPress dédiée à une campagne de printemps. Dans la boîte de dialogue de partage, elle choisit le français, le tag Outdoor, un code promotionnel limité dans le temps et le libellé fruehling-wordpress. Après l’insertion, elle teste une réservation complète sur smartphone et ordinateur et vérifie dans edoobox que la source est clairement identifiable.

Tenir compte du droit HTML et de la vue actuelle de l’éditeur

La documentation WordPress actuelle décrit dans le bloc HTML des zones distinctes pour HTML, CSS et JavaScript. Les fonctions de script nécessitent le droit unfiltered_html. Sans cette autorisation, des parties iFrame ou script peuvent être supprimées à l’enregistrement. Faites réaliser l’intégration par l’administration WordPress responsable et contrôlez la page publiée après l’enregistrement.

Guides associés

Contrôler le code HTML après l’enregistrement

Utilisez le bloc HTML personnalisé / Custom HTML et contrôlez encore le code enregistré ensuite. Consultez WordPress : Custom HTML. Si votre installation retire des parties iFrame ou script, faites clarifier la méthode d’intégration autorisée par l’administration du site.

Lien direct et Tracking V2

Le code edoobox actuel ajoute un lien direct vers le portail de réservation comme solution de repli si la vue intégrée ne s’affiche pas. Reprenez ce lien avec le code généré et vérifiez-le sur le site publié.

Pour Tracking V2, votre site a aussi besoin de la connexion entre iFrame, contexte du site et consentement. Un formulaire de réservation entièrement visible ne confirme pas une configuration réussie du suivi.