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:

<iframe 
src="https://sys.iridium-works.dev/effect-iframes/video-text.html" 
allowfullscreen="" 
frameborder="0">
</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):

// Core event functions that need to be called from inside the iframe
function sendHeight() {
 const height = document.body.scrollHeight;
 window.parent.postMessage({ iframeHeight: height }, '*');
}

function handleWheel(e) {
 window.parent.postMessage({
   type: 'wheel',
   deltaX: e.deltaX,
   deltaY: e.deltaY,
   deltaMode: e.deltaMode,
 }, '*');
}

// Setup event listeners and periodic height updates
// Note: In practice, you'll need proper event listener management
// including cleanup to prevent memory leaks, highly dependant on the situation on the ground
const setupIframeIntegration = () => {
 // is equal in "root" documents, in this case meaning non-iframes
 if (window.parent === window) return;

 // Initial height
 sendHeight();

 // Periodic height updates for dynamic content
 const interval = setInterval(sendHeight, 500);

 // Forward scroll events to parent
 window.addEventListener('wheel', handleWheel, { passive: true });
 window.addEventListener('resize', sendHeight);

 // Cleanup function (call this when component unmounts)
 return function cleanup() {
   clearInterval(interval);
   window.removeEventListener('wheel', handleWheel);
   window.removeEventListener('resize', sendHeight);
 };
};

Webflow Seite (Übergeordnet):

// Listen for iframe height changes to resize container
window.addEventListener('message', function(event) {
 // Handle dynamic height adjustments
 if (event.data.iframeHeight) {
   const iframe = document.querySelector('iframe[src*="your-component"]');
   if (iframe) {
     iframe.style.height = event.data.iframeHeight + 'px';
   }
 }

 // Handle scroll wheel forwarding for seamless scrolling
 if (event.data.type === 'wheel') {
   window.scrollBy({
     left: event.data.deltaX,
     top: event.data.deltaY,
     behavior: 'auto'
   });
 }
});

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.