Intégration au site web et Preview Share

L'intégration rend vos offres edoobox accessibles au public. Selon le site web et l'objectif, vous utilisez un lien, un iFrame, le plugin WordPress ou une intégration API individuelle. Vous concevez l'apparence des pages intégrées dans le Design Manager avec les modèles et widgets du design utilisé.

L’URL de base et le site de destination pour la navigation de l’iFrame dépendent des paramètres généraux des offres. Vérifiez ce réglage avant de diffuser des codes d’intégration sur un site en production.

AIntégrer le site webBAdresse cible sur votre propre site webCCode iFrame généréDFiltrer les offres par tagsEContrôler le retour en haut de page

Choisir les méthodes d'intégration

Lien : le moyen le plus simple pour un e-mail, un bouton, un code QR ou une publication sur les réseaux sociaux. La réservation s'ouvre dans la vue standard edoobox ou dans un nouvel onglet.
iFrame : intègre le processus de réservation directement dans votre site web. Cette méthode est indépendante de la plateforme et convient à la plupart des sites web.
Plugin WordPress : utilise des Shortcodes, des fonctions SEO et l'intégration WordPress. Les détails se trouvent sous Intégration avec le plugin WordPress.
API : pour les intégrations personnalisées avec votre propre interface, des rapports ou une logique particulière. Commencez par Premiers pas avec l’API edoobox.

Si vous n'avez pas de demande spéciale, commencez par l'intégration du compte ou de la catégorie par iFrame ou lien. Les liens d'offres individuels sont pratiques pour les newsletters, mais doivent être remplacés plus fréquemment après l'expiration de l'offre.

Choisir le bon niveau dans l'arborescence des offres

Les codes d'intégration sont créés à trois niveaux dans l'arborescence des offres : abréviation de compte, catégorie ou offre.

Abréviation du compte : affiche toutes les catégories et offres publiées. Ce niveau est durable, car les nouveaux contenus apparaissent automatiquement.
Catégorie : affiche une catégorie spécifique et ses offres publiées. Ce niveau est souvent le meilleur choix pour les sous-pages de site web ou les domaines thématiques.
Offre : mène directement à une offre individuelle ou à son inscription. Convient pour les campagnes, newsletters ou codes QR, mais pas comme aperçu permanent du programme.

Pour les offres individuelles, l'Aperçu-Partage offre en plus des liens directs vers l'inscription et, selon la vue, un code QR. Copiez de tels liens uniquement depuis l'Aperçu-Partage et non depuis la barre d'adresse du navigateur.

Créer des codes d'intégration

Ouvrez l'arborescence des offres.
Cliquez avec le bouton droit de la souris sur l'abréviation de compte, la catégorie ou l'offre.
Sélectionnez Aperçu - Partage.
Définissez la langue, le libellé, le tag, la promotion et les autres paramètres.
Choisissez le type de code souhaité : lien standard, code iFrame ou Shortcode de plugin.
Copiez le code et insérez-le dans votre site web, votre CMS ou votre e-mail.

Pour les offres individuelles, vous trouverez en plus des liens directs vers l'inscription. Copiez de tels liens toujours depuis l'Aperçu-Partage et non depuis la barre d'adresse du navigateur, afin que la langue, le suivi et les paramètres d'intégration restent corrects.

Pour les offres individuelles, l'Aperçu-Partage peut afficher en plus, selon la vue, un code QR vers la vue standard ou directement vers le formulaire d'inscription. Utilisez de tels codes QR principalement pour les flyers, affiches ou campagnes de newsletters et vérifiez-les à nouveau après des changements de dates ou l'expiration de l'offre.

Lien vers la vue standard ouvre le niveau actuellement sélectionné dans une fenêtre ou un onglet de navigateur distinct. Ce lien convient pour les boutons, codes QR, signatures d'e-mail et réseaux sociaux.

Intégrer/Insérer dans le site Web génère le code iFrame. L’iFrame affiche la vue standard du niveau sélectionné dans votre site Web. Ajoutez le JavaScript edoobox qui l’accompagne une seule fois si plusieurs iFrames se trouvent sur la même page.

<iframe src="https://app.edoobox.com/..." style="border:none; width:100%; height:600px;">
  <a href="https://app.edoobox.com/...">Afficher la vue d’ensemble</a>
</iframe>
<script src="https://cdn-app2.edoobox.com/js/edoobox.iframe.embedded.v2.2.7.min.js"></script>

Intégrer/Incorporer le plugin génère un Shortcode WordPress, par exemple [edbs_panel language="de" url="konto/kategorie" label="website" tag="" ]. Utilisez ce code uniquement si le plugin edoobox WordPress est installé et connecté.

Le code généré peut contenir des attributs de compatibilité tels que seamless. Prenez le code actuel en entier depuis l'Aperçu-Partage. Remplacez les intégrations plus anciennes lors d'une révision par la version nouvellement générée, au lieu de combiner des composants individuels de différentes versions. Avec data-mobile="Ihr Text", un bouton peut être affiché sur les smartphones au lieu de l'iFrame, menant à la vue standard, par exemple data-mobile="Angebot öffnen" >. Insérez cet attribut à l'intérieur de la balise iFrame ouvrante et conservez les autres attributs générés.

Le code d'intégration actuellement généré contient en plus un lien direct vers le portail de réservation. Conservez cette entrée lors de l'insertion : elle est utile si un navigateur ou le site web ne peut pas afficher le portail intégré. Regénérez le code après des modifications importantes de l'intégration ou de la page cible via Aperçu-Partage.

Ne pas mélanger les types de code

Utilisez toujours le code pour l'environnement approprié. Un code iFrame appartient aux zones HTML ou CMS qui autorisent HTML. Un Shortcode WordPress ne fonctionne qu'avec le plugin edoobox installé et connecté. Un lien standard est en revanche utilisable partout où les liens sont autorisés.

Ne copiez pas de fragments de différents types de code ensemble. Cela peut entraîner la perte de la langue, du libellé, de la balise, du code promotionnel, de la page cible ou du suivi. Si vous avez besoin d'autres paramètres, créez le code à nouveau dans l'Aperçu-Partage et n'ajustez que la valeur clairement connue.

Enregistrez les codes d’intégration utilisés dans la documentation de votre site Web. Notez le niveau, le libellé, la langue, le tag, la page cible et la date du dernier contrôle. Cela facilitera les refontes ultérieures et le remplacement des liens d’offres expirées.

L'Aperçu-Partage peut préparer des liens pour Facebook et Twitter/X. Ces liens ouvrent le service respectif dans la boîte de dialogue de partage et prennent en charge le niveau actuellement sélectionné, par exemple une catégorie ou une offre.

En plus, de petits éléments sociaux peuvent être intégrés par iFrame ou Shortcode. Vérifiez avant le partage le titre, la description et l'image miniature de votre page d'offre. Pour les aperçus des réseaux sociaux, les balises OpenGraph et méta SEO sont pertinentes.

Libellé, langue, tags et promotion

Un libellé aide à attribuer les réservations à une source, par exemple site web, newsletter, Facebook ou page partenaire. Utilisez des libellés courts et uniformes en minuscules. Les libellés peuvent également être utilisés pour des notifications e-mail automatiques si des modèles appropriés sont configurés.

Avec la langue, vous définissez la langue standard du code d'intégration. Si aucune langue n'est définie, la langue du navigateur de la personne réservante peut s'appliquer, si la langue est activée dans edoobox. Activez si nécessaire une sélection de langue dans l'en-tête dans le Design Manager, afin que les participants puissent changer eux-mêmes.

Les tags filtrent les offres au sein du niveau sélectionné. Cela est utile lorsqu'une catégorie contient de nombreuses offres en interne, mais qu'un seul extrait doit s'afficher sur une page du site web. Les bases sont décrites sous Attribuer des tags à une offre.

Avec une promotion, vous pouvez intégrer directement un code promotionnel dans le lien. Combinez les promotions uniquement avec des règles de validité appropriées afin que la réduction s'applique au bon public cible. Les détails sont disponibles sous Campagnes promotionnelles et bons de réduction.

Exemple d’utilisation : sous-page du site Web avec tag et libellé

Une école de langues crée une page pour les cours en ligne sur son site web. Elle ouvre le partage d'aperçu au niveau du compte, définit le libellé website-online, sélectionne la langue allemande et ajoute le tag online. Ensuite, le code iFrame est inséré dans la sous-page et vérifié par une réservation de test.

Exemple : Connecter le site web, le portail de réservation et le CRM

Une organisation gère ses pages d'information dans son propre CMS, effectue les réservations dans edoobox et souhaite associer les réservations confirmées à son CRM. Définissez d'abord quelle tâche chaque système remplit.

Créez dans Partage d'aperçu un lien de catégorie ou d'offre ou l'intégration souhaitée. Utilisez un libellé uniforme tel que website pour cette entrée.
Vérifiez l’URL de base du site Web pour l’aperçu iFrame. Depuis le site réel, contrôlez les détails de l’offre, l’inscription, le paiement, la finalisation et le retour prévu à vos pages d’information.
Gérez les liens juridiques et d'information nécessaires là où ils sont réellement affichés : sur votre site web et dans le design edoobox utilisé. Pour la gestion commune des consentements, tenez compte de Suivi, iFrame et consentement.
Configurez séparément le transfert au CRM via une intégration ou automatisation réellement disponible. Un portail intégré ou un libellé de réservation seul ne transmet pas de données à n’importe quel CRM.
Utilisez les identifiants de réservation et de personne pour l'association et définissez le traitement des modifications et des annulations. Le cas d'utilisation Synchroniser les réservations par API explique la synchronisation périodique et la reprise après une panne.

Après une réservation de test contrôlée, comparez la réservation stockée dans edoobox et l'enregistrement CRM associé. Vérifiez une nouvelle importation de la même réservation et une annulation ultérieure. Une finalisation de réservation réussie ne confirme la transmission au CRM que lorsque le système cible affiche également l'état attendu.

Défilement vers le haut et affichage mobile

Dans l'iFrame, edoobox peut faire défiler automatiquement vers le bord supérieur de l'iFrame lors des clics. Sur les sites web one-page longs, cela peut être gênant, car les visiteurs doivent à nouveau faire défiler jusqu'à l'intégration après chaque étape. Désactivez Défilement vers le haut si votre site web possède déjà son propre comportement de défilement.

Testez l'intégration sur smartphone et tablette. Si l'iFrame est trop petit ou difficile à utiliser sur les pages mobiles, utilisez le bouton mobile via data-mobile ou créez un lien vers l'affichage standard.

Flux RSS et défileur d'offres

Outre les liens, iFrames, plugins et API, il existe d’anciens affichages publics : le flux RSS des offres et le bandeau d’offres défilantes. Tous deux utilisent les offres publiées pour des affichages simples sur un site Web. Pour les nouvelles intégrations personnalisées, l’API edoobox est généralement plus robuste.

Le flux RSS contient les offres publiques dans les langues activées. Il convient si les systèmes externes n'ont besoin que du titre, du fournisseur, de la date de publication et du lien.

Le défileur d'offres affiche un nombre limité de futures offres publiques en tant qu'élément de site web étroit. Il peut utiliser la hauteur, la largeur, les couleurs, la vitesse, le temps d'attente et le comportement de destination. Les couleurs de statut suivent le statut de l'offre ; les places libres sont calculées à partir de la capacité et des réservations.

Plusieurs iFrames et cas spéciaux

Si plusieurs iFrames se trouvent sur la même page du site Web, attribuez un libellé distinct à chacun et ajoutez le JavaScript edoobox une seule fois, de préférence après le dernier iFrame. Trop d’iFrames sur une page peuvent dégrader le temps de chargement, la gestion du focus et l’utilisation mobile.

Créez le code à nouveau pour chaque sous-page du site web, au lieu de copier manuellement les libellés ou les tags. Ainsi, la langue, le libellé, le tag, la promotion et le chemin de destination restent ensemble et les évaluations ultérieures sont plus compréhensibles.

Si les liens au sein d'un iFrame s'ouvrent dans un frame supérieur, la personne atterrit dans l'affichage standard. Cela peut être souhaitable si les détails de l'offre ont besoin de plus d'espace, mais cela doit être testé sur le site web.

Si vous utilisez une sous-page pour les détails de l'offre, veillez à des paramètres de destination ou de racine corrects. Cela est particulièrement important pour les codes courts WordPress et les pages d'accueil où seul un extrait du programme est visible.

Sources d'erreurs fréquentes

Niveau incorrect : Une seule offre a été intégrée, alors qu'une vue d'ensemble de la catégorie était prévue.
Offre expirée : Un lien d'offre ne mène plus au nouveau rendez-vous souhaité.
Manque de JavaScript : Le script iFrame edoobox a été supprimé ou intégré de manière défavorable à plusieurs reprises.
Cache du site web : Le code a été modifié, mais le site web fournit encore l'ancienne version.
Langue incorrecte : La langue dans le code ne correspond pas aux langues activées ou au site web.
Tag sans résultat : Le tag défini n'est associé à aucune offre publiée de ce niveau.
Promotion sans validité : Le lien contient un code promotionnel, mais l'offre, la personne ou la période ne remplissent pas les conditions.

Diagnostiquer une vérification de sécurité qui échoue seulement dans l’iFrame mobile

Si une vérification de sécurité échoue uniquement sur smartphone ou uniquement dans votre site Web, comparez le même parcours de réservation via des accès distincts. Ce symptôme seul ne permet pas d’identifier une cause précise liée au navigateur, aux cookies ou au service de sécurité.

Créez le lien standard public actuel pour l'offre ou la catégorie concernée à partir de Partage d'aperçu. Utilisez la même langue et le même niveau que dans l'intégration du site web.
Ouvrez ce lien sur le même appareil mobile directement dans un onglet de navigateur distinct. Notez si la vérification de sécurité y apparaît et peut être finalisée de manière régulière.
Ouvrez ensuite le site web réel avec le portail intégré et comparez la même étape. Vérifiez si le site web fournit le code d'intégration complet actuel et si le script accompagnant est intégré une seule fois.
Comparez au besoin un deuxième navigateur récent ou un ordinateur ainsi qu’un deuxième accès réseau habituel. Notez les combinaisons concernées ; une différence constitue un indice de diagnostic sans prouver encore une cause.
Si l’accès public direct fonctionne, proposez le lien direct normal ou le bouton mobile prévu comme solution de repli. La vérification normale de sécurité du portail cible reste active.
Si le processus reste perturbé, transmettez les étapes reproductibles au support.

Le signalement doit inclure l'heure avec le fuseau horaire, la version du système d'exploitation et du navigateur, l'adresse publique du site web, le niveau d'offre concerné, le résultat direct/intégré ainsi qu'une référence d'erreur ou de défi affichée. Ajoutez une capture d'écran anonymisée et la comparaison depuis un autre navigateur ou réseau, si disponible. Les mots de passe, les codes à usage unique, les clés API et les liens de session personnels n'appartiennent pas au signalement.

Le Guide de diagnostic aide à signaler de manière compréhensible les différences observées.

Tester l'intégration

Insérer le code sur une page de test non publique.
Vérifier le niveau du compte, de la catégorie et de l'offre.
Vérifier la langue, le libellé, le tag et la promotion avec une réservation de test.
Tester sur ordinateur de bureau, tablette et smartphone.
Vérifier les liens, les détails, l'inscription, le paiement, la page de finalisation et la confirmation par e-mail.
Après des modifications dans le Design Manager, recharger le site web et tenir compte du cache.

Exemple d’utilisation : intégrer une catégorie sur un site Web

Une organisation a une sous-page du site web pour les « Formations continues ». Dans l'arborescence des offres, la catégorie « Formations continues » est ouverte, le partage d'aperçu est lancé, la langue allemande et le libellé website sont définis. Le code iFrame est inséré dans la sous-page et vérifié ensuite par une réservation de test.

Retester après des modifications

Après des modifications de la catégorie, du design, de la langue, des tags ou du code d'intégration, le site web doit être retesté. Vérifiez l'ordinateur de bureau, le smartphone, le comportement de défilement, la finalisation de la réservation et si les pages de détails s'ouvrent à l'endroit prévu.