Wie wir Custom Development und Webflow kombinieren

Maßgeschneiderte Entwicklung vs. Webflow – warum native Entwicklung meistens gewinnt

Üblicherweise denken viele Unternehmen, sie müssten sich entscheiden zwischen:

• Maßgeschneiderte Entwicklung: volle Flexibilität, aber teuer und mit knappen Spezialkenntnissen verbunden
• Webflow: schnell, günstig, optisch ansprechend – aber funktional eingeschränkt

Der erste Gedanke, diese beiden Welten über iframes miteinander zu verbinden, wirkt oft wenig überzeugend. Denn sobald Sie ein iframe in eine Seite einfügen, entstehen häufig Probleme:

• merkwürdiges Scroll-Verhalten oder verschachtelte Scrollleisten, die wie ein Fehler wirken
• mangelnde Integration in das Seitenlayout
• fehlende Interaktivität mit dem Rest der Seite (Sandbox-Problem)

Doch mit etwas Vorarbeit lässt sich tatsächlich das Beste aus beiden Welten kombinieren. Der Schlüssel liegt darin, die Browser-API zu nutzen, um Scroll- und Resize-Events zwischen Host-Seite und iframe sauber auszutauschen.

Die Herausforderung: Über die Standardgrenzen von Webflow hinaus

Webflow ist ein hervorragendes Tool für responsive und visuell ansprechende Websites. Aber in manchen Projekten reichen die Standardfunktionen nicht aus:

• bestimmte Komponenten gibt es schlicht nicht
• oder eine komplette Neuentwicklung per Custom Code ist im Verhältnis zum normalen Workflow der Entwickler zu aufwendig

Ein Beispiel: Auf unserer eigenen Website nutzen wir Tools wie unseren Sitemap Scanner. Dieses Tool erfordert eine interaktive Oberfläche, dynamischen Zustand, API-Calls und weitere nicht-statische Funktionen.

Mit unserem iframe-Message-Passing-Ansatz können wir den komplexen Teil in gewohnter React-Tooling-Umgebung entwickeln – und ihn innerhalb eines Tages sauber in die Website integrieren, ohne uns um Webflow-spezifische Limitierungen kümmern zu müssen.

Unsere Lösung: Strategische Integrationspunkte

Unser Ansatz nutzt die Erweiterbarkeit von Webflow über Custom iframes und Script-Tags. Das schafft klare Integrationspunkte, an denen wir individuelle Komponenten einbetten können – ohne das gesamte Design oder den Workflow durcheinanderzubringen.

Man könnte es vergleichen mit Schlüsselloch-Chirurgie: präzise, minimale Eingriffe, die die Umgebung so wenig wie möglich beeinflussen – und dennoch das gewünschte Ergebnis liefern.

Architektur: Standalone-Komponenten

Für viele individuelle Features entwickeln wir eigenständige HTML-Komponenten samt ihrer Assets. Diese Komponenten sind:

• Selbstständig lauffähig: alle benötigten HTML-, CSS- und JavaScript-Dateien sind enthalten
• Unabhängig deploybar: ausgeliefert über unseren Static File Server unter sys.iridium-works.dev
• Einfach einbindbar: Integration in Webflow-Seiten per einfachem iframe-Tag

So sieht eine minimale Integration aus:

1<iframe 
2src="https://sys.iridium-works.dev/effect-iframes/video-text.html" 
3allowfullscreen="" 
4frameborder="0">
5</iframe>

‍

Erweiterte Integration: Event-Kommunikation

Für komplexere Anwendungsfälle setzen wir auf eine bidirektionale Kommunikation zwischen unseren Custom Components und der Webflow-Seite.

So stellen wir sicher, dass eingebettete Tools nicht wie „fremde“ Inhalte wirken, sondern sich nahtlos als interaktive Bestandteile der Seite präsentieren – ganz so, als wären sie direkt in Webflow entwickelt worden.

Ein Beispiel: Genau diesen Ansatz haben wir bei unseren Tool-Seiten umgesetzt. Dort sollen Besucher das Gefühl haben, dass es sich um ein natives Feature handelt, das sich harmonisch in das restliche Layout integriert.

Custom Component (innerhalb des iframes):

1// Core event functions that need to be called from inside the iframe
2function sendHeight() {
3 const height = document.body.scrollHeight;
4 window.parent.postMessage({ iframeHeight: height }, '*');
5}
6
7function handleWheel(e) {
8 window.parent.postMessage({
9   type: 'wheel',
10   deltaX: e.deltaX,
11   deltaY: e.deltaY,
12   deltaMode: e.deltaMode,
13 }, '*');
14}
15
16// Setup event listeners and periodic height updates
17// Note: In practice, you'll need proper event listener management
18// including cleanup to prevent memory leaks, highly dependant on the situation on the ground
19const setupIframeIntegration = () => {
20 // is equal in "root" documents, in this case meaning non-iframes
21 if (window.parent === window) return;
22
23 // Initial height
24 sendHeight();
25
26 // Periodic height updates for dynamic content
27 const interval = setInterval(sendHeight, 500);
28
29 // Forward scroll events to parent
30 window.addEventListener('wheel', handleWheel, { passive: true });
31 window.addEventListener('resize', sendHeight);
32
33 // Cleanup function (call this when component unmounts)
34 return function cleanup() {
35   clearInterval(interval);
36   window.removeEventListener('wheel', handleWheel);
37   window.removeEventListener('resize', sendHeight);
38 };
39};
40
41

Webflow Seite (Übergeordnet):

1// Listen for iframe height changes to resize container
2window.addEventListener('message', function(event) {
3 // Handle dynamic height adjustments
4 if (event.data.iframeHeight) {
5   const iframe = document.querySelector('iframe[src*="your-component"]');
6   if (iframe) {
7     iframe.style.height = event.data.iframeHeight + 'px';
8   }
9 }
10
11 // Handle scroll wheel forwarding for seamless scrolling
12 if (event.data.type === 'wheel') {
13   window.scrollBy({
14     left: event.data.deltaX,
15     top: event.data.deltaY,
16     behavior: 'auto'
17   });
18 }
19});

Hinweis zur Implementierung

Das Einbinden von iframe-Komponenten erfordert ein sorgfältiges Management der Event Listener.
Die zentrale Event-Passing-Logik sollte stets in ein sauberes Setup- und Cleanup-Verfahren eingebettet werden, um den gesamten Lebenszyklus der Komponente (Mounting/Unmounting) korrekt zu handhaben und Memory Leaks zu vermeiden.

Je nach eingesetztem Framework geschieht das beispielsweise über useEffect-Patterns oder vergleichbare Lifecycle-Methoden.

Vorteile dieses Ansatzes

Für Designer:

• Sie behalten Ihren vertrauten Webflow-Design-Workflow
• Kein Bedarf, komplexe Entwicklungs-Frameworks zu erlernen
• Volle Kontrolle über das visuelle Design

Für Entwickler:

• Freiheit, auch komplexe Funktionalitäten umzusetzen
• Nutzung einer modernen Toolchain inklusive Testing & Versionierung
• Saubere Trennung von Code und Design

Für Kunden:

• Das Beste aus beiden Welten: ansprechendes Design + maßgeschneiderte Funktionalität
• Schnellere Iterationen bei visuellen Anpassungen
• Zukunftssichere Architektur, die leicht skalierbar ist

Fazit

Durch die Kombination der Design-Stärken von Webflow mit den Möglichkeiten individueller Software-Entwicklung schaffen wir einen Workflow, der maximale kreative Freiheit mit technischer Exzellenz verbindet.

Das Ergebnis: Projekte, die nicht nur visuell beeindrucken, sondern auch genau die Funktionen liefern, die vorgesehen sind – ohne Kompromisse bei Design oder Performance.