Skip to content
WP-ImmoMakler Dokumentation

Joomla OpenImmo Property Transfer

If you run your website with Joomla, 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 Joomla page.

Requirements

Section titled “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 Joomla 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

Section titled “Step 1: Enable iFrame mode”

  1. Open the settings

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

  2. 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.

  3. Enter the iFrame-calling base URL

    Under iFrame-calling base URL, enter the full base URL of your Joomla 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.

  4. Save

    Save the settings.

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

Step 2: Copy the embed code

Section titled “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 Joomla

Section titled “Step 3: Embedding in Joomla”

Via the Joomla article editor (TinyMCE)

Section titled “Via the Joomla article editor (TinyMCE)”

  1. Open the article

    In the Joomla back end, open the article or page you want.

  2. Switch to source code view

    Switch to the editor’s source code view (the Source code button, or </> in the TinyMCE editor).

  3. Insert the code

    Paste the code you copied from the WP-ImmoMakler settings.

  4. Save and publish

    Save and publish the article.

Via a custom HTML module

Section titled “Via a custom HTML module”

Alternatively, you can use a Custom HTML module:

  1. Create the module

    In the Joomla back end, go to Extensions → Modules and create a new module of type Custom HTML.

  2. Insert the code

    Paste the copied code into the module.

  3. Assign a position

    Assign the module to the position you want in your template and publish it.

Adjusting the Joomla text filters

Section titled “Adjusting the Joomla text filters”

By default, Joomla strips certain HTML elements out of articles — among them <iframe>, <style> and <script>. All three are part of the embed code. Under System → Global Configuration → Text Filters, adjust the filter settings for your user group so that these elements are allowed. Otherwise Joomla removes the code when you save, and the page shows nothing — or an iFrame without automatic resizing.

If the height is not adjusted automatically

Section titled “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 Joomla text filter removed the <script type="module"> when you saved. Check the output in the source code of the finished page.
  • 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.

Hosting options

Section titled “Hosting options”

You can set the iFrame up yourself or have your agency configure it. Alternatively, we offer a setup service.

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

You might also be interested in

Section titled “You might also be interested in”