Intégration dans le site web et partage de l'aperçu

L'intégration d'edoobox est essentielle pour rendre vos offres accessibles au public dans un format adapté et pour permettre à votre clientèle d'effectuer elle-même des réservations dans vos offres.

Les méthodes d'intégration

Pour l'intégration, vous disposez de différentes méthodes dans edoobox :

1. Intégration via iFrame : avec cette méthode, vous pouvez intégrer edoobox dans votre site web en utilisant un iFrame. La fenêtre de réservation s'affiche ainsi dans une fenêtre séparée sur votre site web et peut être adaptée à l'apparence de votre site web à l'aide du gestionnaire de design. Cette méthode d'intégration est indépendante du CMS ou de la plateforme et peut être utilisée sur tous les types de sites web.

2. Intégration sous forme de lien : Avec cette méthode, vous avez la possibilité d'insérer edoobox sous forme de lien simple dans votre site web ou de l'envoyer par e-mail. Vous permettez ainsi à votre clientèle d'accéder en un clic à l'aperçu standard de vos offres edoobox et d'effectuer le processus de réservation dans son propre onglet de navigation. Cette méthode d'intégration est indépendante du CMS ou de la plate-forme et peut être utilisée sur tous les types de sites web.

3. Intégration via un plugin : si vous utilisez WordPress comme système CMS pour votre présence sur le web, edoobox vous offre la possibilité d'utiliser le plugin edoobox pour l'intégration sur votre site web. Vous trouverez des informations sur cette variante d'intégration dans cette documentation.

4. Intégration API : l'utilisation de l'API edoobox permet de créer des intégrations personnalisées d'edoobox dans votre site web. Cette méthode nécessite des connaissances techniques et offre une flexibilité maximale. Vous trouverez des informations sur cette variante d'intégration dans cette documentation.

Le choix de la méthode d'intégration dépend de vos besoins spécifiques et de votre bagage technique. Chaque méthode vous permet d'intégrer edoobox dans votre site web et d'offrir à votre clientèle une expérience de réservation idéale.

Pour simplifier la documentation, nous parlerons exclusivement de "code d'intégration" dans la suite du document. Cela comprend aussi bien les liens d'intégration (méthode 2) que les codes d'intégration (méthodes 1 et 3) et inclut la majorité des deux variantes.

Les niveaux d'intégration

Pour afficher vos offres edoobox sur votre site web à l'aide d'une des méthodes mentionnées (1-3), il est nécessaire de générer le code d'intégration correspondant dans votre compte edoobox et de l'intégrer aux endroits souhaités sur votre site web.

Vous avez la possibilité de créer un tel code d'intégration à chaque niveau de l'arborescence des offres. Le niveau auquel vous créez ce code d'intégration dépend de la manière dont vous souhaitez présenter les offres sur votre site web. La génération du code d'intégration se fait dans la zone de partage de l'aperçu du niveau correspondant dans l'arborescence des offres.

Les niveaux suivants sont disponibles :

• Code de compte: intégration de toutes les offres

• Catégorie: intégration d'une seule catégorie

• Offre: intégration d'une offre unique

Info : Exemples d'intégration

Sur nos pages web de démonstration, nous montrons comment les iFrames peuvent être intégrés individuellement.

Créer des codes d'intégration

Intégration de toutes les offres via le code de compte RECOMMANDATIONS

À ce niveau, vous créez un code d'intégration qui permet à votre clientèle d'accéder à l'aperçu général de toutes vos offres publiées dans edoobox. Grâce à cette intégration, les nouvelles catégories et offres publiées apparaissent toujours automatiquement dans l'aperçu général et le code d'intégration reste valable dans des conditions standard.

1. Naviguez jusqu'à l'arborescence des offres.

2. Clic droit sur le raccourci de votre compte

3. Aperçu - Sélectionner Share dans le menu contextuel

4. Définir les paramètres du code d'intégration

5. Sélectionner le code d'intégration

   1. Pour l'affichage standard, cliquer sur "Lien vers l'affichage standard".

   2. Pour le code iFrame, cliquez sur "Intégrer/Intégrer le site web".

   3. Pour le code court, cliquer sur "Intégrer/Intégrer le plugin".

6. Copier le code d'intégration généré et le coller dans la page web

Intégration de catégories individuelles RECOMMANDATION

À ce niveau, vous créez un code d'intégration qui permet à vos clients d'accéder directement à cette catégorie et de choisir entre les offres de cette catégorie. Grâce à cette intégration, les nouvelles offres publiées dans cette catégorie sont toujours affichées automatiquement et le code d'intégration reste valable dans des conditions standard.

1. Naviguez jusqu'à l'arborescence des offres.

2. Clic droit sur la catégorie souhaitée

3. Aperçu - Sélectionner Share dans le menu contextuel

4. Définir les paramètres du code d'intégration

5. Sélectionner le code d'intégration

   1. Pour l'affichage standard, cliquer sur "Lien vers l'affichage standard".

   2. Pour le code iFrame, cliquez sur "Intégrer/Intégrer le site web".

   3. Pour le code court, cliquer sur "Intégrer/Intégrer le plugin".

6. Copier le code d'intégration généré et le coller dans la page web

Veuillez noter que : Plusieurs iFrames sur une même page

Si vous souhaitez insérer plus d'un iFrame sur la même page, donnez à chaque iFrame un texte d'étiquette différent et n'insérez le code JavaScript qu'une seule fois sous le dernier iFrame.

Intégration d'offres individuelles

A ce niveau, vous créez un code d'intégration qui conduit votre clientèle directement à une offre individuelle ou à son inscription. Via cette intégration, les catégories et offres nouvellement créées ne s'affichent pas automatiquement et le lien perd sa validité après l'expiration de l'offre.

1. Naviguer vers l'arbre des offres

2. Clic droit sur l'offre souhaitée

3. Aperçu - Sélectionner Share dans le menu contextuel

4. Définir les paramètres du code d'intégration

5. Sélectionner le code d'intégration

   1. Pour l'affichage standard, cliquer sur "Lien vers l'affichage standard".

   2. Pour un lien directement vers l'inscription de l'offre, cliquez sur "Lien vers le formulaire d'inscription".

   3. Pour le code iFrame, cliquez sur "Intégrer/Intégrer le site web".

   4. Pour le code court, cliquer sur "Intégrer/Intégrer le plugin".

6. Copier le code d'intégration généré et le coller dans la page web

Veuillez noter que : Lien vers les offres individuelles

Nous ne recommandons l'intégration d'offres individuelles que dans des cas particuliers, par exemple pour le lien d'une offre individuelle dans une newsletter, car le lien d'intégration doit être adapté après l'expiration de l'offre pour faire apparaître une nouvelle offre.

Veuillez copier les liens dans l'annonce d'une offre uniquement à partir de la zone de partage de l'aperçu et jamais à partir de la fenêtre du navigateur.

Partage d'aperçus

Par 'Partage d'aperçu' dans edoobox, on entend la zone qui vous permet de configurer et de générer des codes d'intégration. Comme son nom l'implique, cette section vous permet d'une part de prévisualiser vos offres dans edoobox et d'autre part de préparer l'intégration de vos offres dans votre site web.

Vous pouvez accéder à cette section en effectuant un clic droit n'importe où dans l'arborescence des offres ou en y accédant depuis le tableau de bord des catégories ou des offres.

Lien vers la vue standard

Ce lien vous amène à la vue standard du niveau actuellement sélectionné et peut être ouvert dans un nouvel onglet de navigateur.

https://app2.edoobox.com/intern/SprachCB/N2ETDOEMTG3KWC217G27TTL/?edref=intern/sprachcb/n2etdoemtg3kwc217g27ttl&edid=6526d7ca333a68O0O494314613bddf84aa24fe45227c52fdd96f7b14a

Intégrer/intégrer le site web

Ce code d'intégration est appelé code iFrame et est utilisé pour l'intégration via iFrame. Ce code iFrame, lorsqu'il est intégré dans une page web, mène dans une propre fenêtre sur la page web à la vue standard du niveau actuellement sélectionné.

<iframe
    id="edoobox_sprach cb"
    frameborder="0"
    name="edooboxFrame_sprach cb"
    no-scroll
    seamless
    src="https://app2.edoobox.com/intern/SprachCB/N2ETDOEMTG3KWC217G27TTL/?edref=intern/sprachcb/n2etdoemtg3kwc217g27ttl&edid=6526d7ca333a68O0O494314613bddf84aa24fe45227c52fdd96f7b14a"
    style="border:none; width:100%; height:600px;">
    <a href="https://app2.edoobox.com/intern/SprachCB/N2ETDOEMTG3KWC217G27TTL/?edref=intern/sprachcb/n2etdoemtg3kwc217g27ttl&edid=6526d7ca333a68O0O494314613bddf84aa24fe45227c52fdd96f7b14a">Übersicht ansehen</a>
</iframe>

<script
    src="https://cdn1.edoobox.com/edoobox.iframe.embedded.v2.2.5.js"
    type="text/javascript"></script>

Veuillez noter que : Attribut seamless

L'attribut seamless est deprecated, car il a été supprimé des projets standard de HTML5. Nous recommandons donc de ne plus utiliser cet attribut.

Info : Attribut data-mobile

À l'aide de cet attribut, un bouton avec votre texte individuel s'affiche sur le smartphone à la place de l'iFrame. En cliquant dessus, vous accédez à l'affichage standard de vos offres.

Écriture : data-mobile="votre texte" > ( il doit y avoir un espace entre " et >)

Intégrer/intégrer Plugin

Ce code d'intégration est appelé short code et est utilisé pour l'intégration via un plugin. Ce code court, lorsqu'il est intégré dans une page web, mène directement à la vue standard du niveau actuellement sélectionné dans une zone spécifique de la page web.

[edbs_panel label="interne/languecb/n2etdoemtg3kwc217g27ttl" language="fr" tag="" url="interne/langueCB/N2ETDOEMTG3KWC217G27TL/" edcode="" ]

Facebook

Dans cette section, vous pouvez créer un lien d'intégration, un code iFrame et un code court pour Facebook. Le lien d'intégration redirige vers Facebook lorsqu'on clique dessus et permet de créer une publication sur le niveau actuellement sélectionné (par exemple une offre) en mode édition. Cette publication peut être partagée dans un deuxième temps.

https://www.facebook.com/sharer.php?u=https://app2.edoobox.com/intern/SprachCB/N2ETDOEMTG3KWC217G27TTL/?edref=intern/sprachcb/n2etdoemtg3kwc217g27ttl&edid=6527ad8eb52fd9O0O630800852afc84804bdbf09663155cb3a46e14e8&t=SprachCB

Grâce au code iFrame et au code court, vous pouvez intégrer une petite icône Facebook sur votre site web. Votre clientèle peut utiliser cette icône pour aimer ou partager le niveau intégré (par exemple une offre).

Twitter (X)

Dans cette section, vous pouvez créer un lien d'intégration, un code iFrame et un code court pour Twitter (X). Le lien d'intégration redirige vers Twitter (X) lorsqu'on clique dessus et permet de créer une contribution au niveau actuellement sélectionné (par exemple une offre) en mode édition. Cette contribution peut être partagée dans un deuxième temps.

https://twitter.com/intent/tweet?source=sharethiscom&url=https://app2.edoobox.com/intern/SprachCB/N2ETDOEMTG3KWC217G27TTL/?edref=intern/sprachcb/n2etdoemtg3kwc217g27ttl&edid=6527ad8eb52fd9O0O630800852afc84804bdbf09663155cb3a46e14e8&text=SprachCB

Grâce au code iFrame et au code court, vous pouvez intégrer une petite icône Twitter (X) sur votre site web. Votre clientèle peut utiliser ce symbole pour aimer ou partager le niveau intégré (par exemple une offre).

Réglages

Les paramètres de la zone de partage de l'aperçu servent à adapter et à optimiser le code d'intégration en fonction de vos besoins et de vos processus de travail.

Label

Vous pouvez ajouter un label à chaque code d'intégration que vous créez. Cela vous permettra de savoir plus tard de quel code d'intégration proviennent les écritures. Veuillez saisir le label en minuscules.

Langue

Avec la langue, vous définissez la langue dans laquelle le code d'intégration doit afficher la fenêtre d'inscription par défaut. Si aucune langue spécifique n'est définie pour le code d'intégration, la fenêtre d'inscription s'affiche par défaut dans la langue du navigateur du participant qui s'inscrit, à condition que la langue correspondante (DE, EN ou FR) soit activée dans le système.

Conseil : changer de langue dans l'iFrame

Activez le choix de la langue dans le Design Manager, sous l'en-tête de la page , dans le menu de navigation. Vos participants ont ainsi la possibilité de choisir eux-mêmes la langue souhaitée pour le processus de réservation.

Tags

Chaque offre peut être dotée de balises. En utilisant des tags dans le code d'intégration, toutes les offres peuvent être affichées avec les tags correspondants au niveau actuel.

Promotion

Ajoutez un code promotionnel à un lien afin qu'il soit automatiquement appliqué lors d'une réservation via le lien. Cette fonction peut également être utilisée en combinaison avec des tags. Par exemple, si vous avez attribué le tag "membres" à un certain groupe de participants et que ce tag est défini comme critère de validité dans une promotion qui s'applique spécifiquement aux membres, vous pouvez intégrer cette promotion dans le lien d'inscription. Les participants qui s'inscrivent via ce lien et qui ont enregistré le tag "membres" dans leur compte bénéficient alors automatiquement de l'inscription à prix réduit par rapport aux autres clients.

Scroll-To-Top

Dans l'iFrame, le contenu de la fenêtre est déplacé vers le haut à chaque clic. Cela peut s'avérer inadapté pour les pages uniques ou les longues pages de contenu, car les utilisateurs doivent à nouveau faire défiler l'iFrame après chaque clic. Cet effet de défilement peut être supprimé en désactivant la fonction "Scroll-To-Top".

Tutoriels associés

• Intégrer un site WordPress (plugin WP / iFrame)

• Sous-domaine et fonction méta

• Intégrer un iFrame dans un site web Typo3

• Intégrer un iFrame dans un site Joomla

• Intégrer un iFrame dans un site Wix

• Intégrer un iFrame dans un site web Jimdo

• Google Analytics

Mots-clés pour ce guide

iFrame ¦ Intégrer ¦ Défilement vers le haut ¦ Tag ¦ Étiquette ¦ Intégrer ¦ Suivi