Embed an iFrame in a TYPO3 website

You can embed the edoobox booking process in TYPO3 by copying the iFrame code from edoobox and inserting it as HTML content on a TYPO3 page.

Create a TYPO3 page

Create a new page in TYPO3 or open the existing page where offers should appear.
Give the page a clear title, such as Our courses.
Add the Plain HTML element where the content should appear, provided your editorial role allows HTML content.

Copy iFrame code from edoobox

In edoobox, open the required category, root directory or individual offer. Select Preview / Share, open Embed and copy the iFrame code.

Insert the code in TYPO3

Insert the copied code in the TYPO3 content element and save the page. Then check the public website to ensure offers are visible and the height, width and mobile display are suitable.

If displaying a specific category's content, it should contain at least one published offer and a suitable period.

Configure links and embedding deliberately

Always copy the link or iFrame code generated by Preview / Share. An address from the browser bar may contain a temporary state and is not intended as a permanent embed link. For an individual offer, you can choose the standard view or direct registration form; categories and the root directory focus on the overview.

In the Share dialog, you can further tailor the generated code to its purpose:

Label: Identifies a booking's source, for example typo3-kurse. Use distinct labels for multiple integrations.
Language: Starts automatically or in a selected active booking language.
Tags: Opens the embedded view with a suitable offer selection already applied.
Promotion: Passes a selected promotion code directly through the link. Share such links only with the intended audience.
Scroll-to-top: Returns the surrounding page to the start of the embedded view when changing steps.

If the Share dialog shows no correct link to your website, first save the base URL of the page containing the iFrame under Settings > Offers.

Check the display and entire booking journey

Insert the complete generated code in an HTML or embed element. It contains the iFrame and the edoobox script for embedded display. If only the inner link is copied or TYPO3 removes script components, height and navigation may behave differently from the preview.

After every change, check desktop and smartphone displays and the complete workflow: open the offer, complete the form, accept the terms, open the payment page and display the completion page. Also check that the language, tag filters, promotion and label are applied as intended.

Example: further training page in TYPO3

An educational institution maintains its website in TYPO3. On the Further training page, it inserts the edoobox iFrame code for the Current courses category. Interested visitors then see only relevant courses and can book directly.

Example: multilingual campaign page in TYPO3

An organisation creates a separate TYPO3 page for a spring campaign. In the Share dialog, it selects French, the Outdoor tag, a time-limited promotion code and the fruehling-typo3 label. After insertion, it tests a complete booking on smartphone and desktop and checks in edoobox that the source can be clearly identified.

Check saved content and the page cache

After saving, reopen the HTML content element and compare the complete code with Preview / Share. Then check the published page, its visibility period and, if relevant, the TYPO3 page cache. If your editorial role cannot insert plain HTML, ask the TYPO3 administrator to provide a suitable element.