Leitfaden zum Einbau der BOTTIMMO Köder auf der eigenen Website

Leitfaden zum Einbau der BOTTIMMO Köder auf der eigenen Website

In diesem Video zeigen wir Ihnen, was der Implementierungsleitfaden beinhaltet und wo Sie diesen finden.

Das Video beantwortet u.a. folgende Fragen:
  1. Wo finde ich den Implementierungsleitfaden?
  2. Wie kann ich die BOTTIMMO Inhalte auf der eigenen Website integrieren?
  3. technische Anleitung für die Integration der BOTTIMMO Inhalte
  4. Informationen zur Ergänzung Ihrer Datenschutzerklärung



Kommen wir als nun zur technischen Implementierung:

Technische Integration der BOTTIMMO Inhalte auf der eigenen Website

Sie haben verschiedene Möglichkeiten, unsere Inhalte als Widget auf Ihrer Website einzubinden.


1. Wenn Sie die Widgets selbst einbinden, nutzen Sie bitte die folgende Anleitung:

Im einfachsten Fall nehmen Sie den von uns automatisch generierten Code und platzieren diesen an der Stelle auf Ihrer Website, an welcher das Widget angezeigt werden soll. Dieser lädt das Formular, über welches der jeweilige Inhalt angefordert werden kann. Sie finden den von uns bereitgestellten Code in Ihrer App unter dem Menüpunkt “Landingpages & Köder”.
Dort klicken Sie auf dem entsprechenden Inhalt auf den Button “</> EINBINDUNGS-CODE” und kopieren sich dann das angezeigte Schnipsel, das Sie ganz einfach bei sich einbinden können.
Wie die Einbindung konkret auf Ihrer Webseite funktioniert ist von dem Webseiten-Anbieter abhängig. Kontaktieren Sie diesen, sollten Sie Unterstützung benötigen.

Wenn Sie eine Wordpress-Website haben, schauen Sie sich gerne unsere Videos zur Einbindung an.

2. Sie haben einen speziellen Webseiten Typ oder möchten individuelle Details bei der Einbindung berücksichtigen? Dann leiten Sie bitte folgende Anleitung an Ihren Website-Betreuer weiter:

In den meisten Fällen ist die obige Variante ausreichend und erfüllt vollständig ihren Zweck. In manchen Fällen ist eine flexiblere Einbindung nötig oder sinnvoll. Falls Sie einen Website-Betreuer haben, wird dieser feststellen, ob zusätzliche Anpassungen notwendig sind. Ansonsten bleiben Sie bei der obigen Variante
Sie können das Script an beliebiger Stelle, idealerweise im <head> oder am Ende des <body> laden. Achten Sie hierbei darauf, dass nur src und ggf. defer definiert sind.

<head>
<script src="https://iframe.immowissen.org/loader.min.js" defer></script>
</head>

Anschliessend platzieren Sie ein leeres Element an beliebiger Stelle im <body>:

<body>
<!-- Content -->
<div data-company="ihr-firmen-kürzel" data-slug="immobilienbewertung" data-bottimmo>
</div>
<!-- Weiterer Content -->
</body>

3. Sonderfall SPA (Single Page Application)

Kommt auf Ihrer Website React oder ein anderes Frontend-Framework zum Einsatz, werden oben beschriebene Varianten alleine nicht ausreichend sein, da unser Script die iFrames sofort initialisiert. Wenn unser Script kein entsprechendes Platzhalter-Element findet, kann es keinen iFrame anzeigen. In diesem Fall ist die zweite Variante zu empfehlen. Stellen Sie sicher, dass Sie, sobald das leere Platzhalter-Element gerendert wurde, folgendes Event triggern, damit unser Script darauf reagieren und das iFrame initialisieren kann.

window.dispatchEvent(new Event('bottimmo:element-added'))

4. Einbindung in einem Overlay (Einblendung nach Aktion durch den User)

Die normale Einbindung erfordert, dass das Widget direkt sichtbar ist. Wenn das Script zwar geladen wird, aber erst durch eine Aktion des Users (z.B. Klick auf einen Button) angezeigt wird, kann es zu Probleme in der Darstellung (inkorrekte Höhe) kommen. Hier empfiehlt es sich eine Kombination aus den vorherigen beiden Lösungen (1.2 + 1.3) umzusetzen. Im <head> muss das Script platziert werden, im <body> nur ein Platzhalter-Element mit den Inhalten des von uns zur Verfügung gestellten Snippets. Anders als im oberen Beispiel muss das Attribut „data-bottimmo“ weggelassen werden, welches bewirkt, dass das Element sofort initialisiert wird. Außerdem benötigt es eine ID, um später auf genau dieses Element zugreifen zu können.


<head>
<script src="https://iframe.immowissen.org/loader.min.js" defer></script>
</head>
<body>
<!-- Content -->
<div data-company="ihr-firmen-kürzel" data-slug="immobilienbewertung" id="bottimmo-widget-1" />
<!-- Weiterer Content -->
</body>

Sobald das Overlay angezeigt werden soll, kann das Widget initialisiert werden. Dies muss per JavaScript passieren (in der Regel wird ein Overlay auch per JavaScript geöffnet). Wichtig ist, dass das Script ausgeführt wird, nachdem das Overlay geöffnet wurde und die darin befindlichen Elemente sichtbar sind. Hier muss auf die ID zugegriffen werden, die wir dem Element oben gegeben haben.

var div = document.getElementById('bottimmo-widget-1')
div.dataset.bottimmo = true
window.dispatchEvent(new Event('bottimmo:element-added'))

5. Problemlösung: das Widget (Iframe) ist viel zu hoch (dadurch entsteht viel Weißraum)

In manchen Fällen kann es dazu kommen, dass das Iframe viel zu hoch ist und dadurch sehr viel Weißraum auf der Seite entsteht. Der Consent-Banner des Iframes hängt dann ganz unten auf der Webseite.
Dieses Problem ist sehr individuell und auf die Programmierung der eigenen Website zurückzuführen. Es gibt in dem Fall aber einen Workaround, der in bisherigen Tests unsererseits funktioniert hat. Anstelle des normalen Codes, den Sie in Ihrer App kopieren, setzen Sie bitte folgenden Code ein (und ändern die Werte entsprechend):

<script src="https://iframe.immowissen.org/loader.min.js" defer></script>
<script>
    const div = document.createElement('div')
    div.dataset.bottimmo = true

    // !! START Anpassungen

    // Hier tragen Sie den Wert ein, der in data-company="..." steht
    div.dataset.company = 'ihr-firmen-kürzel'

    // Hier tragen Sie den Wert ein, der in data-slug="..." steht
    div.dataset.slug = 'immobilienbewertung'

    // !! ENDE Anpassungen

    const $this = document.currentScript
    setTimeout(() => {
        $this.parentElement.insertBefore(div, $this)
        window.dispatchEvent(new Event('bottimmo:element-added'))
    }, 0)
</script>


Alle Informationen zum Thema Datenschutz und Cookies finden Sie auf der BOTTIMMO Plattform unter "Impressum & Rechtliches".

Zum Thema "Cookie-Einbindung" schauen Sie sich diesen Artikel an: Hier geht's zum Artikel

Transkript (Wortlaut) des oben gezeigten Videos:

Wenn Sie die Inhalte auf Ihrer Webseite integrieren möchten oder auf Grund der Integration der Inhalte Ihre Datenschutzerklärung anpassen möchten, haben wir hier einen entsprechenden Leitfaden zur Unterstützung erstellt. Diesen Leitfaden finden Sie unten im Menüpunkt: "Landingpages&Köder" und/oder auf der entsprechenden Seite oben links unter dem Namen "Implementierungsleitfaden".
In diesem Leitfaden erhalten Sie weitere Informationen und Anleitungen inklusive Hilfelinks, um die BOTTIMMO-Inhalte einbinden zu können. Zusätzlich finden Sie einen Link zum Thema Datenschutz und den jeweiligen Textbausteinen.

    • Related Articles

    • Wo finde ich alle relevanten Daten zur Implementierung der BOTTIMMO Inhalte auf meiner Website?

      In diesem Video zeigen wir Ihnen, wo Sie alle relevanten Daten für die Implementierung der BOTTIMMO Inhalte auf Ihrer Website finden: Weitere Informationen finden Sie im Artikel Leitfaden zur Implementierung. Gerne können Sie auch auf einen unserer ...

    • BOTTIMMO Vorlagen

      Briefvorlagen, Zeitungsartikel, Blogbeiträge - um auch in diesen Bereichen mit Ihrer Kompetenz glänzen zu können, haben wir Ihnen einige Vorlagen zu den verschiedensten aktuell relevanten Themen zusammengestellt. Außerdem erhalten Sie in dieser ...

    • Wie kann ich die BOTTIMMO Inhalte auf meiner WordPress Website integrieren?

      Damit das BOTTIMMO System erfolgreich läuft, ist es essenziell, dass Sie die BOTTIMMO Tools und Ratgeber mit den von uns zur Verfügung gestellten Einbindungscodes direkt auf die Startseite Ihrer Website einbinden. So können Interessenten auf Ihrer ...

    • Übersichtsseite "Landingpages & Köder"

      BOTTIMMO bietet Ihnen effektive Köder und die dazu passenden Werbemittel, um mit Interessenten in Kontakt zu kommen. Alles finden Sie direkt unter dem Menüpunkt "Landingpages & Köder". In diesem Video geben wir Ihnen eine kompakte Übersicht, was Sie ...

    • Immobilienbewertung auf der BOTTIMMO Plattform

      Sie können als Makler direkt auf der BOTTIMMO Plattform mit wenigen Klicks eine Bewertung einer Immobilie durchführen. In diesem Video zeigen wir Ihnen, wie Sie als Makler direkt auf der BOTTIMMO Plattform eine Immobilie bewerten können. Das Video ...