Integration in jedes CMS

So lassen sich Lead-Magnete in die Webseite einbauen

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 ist nur ein einziger Code-Schnipsel nötig. Er findet sich im PropShift-Dashboard unter Lead-Magnete → den 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 der Seite. Diese beiden Zeilen kommen exakt so in die Webseite — egal welches CMS. Die Anleitungen unten erklären jeweils, wo genau diese zwei Zeilen einzufügen sind.

Tipp: Den Code zunächst auf eine Test- oder Entwurfs-Seite legen, bevor er auf der Live-Startseite platziert wird. So lässt sich 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 öffnenIns WordPress-Admin gehen → „Seiten" → die Seite auswählen (oder eine neue erstellen, z. B. „Immobilienbewertung").
2
Custom-HTML-Block einfügenAuf das blaue „+"-Symbol an der Stelle klicken, an der das Widget erscheinen soll. Nach „Custom HTML" (auf Deutsch: „Eigenes HTML") suchen und den Block einfügen.
3
Embed-Code einfügenDen kompletten PropShift-Embed-Code in den Block einfügen.
4
Speichern und aktualisierenOben rechts auf „Aktualisieren" (oder „Veröffentlichen") klicken. Fertig.
Mit dem klassischen Editor

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

Stolperfalle: Bei Caching-Plugins wie WP Rocket, W3 Total Cache oder LiteSpeed Cache 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 öffnenIns TYPO3-Backend einloggen und ins Modul „Seite" gehen.
2
Seite und Inhaltsspalte wählenDie Seite auswählen, auf der das Widget erscheinen soll. Auf „+ Inhalt" in der gewünschten Inhaltsspalte klicken.
3
Content-Element „Reiner HTML-Inhalt" wählenAuf den Tab „Spezielle Elemente" → „Reiner HTML-Inhalt" (englisch: „Plain HTML") wechseln. Falls dieser Eintrag fehlt, muss der TYPO3-Admin ihn in den TSconfig-Einstellungen freischalten.
4
Embed-Code einfügenDen PropShift-Embed-Code in das Textfeld „HTML" eintragen und speichern.
Stolperfalle: TYPO3 filtert standardmäßig manche HTML-Tags raus. Darauf achten, 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 öffnenIns Joomla-Admin einloggen und zu „Inhalt" → „Artikel" → den gewünschten Artikel navigieren.
2
Editor auf Quellcode-ModusIm Editor (Standard: TinyMCE) befindet sich oben der „Quellcode"-Button (</>). Darauf klicken, um in den HTML-Quellcode zu wechseln.
3
Embed-Code einfügenDen Code an der gewünschten Stelle im HTML einfügen und auf „Aktualisieren" klicken.
4
Artikel speichernDen Artikel oben rechts speichern.
Tipp: Alternativ lässt sich das Widget als eigenes Modul vom Typ „Custom HTML" anlegen und in einer Modul-Position des 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 erstellenIns Admin gehen → „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ügenIn den Quellcode-Modus (Editor-Symbol) wechseln und den Code einfügen.
4
Block platzierenDen Block speichern und im Block-Layout in der gewünschten Region platzieren (z. B. „Content", „Sidebar Second").
Stolperfalle: Drupal filtert <script> in den meisten Standard-Textformaten heraus. Nötig ist 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 öffnenIn Webflow einloggen und die Seite im Designer öffnen.
2
Embed-Element platzierenIm linken Panel „Add" („+"-Symbol) → unter „Components" befindet sich „Embed". Es per Drag-and-Drop an die gewünschte Stelle ziehen.
3
Code einfügenDer Code-Editor öffnet sich automatisch. Den PropShift-Embed-Code einfügen und auf „Save & Close" klicken.
4
PublishOben rechts auf „Publish" klicken und die Domain wählen. Der Embed wird erst in der veröffentlichten Version sichtbar, nicht in der Designer-Preview.
Tipp: Das Widget auf mehreren Seiten im Einsatz? Ein „Symbol" aus dem Embed-Element erstellen — 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 öffnenDie Site im Wix Editor öffnen.
2
Element hinzufügenLinks im Menü auf „Elemente hinzufügen" („+"-Symbol) → „Einbetten" → „Code einbetten" („Embed HTML"). Das Element an die gewünschte Stelle ziehen.
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 — die Höhe muss manuell ausreichend groß gezogen werden (mindestens 800 px für das Bewertungs-Widget), damit nichts abgeschnitten wird. Auf „Apply" klicken und veröffentlichen.
Stolperfalle: Wix bettet Custom-HTML in einem iFrame ein, was die Höhenanpassung erschwert. Wenn das Widget unten abgeschnitten wird, das Embed-Element im Editor größer ziehen. Alternativ lässt sich 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 öffnenEinloggen und auf die Seite klicken, auf der das Widget erscheinen soll.
2
Element hinzufügenAn der gewünschten Stelle auf „+ Element hinzufügen" → „Weitere Inhalte & Add-ons" → „Widget/HTML" klicken.
3
Code einfügen und speichernDen PropShift-Embed-Code in das HTML-Feld einfügen und auf „Speichern" klicken.
Jimdo Dolphin

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

Tipp: Eine eigene Seite „Immobilienbewertung" oder „Kontakt" erstellen und das Widget dort als primäres Element platzieren. Diese Seite prominent im Hauptmenü verlinken.

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

1
Seite bearbeitenEinloggen und zur Seite navigieren. Oben rechts auf „Bearbeiten" klicken.
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 den Typ auf „HTML" (Standard) stellen. Den PropShift-Embed-Code einfügen.
4
Vorschau und VeröffentlichenDen Block-Editor schließen und die Seite veröffentlichen.
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 öffnenIns Admin gehen → „Online Store" → „Pages" → die Page wählen (oder eine neue erstellen, z. B. „Bewertung").
2
HTML-Modus im EditorIm Page-Editor oben rechts auf das </>-Symbol klicken, um in den HTML-Quellcode zu wechseln.
3
Embed-Code einfügenDen PropShift-Embed-Code einfügen und speichern.
Tipp: Für volle Theme-Integration lässt sich der 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 ist der Theme-Editor in „Online Store" → „Themes" → „Customize" nötig.

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

1
Editor öffnenIn den Baukasten einloggen und die Seite öffnen.
2
HTML-Block / Code-Block einfügenIm Element-Menü nach „HTML", „Code", „Embed" oder „Eigener Code" suchen. Bei den meisten Baukästen heißt es ähnlich — das Element an die gewünschte Stelle einfügen.
3
Embed-Code einfügen und veröffentlichenDen PropShift-Embed-Code eintragen und die Seite veröffentlichen.
Stolperfalle: Einige Baukästen (besonders Strato in älteren Versionen) erlauben keine externen Scripts. In dem Fall ist auf die neuere Editor-Version umzusteigen oder Custom-Code in den Tarif-Einstellungen freizuschalten.

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

1
Backend der Maklersoftware öffnenIns Admin/CMS der Maklersoftware einloggen.
2
Inhaltsseite öffnen oder anlegenEine bestehende Inhaltsseite wählen (z. B. „Kontakt", „Über uns") oder eine neue anlegen („Bewertung", „Rückruf").
3
HTML-Inhalt einfügenDie meisten Maklersoftware-CMS bieten einen „HTML"- oder „Quellcode"-Modus im Editor. Dorthin wechseln und den PropShift-Embed-Code einfügen. Bei FlowFact heißt das z. B. „HTML-Editor", bei onOffice findet es sich unter „Layout-Builder" → Element „HTML".
4
Speichern und veröffentlichenDie Seite speichern und veröffentlichen.
Tipp: Falls die Maklersoftware keinen HTML-Editor anbietet: den Support fragen — 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 öffnenDie HTML-Datei oder das Template öffnen, in dem das Widget erscheinen soll.
2
Code-Snippet einsetzenDen PropShift-Embed-Code an der gewünschten Stelle einsetzen — am besten irgendwo innerhalb von <body>, dort wo das Widget visuell erscheinen soll.
3
DeployenDie Datei via FTP/Git/CI hochladen und das Ergebnis im Browser testen.
Tipp: Für Headless-Setups lässt sich 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 die Seite noch über HTTP läuft, wird der Browser das Script aus Sicherheitsgründen blockieren („Mixed Content"). SSL aktivieren — 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 zeigt sich das echte Endkunden-Erlebnis.

Browser-Konsole nutzen

Wenn das Widget nicht erscheint: F12 drücken → Tab „Konsole". Hier zeigen sich 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 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 — sofort einen Magnet anlegen und den Code in der eigenen 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