Integration into the website and preview share
The integration of edoobox is essential to make your offers publicly accessible in a suitable format and to enable your customers to make bookings in your offers independently.
The integration methods
Various integration methods are available in edoobox:
Integration via iFrame: With this method, you can integrate edoobox into your website by using an iFrame. The booking window is then displayed in a separate window on your website and can be adapted to the appearance of your website using the Design Manager. This integration method is CMS and platform-independent and can be used on websites of all kinds.
Integration as a link: This method gives you the option of adding edoobox as a simple link to your website or sending it by e-mail. This allows your customers to access the standard preview of your edoobox offers with a single click and carry out the booking process in a separate browser tab. This integration method is CMS and platform-independent and can be used on all types of websites.
Integration via plugin: If you use WordPress as the CMS system for your website, edoobox offers the option of using the edoobox plugin for integration on your website. You can find information on this integration option in this documentation.
API integration: Using the edoobox API allows you to create individual integrations of edoobox into your website. This method requires technical knowledge and offers maximum flexibility. Information on this integration option can be found in this documentation.
The choice of integration method depends on your specific requirements and your technical background. Each method allows you to integrate edoobox into your website and offer your customers an ideal booking experience.
To simplify the documentation, the term "embedding code" is used exclusively in the following. This includes both the embedding links (method 2) and the embedding codes (methods 1 and 3) and includes the majority of both variants.
The integration levels
In order to display your edoobox offers on your website using one of the above methods (1-3), it is necessary to generate the corresponding embed code in your edoobox account and embed it in the desired places on your website.
You have the option of creating such an embed code at every level in the offer tree. The level at which you create this embed code depends on how you want to present the offers on your website. The embed code is generated in the preview share area of the corresponding level in the offer tree.
The following levels are available:
Account code: Integration of all offers
Category: Integration of a single category
Offer: Integration of a single offer
Info: Examples of integrations
On our demo websites we show how iFrames can be integrated individually.
Create embedding codes
Integration of all offers via the account code RECOMMENDATION
At this level, you create an integration code with which your customers can access the complete overview of all your offers published in edoobox. Newly published categories and offers are always automatically displayed in the complete overview via this integration, and the integration code remains valid under standard conditions.
Navigate to the offer tree.
Right-click on your account shortcut
Preview - Select Share in the context menu
Define the settings for the integration code
Select binding code
Click on "Link to standard view" for standard view
Click on "Embed/embed website" for iFrame code
Click on "Embed/embed plugin" for short code
Copy the generated embed code and paste it into the website
Integration of all offers: Right-click on the account abbreviation
Preview share: Three available embedding methods for the website
Integration of individual categories RECOMMENDATION
At this level, you create an integration code with which your customers can access this category directly and choose between the offers in this category. Newly published offers in this category are always displayed automatically via this integration and the integration code remains valid under standard conditions.
Navigate to the offer tree.
Right-click on the desired category
Preview - Select Share in the context menu
Define the settings for the integration code
Select binding code
Click on "Link to standard view" for standard view
Click on "Embed/embed website" for iFrame code
Click on "Embed/embed plugin" for short code
Copy the generated embed code and paste it into the website
Integration of a category: Right-click on the category
Please note: Multiple iFrames on one page
If you want to insert more than one iFrame on the same page, give each iFrame a different label text and insert the JavaScript code only once below the last iFrame.
Integration of individual offers
At this level, you create an integration code that takes your customers directly to an individual offer or to their login. Newly created categories and offers are not automatically displayed via this integration and the link loses its validity after the offer expires.
Navigate to the offer tree
Right-click on the desired offer
Preview - Select Share in the context menu
Define the settings for the integration code
Select binding code
Click on "Link to standard view" for standard view
Click on "Link to registration form" for a link directly to the registration form for the offer
Click on "Embed/embed website" for iFrame code
Click on "Embed/embed plugin" for short code
Copy the generated embed code and paste it into the website
Integration of an offer: Right-click on the offer
Please note: Link of individual offers
We only recommend the integration of individual offers in special cases, e.g. for the linking of an individual offer in a newsletter, as the integration link must be adjusted after the offer has expired in order to display a new offer.
Please copy the links in the registration of an offer exclusively from the preview share area and never from the browser window
Preview-Share
Preview share' in edoobox refers to the area where you can configure and generate embed codes. As the name implies, this area allows you to preview your offers in edoobox on the one hand and to prepare the integration of your offers into your website on the other.
You can access this area by right-clicking anywhere in the offer tree or by accessing it via the category or offer dashboard.
Preview share: Creation of embedding codes and their properties
Link to the standard view
This link takes you to the standard view of the currently selected level and can be opened in a new browser tab.
https://app2.edoobox.com/intern/SprachCB/N2ETDOEMTG3KWC217G27TTL/?edref=intern/sprachcb/n2etdoemtg3kwc217g27ttl&edid=6526d7ca333a68O0O494314613bddf84aa24fe45227c52fdd96f7b14aIntegrate/embed website
This integration code is called iFrame code and is used for integration via iFrame. When integrated into a website, this iFrame code leads to the standard view of the currently selected level in a separate window on the website.
<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>Please note: Attribute seamless
The attribute seamless is deprecated as it has been removed from the standard drafts of HTML5. We therefore recommend that you no longer use this attribute.
Info: Attribute data-mobile
With the help of this attribute, a button with your individual text is displayed on the smartphone instead of the iFrame, which leads to the standard view of your offers by clicking on it.
Spelling: data-mobile="Your text" > (there must be a space between " and >)
Integrate/embed plugin
This integration code is called short code and is used for integration via plugin. If integrated into a website, this short code leads directly to the standard view of the currently selected level in a separate area on the website.
[edbs_panel label="internal/languagecb/n2etdoemtg3kwc217g27ttl" language="en" tag="" url="internal/LanguageCB/N2ETDOEMTG3KWC217G27TTL/" edcode="" ]In this area, you can create an embed link, an iFrame code and a short code for Facebook. The embed link redirects to Facebook when clicked and allows you to create a post for the currently selected level (e.g. an offer) in edit mode. This post can be shared in a second step.
https://www.facebook.com/sharer.php?u=https://app2.edoobox.com/intern/SprachCB/N2ETDOEMTG3KWC217G27TTL/?edref=intern/sprachcb/n2etdoemtg3kwc217g27ttl&edid=6527ad8eb52fd9O0O630800852afc84804bdbf09663155cb3a46e14e8&t=SprachCBYou can embed a small Facebook icon on your website using the iFrame and short code. Your customers can use this icon to like or share the embedded level (e.g. an offer).
Twitter (X)
In this area, you can create an embed link, an iFrame code and a short code for Twitter (X). The embed link redirects to Twitter (X) when clicked and allows you to create a post for the currently selected level (e.g. an offer) in edit mode. This post can be shared in a second step.
https://twitter.com/intent/tweet?source=sharethiscom&url=https://app2.edoobox.com/intern/SprachCB/N2ETDOEMTG3KWC217G27TTL/?edref=intern/sprachcb/n2etdoemtg3kwc217g27ttl&edid=6527ad8eb52fd9O0O630800852afc84804bdbf09663155cb3a46e14e8&text=SprachCBYou can embed a small Twitter (X) symbol on your website using the iFrame and short code. Your customers can use this symbol to like or share the embedded layer (e.g. an offer).
Settings
The settings in the preview share area are used to adapt and optimize the embed code according to your requirements and work processes.
Preview share: Customizing the properties of an embed code
Label
You can add a label to each integration code you have created. This will allow you to see later which binding code the bookings originate from. Please enter the label in lower case letters.
Language
You use the language to specify the language in which the integration code of the booking window should be displayed by default. If no specific language is defined for the binding code, the booking window is displayed by default in the browser language of the participant making the booking, provided the corresponding language (DE, EN or FR) is activated in the system.
Tip: Change the language in the iFrame
Activate the language selection in the Design Manager under Page header in the Navigation menu. Your participants will then be able to set the desired language for the booking process themselves.
Tags
Each offer can be tagged. By using tags in the embed code, all offers can be displayed with the corresponding tags of the current level.
Promotion
Add a promotional code to a link so that it is automatically applied when a booking is made via the link. This function can also be used in combination with tags. For example, if you have assigned the "Members" tag to a specific participant group and this tag is stored as a validity criterion in a promotion that applies specifically to members, you can integrate this promotion in the registration link. Participants who book via this link and have the "Members" tag in their account will then automatically benefit from the discounted registration compared to other customers.
Scroll-To-Top
In the iFrame, the content of the window is moved upwards with each click. This can be unsuitable for single-page sites or long content pages, as users have to scroll to the iFrame again after each click. This scrolling effect can be removed by deactivating the "Scroll-To-Top" function.
Related instructions
Keywords for these instructions
iFrame ¦ Embed ¦ Scroll-To-Top ¦ Tag ¦ Label ¦ Embed ¦ Tracking