Integration in jedes CMS

So baust du Lead-Magnete in deine Webseite ein

Schritt für Schritt — für die zwölf gängigsten CMS-Systeme. Mit Code-Snippet zum Kopieren, Screenshots und Tipps zu typischen Stolperfallen. Kein Plugin nötig, keine Programmierkenntnisse.

Zurück zur Lead-Magnete-Übersicht
WordPress TYPO3 Joomla Drupal Webflow Wix Jimdo Squarespace Shopify Onepager Maklersoftware Eigenes CMS

Vor dem Einbau: Den Embed-Code holen

Unabhängig vom CMS brauchst du nur einen einzigen Code-Schnipsel. Den findest du im PropShift-Dashboard unter Lead-Magnete → deinen Magnet auswählen → „Embed-Code & Vorschau". Der Code sieht so aus:

<script src="https://app.propshift.de/widget/propshift-valuation/propshift-valuation.js" defer></script>
<propshift-valuation wuid="DEIN-INDIVIDUELLER-CODE"></propshift-valuation>

Die erste Zeile lädt das Widget-Programm, die zweite platziert es auf deiner Seite. Diese beiden Zeilen kommen exakt so in deine Webseite — egal welches CMS du nutzt. Die Anleitungen unten erklären jeweils, wo genau du diese zwei Zeilen einfügst.

Tipp: Lege den Code zunächst auf eine Test- oder Entwurfs-Seite, bevor du ihn auf der Live-Startseite platzierst. So kannst du das Aussehen prüfen, ohne dass Besucher die Bauarbeiten sehen.

Anleitungen pro CMS

Funktioniert mit: WordPress.org (selbst-gehostet) und WordPress.com Business-Plan oder höher. Mit jedem Theme. Mit dem Gutenberg-Block-Editor (Standard seit 2018) und dem klassischen Editor.

Schritt für Schritt — Block-Editor (Gutenberg)
1
Seite öffnenGehe ins WordPress-Admin → „Seiten" → wähle die Seite aus (oder erstelle eine neue, z. B. „Immobilienbewertung").
2
Custom-HTML-Block einfügenKlicke auf das blaue „+"-Symbol an der Stelle, an der das Widget erscheinen soll. Suche nach „Custom HTML" (auf Deutsch: „Eigenes HTML") und füge den Block ein.
3
Embed-Code einfügenFüge den kompletten PropShift-Embed-Code in den Block ein.
4
Speichern und aktualisierenKlicke auf „Aktualisieren" (oder „Veröffentlichen") oben rechts. Fertig.
Mit dem klassischen Editor

Wechsle in den „Text"-Tab (rechts oben in der Editor-Leiste) und füge den Code an der gewünschten Stelle ein. WordPress wandelt den Code im sichtbaren „Visuell"-Tab nicht in echtes HTML um — das ist normal.

Stolperfalle: Wenn du Caching-Plugins wie WP Rocket, W3 Total Cache oder LiteSpeed Cache nutzt, kann es sein, dass das Widget erst nach einem Cache-Leeren erscheint. Auch JavaScript-Optimierungs-Funktionen („Defer JS", „Minify JS") können das Laden verzögern — bei Problemen das Widget-Script von der Optimierung ausnehmen.
Tipp: Page Builder wie Elementor, Divi und WPBakery haben jeweils einen eigenen „HTML"- oder „Code"-Block. Das Prinzip ist dasselbe: HTML-Block einfügen, Embed-Code reinkopieren, speichern.

Funktioniert mit: TYPO3 v9 und neuer. Standard-Installation, keine Extensions nötig.

1
Backend öffnenLogge dich ins TYPO3-Backend ein und gehe ins Modul „Seite".
2
Seite und Inhaltsspalte wählenWähle die Seite aus, auf der das Widget erscheinen soll. Klicke auf „+ Inhalt" in der gewünschten Inhaltsspalte.
3
Content-Element „Reiner HTML-Inhalt" wählenWechsle auf den Tab „Spezielle Elemente" → „Reiner HTML-Inhalt" (englisch: „Plain HTML"). Falls dieser Eintrag fehlt, muss der TYPO3-Admin ihn in den TSconfig-Einstellungen freischalten.
4
Embed-Code einfügenTrage den PropShift-Embed-Code in das Textfeld „HTML" ein und speichere.
Stolperfalle: TYPO3 filtert standardmäßig manche HTML-Tags raus. Achte darauf, dass die TypoScript-Konfiguration in RTE.default.proc.HTMLparser_db.allowTags keine restriktive Liste hat, die <script> blockiert. Im Zweifel beim TYPO3-Admin nachfragen.

Funktioniert mit: Joomla 4 und neuer (auch Joomla 3 mit Anpassung am Editor).

1
Inhalt → Artikel öffnenLogge dich ins Joomla-Admin ein und navigiere zu „Inhalt" → „Artikel" → den gewünschten Artikel.
2
Editor auf Quellcode-ModusIm Editor (Standard: TinyMCE) findest du oben den „Quellcode"-Button (</>). Klicke darauf, um in den HTML-Quellcode zu wechseln.
3
Embed-Code einfügenFüge den Code an der gewünschten Stelle im HTML ein und klicke auf „Aktualisieren".
4
Artikel speichernSpeichere den Artikel oben rechts.
Tipp: Alternativ kannst du das Widget als eigenes Modul vom Typ „Custom HTML" anlegen und in einer Modul-Position deines Templates platzieren — dann erscheint es auf allen Seiten, die diese Position nutzen.
Stolperfalle: Joomlas TinyMCE entfernt <script>-Tags beim Speichern, wenn der „Codetags filtern"-Modus aktiv ist. Unter „System" → „Konfiguration" → „Editor TinyMCE" → „Erlaubte Code-Tags" muss script stehen.

Funktioniert mit: Drupal 9 und 10. Der Layout-Builder ist empfohlen, geht aber auch klassisch via Custom-Block.

1
Block erstellenGehe ins Admin → „Struktur" → „Block-Layout" → „Custom-Block-Bibliothek" → „Custom-Block hinzufügen".
2
Textformat „Full HTML" wählenWichtig: Im Body-Feld unten den „Textformat"-Dropdown auf „Full HTML" oder ein vergleichbares ungefiltertes Format umstellen.
3
Embed-Code einfügenWechsle in den Quellcode-Modus (Editor-Symbol) und füge den Code ein.
4
Block platzierenSpeichere den Block und platziere ihn im Block-Layout in der gewünschten Region (z. B. „Content", „Sidebar Second").
Stolperfalle: Drupal filtert <script> in den meisten Standard-Textformaten heraus. Du brauchst das „Full HTML"-Format mit deaktiviertem „HTML-Filter". Aus Sicherheitsgründen sollte „Full HTML" nur Admins zur Verfügung stehen.

Funktioniert mit: Allen Webflow-Plänen, die HTML-Embeds erlauben (Basic, CMS, Business). Auf dem kostenlosen Starter-Plan ist Custom Code blockiert.

1
Designer öffnenLogge dich in Webflow ein und öffne deine Seite im Designer.
2
Embed-Element platzierenIm linken Panel „Add" („+"-Symbol) → unter „Components" findest du „Embed". Ziehe es per Drag-and-Drop an die gewünschte Stelle.
3
Code einfügenDer Code-Editor öffnet sich automatisch. Füge den PropShift-Embed-Code ein und klicke auf „Save & Close".
4
PublishKlicke oben rechts auf „Publish" und wähle deine Domain. Der Embed wird erst in der veröffentlichten Version sichtbar, nicht in der Designer-Preview.
Tipp: Du nutzt das Widget auf mehreren Seiten? Erstelle ein „Symbol" aus dem Embed-Element — dann ist es überall einheitlich, und Änderungen wirken auf allen Seiten gleichzeitig.

Funktioniert mit: Wix Editor und Wix Studio. Auf kostenlosen Plänen ist Embed Code zwar verfügbar, allerdings nur mit Wix-Branding auf der Seite.

1
Wix Editor öffnenÖffne deine Site im Wix Editor.
2
Element hinzufügenLinks im Menü auf „Elemente hinzufügen" („+"-Symbol) → „Einbetten" → „Code einbetten" („Embed HTML"). Ziehe das Element an die gewünschte Stelle.
3
HTML Code wählenIm Editor-Popup „HTML Code" (nicht „Eine Site") auswählen und den PropShift-Embed-Code einfügen.
4
Höhe anpassen und speichernWix legt das Element in ein iFrame — du musst die Höhe manuell ausreichend groß ziehen (mindestens 800 px für das Bewertungs-Widget), damit nichts abgeschnitten wird. Klicke auf „Apply" und veröffentliche.
Stolperfalle: Wix bettet Custom-HTML in einem iFrame ein, was die Höhenanpassung erschwert. Wenn das Widget unten abgeschnitten wird, ziehe das Embed-Element im Editor größer. Alternativ kannst du Wix Studio nutzen — dort gibt es einen flexibleren Custom-Code-Block.

Funktioniert mit: Jimdo Creator (klassisch) und Jimdo Dolphin. Jimdo ist in Deutschland bei Maklern weit verbreitet.

Jimdo Creator
1
Seite im Bearbeitungs-Modus öffnenLogge dich ein und klicke auf die Seite, auf der das Widget erscheinen soll.
2
Element hinzufügenKlicke an der gewünschten Stelle auf „+ Element hinzufügen" → „Weitere Inhalte & Add-ons" → „Widget/HTML".
3
Code einfügen und speichernFüge den PropShift-Embed-Code in das HTML-Feld ein und klicke auf „Speichern".
Jimdo Dolphin

Im Dolphin-Editor heißt das Element „HTML einbetten". Funktioniert sonst identisch.

Tipp: Erstelle eine eigene Seite „Immobilienbewertung" oder „Kontakt" und platziere das Widget dort als primäres Element. Verlinke diese Seite prominent im Hauptmenü.

Funktioniert mit: Allen Squarespace-Plänen, die Code-Blöcke erlauben (Personal-Plan und höher).

1
Seite bearbeitenLogge dich ein und navigiere zur Seite. Klicke auf „Bearbeiten" oben rechts.
2
Code-Block hinzufügenAn der gewünschten Stelle auf „Block hinzufügen" („+"-Symbol) und nach „Code" suchen.
3
Embed-Code einfügenIm Code-Block-Editor stelle den Typ auf „HTML" (Standard). Füge den PropShift-Embed-Code ein.
4
Vorschau und VeröffentlichenSchließe den Block-Editor und veröffentliche die Seite.
Stolperfalle: Squarespace blockiert Custom Code auf der Vorschau-Domain manchmal. Erst auf der echten Domain testet sich das Widget zuverlässig. Auch der Squarespace-AMP-Mode (falls aktiv) bricht das Widget — dann AMP für die Seite ausschalten.

Funktioniert mit: Allen Shopify-Plänen. Praktisch für Makler, die Shopify als Plattform für ihre Maklerseite mit zusätzlichem Service-Bereich nutzen.

1
Shopify-Admin öffnenGehe ins Admin → „Online Store" → „Pages" → wähle die Page (oder erstelle eine neue, z. B. „Bewertung").
2
HTML-Modus im EditorKlicke im Page-Editor auf das </>-Symbol oben rechts, um in den HTML-Quellcode zu wechseln.
3
Embed-Code einfügenFüge den PropShift-Embed-Code ein und speichere.
Tipp: Für volle Theme-Integration kannst du den Embed auch im Theme-Customizer als Custom-Liquid-Section einfügen. Damit lädt das Widget auf jeder Seite des Themes (z. B. nur auf der Startseite). Dafür benötigst du den Theme-Editor in „Online Store" → „Themes" → „Customize".

Funktioniert mit: Strato Website-Baukasten, Telekom Webhosting, IONOS MyWebsite, 1&1, Hostpoint Sites und ähnlichen Baukasten-Lösungen.

1
Editor öffnenLogge dich in deinen Baukasten ein und öffne die Seite.
2
HTML-Block / Code-Block einfügenSuche im Element-Menü nach „HTML", „Code", „Embed" oder „Eigener Code". Bei den meisten Baukästen heißt es ähnlich — füge das Element an die gewünschte Stelle ein.
3
Embed-Code einfügen und veröffentlichenTrage den PropShift-Embed-Code ein und veröffentliche die Seite.
Stolperfalle: Einige Baukästen (besonders Strato in älteren Versionen) erlauben keine externen Scripts. In dem Fall musst du auf die neuere Editor-Version umsteigen oder Custom-Code in den Tarif-Einstellungen freischalten.

Funktioniert mit: FlowFact Performer, onOffice enterprise, Propstack, Estatemax — überall dort, wo eine Whitelabel-Maklerseite mit CMS-Funktion enthalten ist.

1
Backend deiner Maklersoftware öffnenLogge dich ins Admin/CMS deiner Maklersoftware ein.
2
Inhaltsseite öffnen oder anlegenWähle eine bestehende Inhaltsseite (z. B. „Kontakt", „Über uns") oder lege eine neue an („Bewertung", „Rückruf").
3
HTML-Inhalt einfügenDie meisten Maklersoftware-CMS bieten einen „HTML"- oder „Quellcode"-Modus im Editor. Wechsle dorthin und füge den PropShift-Embed-Code ein. Bei FlowFact heißt das z. B. „HTML-Editor", bei onOffice findest du es unter „Layout-Builder" → Element „HTML".
4
Speichern und veröffentlichenSpeichere und veröffentliche die Seite.
Tipp: Falls deine Maklersoftware keinen HTML-Editor anbietet, frag den Support — fast alle Anbieter haben eine Möglichkeit, ein eigenes HTML-Snippet einzubinden. Oft ist es ein Schaltflächen-/Einstellungs-Punkt, der erst freigeschaltet werden muss.

Funktioniert mit: Jedem System, das HTML-Output produziert — statische Seiten, eigene PHP/Node-Anwendungen, Headless-CMS-Setups (Strapi, Sanity, Contentful), Hugo/Jekyll/Astro/Eleventy.

1
HTML-Template öffnenÖffne die HTML-Datei oder das Template, in dem das Widget erscheinen soll.
2
Code-Snippet einsetzenSetze den PropShift-Embed-Code an der gewünschten Stelle ein — am besten irgendwo innerhalb von <body>, dort wo das Widget visuell erscheinen soll.
3
DeployenLade die Datei via FTP/Git/CI hoch und teste das Ergebnis im Browser.
Tipp: Für Headless-Setups kannst du das Custom Element <propshift-valuation> wie jede andere HTML-Component nutzen. Bei React/Vue/Angular: Custom Element wird vom Framework wie jedes native DOM-Element behandelt; bei React 19 funktioniert es direkt, bei älteren React-Versionen evtl. ref verwenden.

Allgemeine Tipps und Stolperfallen

Cache-Plugins zurücksetzen

Nach dem Einbau Cache-Plugins (WP Rocket, W3 Total Cache, LiteSpeed) und CDN-Caches (Cloudflare, BunnyCDN) leeren — sonst zeigt der Browser eine alte Version ohne Widget.

HTTPS ist Pflicht

Das Widget lädt über HTTPS. Wenn deine Seite noch über HTTP läuft, wird der Browser das Script aus Sicherheitsgründen blockieren („Mixed Content"). Aktiviere SSL — bei allen Anbietern üblicherweise kostenlos via Let's Encrypt.

Im Inkognito-Modus testen

Browser-Erweiterungen (z. B. Ad-Blocker, uBlock Origin) können Widgets blockieren. Im Inkognito-/Privatfenster ohne Erweiterungen siehst du das echte Endkunden-Erlebnis.

Browser-Konsole nutzen

Wenn das Widget nicht erscheint: F12 drücken → Tab „Konsole". Hier siehst du eventuelle Fehler. Häufigster Fall: das Script lädt nicht, weil CSP-Header oder ein Sicherheits-Plugin externe Scripts blockt.

Auf Mobile prüfen

Die Widgets sind responsive und passen sich der Container-Breite an. Trotzdem solltest du nach dem Einbau einmal auf einem echten Smartphone (oder mit DevTools-Device-Toolbar) prüfen, ob die Darstellung passt.

Mehrere Magnete parallel

Auf einer Seite können mehrere PropShift-Widgets gleichzeitig laufen — z. B. ein Bewertungs-Widget oben und ein Kontakt-Widget im Footer. Jedes Widget hat seinen eigenen Embed-Code mit individuellem wuid.

Loslegen statt lange tüfteln

14 Tage gratis testen — du kannst sofort einen Magnet anlegen und den Code in deiner Webseite ausprobieren.
Keine Kreditkarte für den Test nötig.

14 Tage gratis testen Zur Lead-Magnet-Übersicht
Jetzt 14 Tage gratis testen — Jederzeit kündbar Kostenlos starten