How We Combine Custom Development and Webflow

A Deep dive into combining Custom Development and Webflow

Usually, people think they have to choose between

- custom-tailored, full flexibility, but expensive and scarce skills required (hand-made development)

- quick, cheap, good-looking but limited (webflow)

‍

Using iframes and similar to bridge this looks like an approach that goes nowhere when you first add an iframe to a page and it

- has weird scrolling behavior, nested scrollbars that look like an accident

- doesn't respect layouting

- is non-interactive with the rest of the page (sandboxed)

‍

However, with a small bit of legwork you can have the best of both worlds.
In short, you utilize the browser API in order to pass around scroll & resize events.

‍

The Challenge: Beyond Standard Webflow Limitations

While Webflow excels at creating responsive, visually stunning websites, certain projects require custom functionality that standard Webflow either components can't provide, or rebuilding it via custom code seems disproportionally tedious compared to the normal workflow of the devs you happen to have on hand. For example, on our website we have a suite of tools such as the sitemap scanner. This tool requires some interactive and dynamic state to view mapping, api calls and other non-static functionality.

Using our iframe message passing approach we can just write the complex part in a day (normal react-ecosystem tooling) without worrying how to deliver it on the website.

‍

Our Solution: Strategic Integration Points

Our approach leverages Webflow's built-in extensibility through custom iframes and script tags. This creates clean integration points where we can embed custom-developed components without compromising the overall design workflow.

It's like keyhole surgery - making minimal, precise incisions to minimize impact on surrounding areas while achieving the desired outcome

‍

Standalone Component Architecture

For many custom features, we develop standalone HTML components with their associated assets. These components are:

- Self-contained: Each component includes all necessary HTML, CSS, and JavaScript

- Independently deployable: Served by our static file server at sys.iridium-works.dev

- Easily embeddable: Integrated into Webflow pages via simple iframe tags

‍

Here's how a minimal integration looks:

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

‍

Advanced Integration: Event Communication

For more sophisticated interactions, we implement bi-directional communication between our custom components and the Webflow page. This is the approach we took in regards to our tool pages, who are supposed to make the impression of being interactive elements of that page like any other.

‍

Custom Component (inside iframe):

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 Page (parent):

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});

Implementation Note: The iframe component requires careful event listener management. You'll typically need to wrap the core event-passing logic in proper setup/cleanup code to handle component lifecycle (mounting/unmounting) and prevent memory leaks. This usually involves useEffect-style patterns or similar lifecycle management depending on your framework.

‍

Benefits of This Approach

For Designers:

- Maintains familiar Webflow design workflow

- No need to learn complex development frameworks

- Visual design control remains intact

For Developers:

- Freedom to implement complex functionality

- Modern development toolchain and practices

- Version control and testing capabilities

For Clients:

- Best of both worlds: beautiful design and custom functionality

- Faster iterations on visual elements

- Scalable architecture for future enhancements

‍

Conclusion

By combining Webflow's design strengths with custom development capabilities, we've created a workflow that maximizes both creative freedom and technical possibilities. This approach allows us to deliver projects that look exceptional and perform exactly as envisioned, without forcing compromises on either design or functionality.