Manchmal soll der Funnel mitten auf einer Seite stehen, die es schon gibt: unter dem Text auf deiner Startseite, in einer Landingpage in WordPress, in einem Abschnitt in Webflow. Dafür gibt es das Einbetten.
Die eigene Adresse bleibt die robustere Wahl. Unter dein-funnel.funnelizer.de oder einer eigenen Domain läuft der Funnel über die volle Breite, ohne Rahmen und ohne fremde Scripte daneben. Einbetten ist für den anderen Fall gedacht: der Funnel ist Teil einer bestehenden Seite.
Zuerst: Einbetten erlauben
Das Einbetten ist ab Werk aus, und das hat einen Grund. Wäre es offen, könnte jede beliebige Seite deinen Funnel in einen unsichtbaren Rahmen legen und ihn über ihre eigenen Knöpfe schieben. Wer dann dort klickt, klickt in Wahrheit in deinen Funnel, ohne es zu merken. Das nennt sich Clickjacking, und dagegen hilft nur, den Rahmen zuzulassen statt ihn offenzulassen.
So schaltest du es frei:
- Öffne den Funnel im Builder und wechsel oben auf Einstellungen.
- Klapp den Abschnitt Einbetten auf.
- Setz den Haken bei Einbetten erlauben.
Erst danach erscheint der Code, den du kopieren kannst. Nimmst du den Haken wieder weg, hört der eingebettete Funnel sofort auf zu laden, ohne dass du auf der fremden Seite etwas ändern musst.
Der Code
Im Abschnitt steht ein fertiger Block zum Kopieren. Er besteht aus zwei Teilen:
- einem Rahmen (
iframe), der deinen Funnel lädt - einem kurzen Script, das auf die Höhenmeldung des Funnels hört und den Rahmen mitwachsen lässt
Der zweite Teil ist wichtiger, als er aussieht. Ein Rahmen hat immer eine feste Höhe. Ohne das Script bekäme dein Funnel entweder einen zweiten Scrollbalken mitten in der Seite, oder es bliebe unten eine leere Fläche stehen, sobald ein Schritt kürzer ist als der davor. Mit dem Script meldet der Funnel bei jeder Änderung seine Höhe, und der Rahmen passt sich an.
Das Script prüft dabei, von welcher Adresse die Meldung kommt. Ohne diese Prüfung könnte jedes andere Element auf deiner Seite dem Rahmen eine Höhe vorgeben. Lass sie deshalb drin, auch wenn du den Code sonst anpasst.
WordPress
Du brauchst kein Plugin. Der Code läuft in jedem WordPress, du musst ihn nur an der richtigen Stelle einfügen.
Mit dem Standard-Editor (Gutenberg):
- Seite oder Beitrag bearbeiten.
- An der gewünschten Stelle auf das Plus klicken.
- Nach dem Block Individuelles HTML suchen und ihn einfügen.
- Den kopierten Code in das Feld einfügen.
- Speichern.
Mit Elementor:
- Seite mit Elementor bearbeiten.
- Das Widget HTML an die gewünschte Stelle ziehen.
- Den Code in das Feld einfügen.
- Speichern.
Der Code muss als HTML eingefügt werden, nicht in einen normalen Textblock. Landet er in einem Textblock, zeigt WordPress ihn als Text an, statt ihn auszuführen. Du siehst dann den Code auf deiner Seite stehen.
Im Editor bleibt der Rahmen oft leer oder grau. Das ist normal, viele Editoren führen fremdes HTML in der Bearbeitungsansicht nicht aus. Sieh dir die Seite in der Vorschau oder nach dem Veröffentlichen an.
Webflow und andere Baukästen
Das Vorgehen ist überall dasselbe: Es gibt irgendwo ein Element namens Embed, Custom Code oder HTML. Dort kommt der Code hinein.
In Webflow ist es das Element Embed aus dem Add-Elements-Panel. Achte darauf, dass dein Webflow-Tarif das Einbetten von eigenem Code erlaubt, das ist in den kleinsten Tarifen manchmal gesperrt.
Was im Rahmen anders aussieht
Zwei Dinge ändern sich, wenn der Funnel eingebettet läuft:
- Das Logo oben fällt weg. Die Seite drumherum hat ihre eigene Marke im Kopf, zwei davon übereinander sehen nach Versehen aus. Logo-Blöcke, die du selbst in den Funnel gesetzt hast, bleiben.
- Der Fuß wird kleiner. Die Links zu Impressum und Datenschutz bleiben trotzdem stehen, nur unauffälliger.
Impressum und Datenschutz verschwinden nicht, auch nicht im Rahmen. Ein gewerblicher Funnel ohne diese Angaben ist abmahnfähig, und daran ändert das Einbetten nichts. Dass die Seite drumherum meist ein eigenes Impressum hat, hilft rechtlich nicht sicher weiter.
Alles andere läuft unverändert: Anfragen kommen ganz normal im CRM an, die Auswertung zählt weiter, und das Cookie-Banner erscheint im Rahmen genauso wie sonst. Es steht dort allerdings am Ende des Funnels statt fest am unteren Bildschirmrand, weil ein Rahmen keinen eigenen unteren Rand hat.
Wenn etwas nicht klappt
Der Rahmen bleibt leer. Sieh nach, ob der Haken bei Einbetten erlauben gesetzt ist. Ohne ihn weisen wir den Rahmen ab. Prüf außerdem, ob der Funnel überhaupt live ist, ein Funnel auf privat zeigt auch im Rahmen die Nicht-verfügbar-Seite.
Der Rahmen hat eine feste Höhe und einen eigenen Scrollbalken. Dann fehlt der Script-Teil oder er wurde nicht mit eingefügt. Kopier den Block noch einmal vollständig.
Auf der Seite steht der Code als Text. Er ist in einem Textblock gelandet statt in einem HTML-Block. Siehe oben.
Du hast zwei Funnels auf einer Seite. Das geht. Kopier für jeden Funnel seinen eigenen Block, die beiden stören sich nicht, weil jeder Rahmen nur auf die Meldungen seines eigenen Funnels hört.
<!-- Ausblick, bewusst nicht gebaut: ein echtes WordPress-Plugin mit einem Shortcode [funnelizer slug="..."] wäre ein dünner Wrapper um genau dieses Snippet. Es würde denselben Rahmen und dasselbe Script ausgeben, nur bequemer einzufügen. Dagegen stehen ein Eintrag im Plugin-Verzeichnis, ein Review bei jeder Änderung und eine eigene Kompatibilitätsmatrix über WordPress-Versionen. Das lohnt sich, sobald Kunden danach fragen, vorher ist es Pflegeaufwand für eine Bequemlichkeit, die Copy-and-paste auch liefert. -->