Modulo

How to integrate Modulo with Webflow

The primary way to set up the integration is by installing the Modulo app from the Webflow Apps marketplace. For teams that need to programmatically manage the content those components display, the Webflow Data API supports syncing CMS content from external sources, routing form submissions to external systems, and triggering automated site publishes.

Modulo does not expose its own API endpoints or webhooks. It's a component library, not a data platform.

Use the Modulo app

Install Modulo from the Webflow Apps marketplace. Once installed in your workspace, you can browse a library of pre-designed components spanning 15+ categories, including hero sections, feature blocks, lists, FAQs, and CTAs. A free tier is available, with full library access on a paid subscription.

• Browse the library inside Webflow, pick a component, and add it to your canvas in any project. Components become standard Webflow elements after insertion.
• Customize components visually using Webflow's native design tools: colors, spacing, typography, interactions, and animations all work as expected.
• Select any text, image, or link element within a Modulo component and bind it to a CMS collection field using Webflow's native data binding. This turns static layouts into data-driven sections for directories, blog grids, testimonial carousels, or product feature lists.
• Use Webflow's Code Embed element to add custom JavaScript, HTML, or CSS alongside Modulo elements. Inject site-wide scripts through Site Settings → Custom Code for analytics, tracking, or global styling. Insert per-item custom code in CMS-driven layouts using Rich Text fields with custom code.

Build with the Webflow Data API

Once Modulo components are on your site, you can use the Webflow Data API to programmatically manage the CMS content those components display. This requires developer resources.

• Manage CMS items: Use POST /v2/collections/{collection_id}/items to create content, PATCH to update, and DELETE to remove, up to 100 items per bulk request.
• Process form submissions: Register a form_submission webhook that sends structured JSON to your endpoint whenever someone submits a Webflow form (including forms from Modulo components). Webflow sends webhooks but does not receive them, so you need middleware or a serverless function to handle incoming data.
• Trigger site publishes: Call POST /v2/sites/{site_id}/publish after updating content programmatically.
• Track page changes: Use page_created, page_metadata_updated, and page_deleted webhook events to keep external systems in sync.

Authenticate using OAuth 2.0 with PKCE for multi-site apps or site API tokens for single-site integrations. Pass your token in the Authorization: Bearer {token} header.

This pattern is useful for teams that manage content in an external CMS or database: push content into Webflow CMS collections via the API, publish the site, and let Modulo components handle the visual layout.

What you can build with Module Webflow integration

Integrate Modulo with Webflow to start from pre-designed, production-ready components and connect them to dynamic content through Webflow's CMS.

• Agency landing page system: Build a reusable set of campaign landing pages using Modulo's hero, CTA, and feature components. Swap out CMS-bound text and images per client without rebuilding layouts.
• SaaS marketing site with dynamic feature sections: Use Modulo's feature grid and list components connected to a CMS collection. Your product team adds, reorders, or updates feature descriptions without touching Webflow.
• Service provider directory: Combine Modulo's list and card components with a CMS collection of providers, locations, or team members. Each card pulls dynamic data and links to individual detail pages.
• FAQ and knowledge base hub: Deploy Modulo's FAQ accordion components across multiple pages, powered by a single CMS collection. Content editors update answers in one place and changes appear site-wide.