Einbau der BOTTIMMO Köder in die eigene Website

Hier erfahren Sie, wie Sie die von BOTTIMMO bereitgestellten Köder auf Ihrer Website einfügen können und welche Integrationsmöglichkeiten Ihnen zur Verfügung stehen.

Was ist ein Köder-Widget?

Ein Widget ist ein kleines Element, das auf einer Website eingefügt wird, um bestimmte Funktionen oder Inhalte anzuzeigen. Es kann zum Beispiel ein Kontaktformular, eine Checkliste, ein Ratgeber oder eine Immobilienbewertungsfunktion sein. Widgets machen eine Website interaktiver und bieten den Besuchern zusätzliche Funktionen, ohne dass sie die Seite verlassen müssen. Das Integrieren eines Widgets in die eigene Website ist einfach und erfolgt mit einem kurzen Code, den man an der gewünschten Stelle einfügt.

Welche Arten von Köder-Widgets gibt es?

Das Einfügen von Köder-Widgets auf Ihrer Website ist ganz einfach und in wenigen Schritten erledigt. Bevor Sie starten, überlegen Sie kurz, welche Köder Sie auf Ihrer Website einsetzen möchten und wo diese am besten platziert werden. Dafür ist es hilfreich, die verschiedenen Arten von Köder-Widgets zu kennen.

Arten von Köder-Widgets

1 - Einzelne Widgets für Tools, Ratgeber oder Checklisten:

Für jedes Tool (z. B.: Immobilienbewertung), jeden Ratgeber und jede Checkliste gibt es ein eigenes Widget, das Sie auf Ihrer Website verwenden können.

Diese Widgets finden Sie in der BOTTIMMO App im Bereich Landingpages & Köder.

1. Wählen Sie dort ein Tool, einen Ratgeber oder eine Checkliste aus und klicken Sie darauf.
   
2. Auf der nächsten Seite sehen Sie rechts einen Button Einbindungscode. Klicken Sie darauf, um den Code und eine Vorschau des Widgets zu sehen.
   

2 - Widgets um alle Ratgeber oder Checklisten auf einmal einzubauen:

Sie können auch alle Ratgeber oder alle Checklisten mit nur einem Widget in Ihre Website integrieren.

Diese Option ist besonders zeitsparend, da Sie nur ein einziges Widget einfügen müssen, um alle Ratgeber (oder alle Checklisten) auf Ihrer Website anzuzeigen.

1. Diese Funktion finden Sie ebenfalls in der BOTTIMMO App im Bereich Landing Pages & Köder.
   
2. Über den einzelnen Themen der Ratgeber oder Checklisten gibt es die Option Alle Ratgeber/Checklisten in 1.
   

Wo finde ich alle Köder und den Einbaucode?

Die Köder sind sehr einfach zu finden:

1. Öffnen Sie in Ihrer BOTTIMMO-App den Menüpunkt “Landingpages & Köder”.

2. Wählen Sie das gewünschte Thema aus.

3. Klicken Sie auf den Button “</> EINBINDUNGS-CODE”.
   

BOTTIMMO Köder-Widgets auf Ihrer Website einbauen

Mit dieser Schritt-für-Schritt-Anleitung können Sie die Widgets ganz einfach selbst einbinden:

Hier noch einmal in Textform erklärt:

1. Code kopieren

1. Öffnen Sie in Ihrer BOTTIMMO-App den Menüpunkt “Landingpages & Köder”.
2. Wählen Sie das gewünschte Thema aus.
3. Klicken Sie auf den Button “</> EINBINDUNGS-CODE”.
4. Kopieren Sie den angezeigten Code, indem Sie auf das Kopieren-Symbol klicken.
   

2. Code einfügen

1. Öffnen Sie den Bearbeitungsbereich Ihrer Website.
2. Fügen Sie den kopierten Code an der gewünschten Stelle Ihrer Website ein – dort, wo das Widget angezeigt werden soll.
3. Speichern Sie Ihre Änderungen.

3. Fertig!

Das Widget wird nun auf Ihrer Website angezeigt, sobald diese aufgerufen wird. 🎉

Wichtig!

Wiederholen Sie diese Schritte für alle Widgets, die Sie auf Ihrer Seite integrieren möchten. Das war’s – so einfach ist es! 😊

Hinweise für den Code-Einbau

Der genaue Ablauf, wie der Code eingefügt wird, hängt von Ihrem Website-Anbieter ab.

Falls Sie nicht sicher sind, wie es funktioniert, kontaktieren Sie bitte den Support Ihres Website-Anbieters.

Unterstützung beim Einbau der Widgets

Wenn Sie Unterstützung bei der Implementierung benötigen, können wir Ihnen unseren Partner "RealXLab" empfehlen, der gerne für Sie die Einbindung übernimmt.

Sie als BOTTIMMO-Kunde erhalten bessere Konditionen. Hier geht's zum Partnerbereich.

Individuelle Anpassungen an den BOTTIMMO-Ködern

Falls Ihre Website besondere Anforderungen hat oder Sie zusätzliche Details bei der Einbindung berücksichtigen möchten, können Sie diese Anleitung an Ihren Website-Betreuer weiterleiten.

Hinweis: Erst die Standardvariante prüfen – s. o.

In den meisten Fällen ist die Standard-Einbindung (siehe oben) völlig ausreichend. Sie funktioniert zuverlässig und benötigt keine Anpassungen.

Falls jedoch eine flexiblere Einbindung nötig oder gewünscht ist, beachten Sie bitte die folgende Vorgehensweise:

1 - Script einfügen

Platzieren Sie den folgenden Code idealerweise im <head>-Bereich oder am Ende des <body> Ihrer Website:

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

Achten Sie darauf, dass das Script nur die Attribute src und ggf. defer enthält.

2 - Leeres Element hinzufügen

Fügen Sie an der Stelle im <body> ein leeres Element ein, wo das Widget angezeigt werden soll. Verwenden Sie dafür den folgenden Code:

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

Ersetzen Sie "ihr-firmen-kürzel" durch das BOTTIMMO-Firmenkürzel Ihres Unternehmens.
Sie finden dieses Firmenkürzel im Standard-Einbindungscode im Attribut data-company="ihr-firmen-kürzel".

Zusätzliche Informationen für Website-Betreuer

1. Das Script lädt das Widget automatisch an der definierten Stelle.
   
2. Prüfen Sie, ob weitere Anpassungen nötig sind, z. B. für das Styling oder die Integration in ein bestehendes Layout.
   

Diese Anleitung ermöglicht maximale Flexibilität bei der Einbindung der BOTTIMMO-Köder auf Ihrer Website.

Anleitung für Einbindungs-Spezialfälle

Sonderfall 1: SPA (Single Page Application)

Falls Ihre Website mit React oder einem ähnlichen Frontend-Framework arbeitet, reichen die Standard-Einbindungsvarianten nicht aus. Der Grund: Unser Script versucht, das iFrame sofort zu initialisieren. Wenn das Platzhalter-Element zu diesem Zeitpunkt noch nicht vorhanden ist, wird kein iFrame angezeigt.

Empfohlene Lösung:

Nutzen Sie die zweite Variante (Individuelle Anpassung) aus der Anleitung und stellen Sie sicher, dass folgendes Event getriggert wird, sobald das Platzhalter-Element gerendert wurde:

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

Damit signalisiert Ihre Anwendung unserem Script, dass das Element nun verfügbar ist und initialisiert werden kann.

Sonderfall 2: Einbindung eines Köder-Widgets in ein Overlay

Was ist ein Overlay?

Ein Overlay ist ein Fenster oder eine Art Hinweis, der über einer Website erscheint, ohne die eigentliche Seite zu verlassen (ähnlich einem Pop-Up). Es legt sich sozusagen „über“ den restlichen Inhalt. Bei BOTTIMMO verwenden wir diese Overlays zum Beispiel, um besonders wichtige Informationen und Prozesse anzuzeigen.

Wenn das Widget erst durch eine Benutzeraktion (z. B. durch Klick auf einen Button) angezeigt werden soll, können Darstellungsprobleme auftreten, da das Script die Höhe des Widgets falsch berechnen könnte.

In diesem Fall kombinieren Sie die Standard-Einbindung mit einer individuellen Anpassung:

1- Script einfügen
Platzieren Sie das folgende Script im <head> Ihrer Website:

1. <head>

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

   </head>

2 - Platzhalter-Element erstellen

Fügen Sie im <body> ein Platzhalter-Element ein, allerdings ohne das Attribut data-bottimmo.
Stattdessen geben Sie dem Element eine eindeutige ID:

1. <body>

     <!-- Content -->

     <div data-company="ihr-firmen-kürzel" data-slug="immobilienbewertung" id="bottimmo-widget-1"></div>

     <!-- Weiterer Content -->

   </body>

Ersetzen Sie "ihr-firmen-kürzel" durch das BOTTIMMO-Firmenkürzel Ihres Unternehmens. Sie finden dieses Firmenkürzel im Standard-Einbindungscode im Attribut data-company="ihr-firmen-kürzel".

3 - Widget initialisieren

Sobald das Overlay geöffnet ist und die enthaltenen Elemente sichtbar sind, initialisieren Sie das Widget per JavaScript:

1. var div = document.getElementById('bottimmo-widget-1');

   div.dataset.bottimmo = true;

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

Wichtig: Dieses Script muss, nachdem das Overlay sichtbar ist, ausgeführt werden, damit die Darstellung korrekt funktioniert.

Zusammenfassung

• Für SPAs ist das Triggern des Events bottimmo:element-added nach der Platzhalter-Erstellung entscheidend.

• Für Overlays verwenden Sie ein Platzhalter-Element mit einer ID, das Sie erst bei Bedarf aktivieren.

Diese Speziallösungen garantieren, dass die BOTTIMMO-Köder auch in komplexen Anwendungsfällen optimal funktionieren.

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

• Wie erreiche ich BOTTIMMO?

  Die Kontaktdaten vom Customer Success finden Sie direkt auf der BOTTIMMO Plattform unter dem Menüpunkt "Hilfe & Fortbildung". Der Customer Success ist werktags von 09.00.-12.00 Uhr und von 13.00-17.00 Uhr besetzt und kümmert sich gerne um Ihr ...

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

• Die BOTTIMMO News Flashs

  Täglich erreichen uns neue, spannende Meldungen aus der Immobilienbranche. Wir sichten diese und bereiten die Themen für Sie auf: ein Blogpost und passende Social Media Postings sind Standard, oft gibt es noch ein Zeitungsinterview mit Ihnen. ...

• Ü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 ...