TYPO3 OpenImmo Property Transfer

If you run your website with TYPO3, you can still use WP-ImmoMakler as a full-featured real estate plugin — through an iFrame integration. WP-ImmoMakler runs on a separate WordPress installation, and the property view is embedded as an iFrame into your TYPO3 page.

Requirements

You need a WordPress installation on which WP-ImmoMakler runs and into which your properties are imported. That installation can sit on the same server as your TYPO3 website or on a separate host.

For exactly this scenario, WP-ImmoMakler comes with its own iFrame mode. So you do not write an <iframe> tag yourself — you switch the mode on in the settings and use the code WP-ImmoMakler then shows you, ready to paste.

Step 1: Enable iFrame mode

Open the settings

In the backend of your WordPress installation (wp-admin), go to WP-ImmoMakler → Settings → Display.
Switch on iFrame mode

Tick iFrame mode. The list and detail views of your properties are then output as iFrame content, edge to edge — without the header, menu and footer of the WordPress installation. Image galleries open in full screen in this mode so that they are not limited to the height of the iFrame.
Enter the iFrame-calling base URL

Under iFrame-calling base URL, enter the full base URL of your TYPO3 website — that is, the address of the site the iFrame is embedded in, for example https://www.example.com without a subpage. For security reasons (CORS), the automatic iFrame resizing only works once this entry is in place.
Save

Save the settings.

WP-ImmoMakler settings: iFrame mode and iFrame-calling base URL

Step 2: Copy the embed code

Directly below the iFrame mode option, WP-ImmoMakler shows the finished embed code — already containing the URLs of your own installation. Clicking into the field selects the whole code so you can copy it.

The code looks like this:

<style>#wp-immomakler-iframe{width:100%;height:100vh;border:none;}</style>
<iframe id="wp-immomakler-iframe" src="https://your-wordpress-domain.com/immobilien/" allowfullscreen></iframe>
<script type="module">import { initialize } from "https://your-wordpress-domain.com/?wp-immomakler-iframe-resizer";initialize({}, "#wp-immomakler-iframe");</script>

It consists of three parts: a small stylesheet that gives the iFrame its full width, the iFrame itself, and a JavaScript module that continuously adjusts the height of the iFrame to its content. This means there is no second scrollbar, and the height adapts automatically when a visitor moves from the list to the detail view.

Step 3: Embedding in TYPO3

In TYPO3, the code can be embedded in several ways.

Via an HTML content element

Create a content element

On the desired TYPO3 page, create a new content element of type HTML.
Insert the code

Paste the code you copied from the WP-ImmoMakler settings.
Save and publish

Save the content element and publish the page.

Via TypoScript

Alternatively, you can output the code via TypoScript:

lib.immomakler = TEXT
lib.immomakler.value (
  <style>#wp-immomakler-iframe{width:100%;height:100vh;border:none;}</style>
  <iframe id="wp-immomakler-iframe" src="https://your-wordpress-domain.com/immobilien/" allowfullscreen></iframe>
  <script type="module">import { initialize } from "https://your-wordpress-domain.com/?wp-immomakler-iframe-resizer";initialize({}, "#wp-immomakler-iframe");</script>
)

Replace both https://your-wordpress-domain.com addresses with the values from your settings.

If the height is not adjusted automatically

If the iFrame stays at its initial height or a second scrollbar appears, it is almost always down to one of these three causes:

The iFrame-calling base URL is empty, contains a typo, or points at a subpage. Only the base URL, including https://, belongs there.
The base URL entered does not match the address actually being called, for example https://example.com instead of https://www.example.com.
TYPO3 or an extension removes the <script type="module"> from the content element. Check the output in the source code of the finished page.

Hosting options

You can set the iFrame up yourself or have your agency configure it. Alternatively, we offer a setup service that takes care of visually integrating the plugin into the layout of your TYPO3 website. The iFrame can run on your own server or on ours.

If you have any questions about the setup, please contact our support team.