Bubble
Connect Bubble's application logic with Webflow's design capabilities to build complete products.
How to integrate Bubble with Webflow
Webflow generates production-ready HTML and CSS for content-focused sites. Bubble provides application infrastructure for user authentication, database relationships, and complex workflows. Combining both platforms lets you build complete products without maintaining separate technical stacks for marketing sites and application logic.
Integrate Bubble with Webflow through automation tools like Zapier or Make, embed Bubble functionality directly in Webflow pages, or build custom integrations using both APIs. Choose based on your technical resources and use case requirements.
Connect with Zapier or Make (no-code automation)
Zapier and Make connect Webflow forms to Bubble databases, trigger Bubble workflows from Webflow events, and sync CMS content between platforms without writing code. Both platforms provide visual builders, OAuth authentication (an authorization protocol that lets applications access data without exposing passwords), and pre-configured templates.
Zapier offers the fastest setup for common patterns. The platform provides pre-built templates connecting Webflow form submissions to Bubble data creation, Webflow CMS items to Bubble workflows, and bidirectional sync patterns.
According to Zapier's official integration page, available templates include creating Bubble things from Webflow form submissions, creating Bubble API workflows from form submissions, and creating Webflow items from Bubble workflow trigger events. Connect your accounts through OAuth, map fields through dropdown menus, and activate. No API knowledge required.
Here are some common use cases:
- Form submission to database: Create new Bubble things from Webflow form submissions stores lead data, registration information, or contact details in Bubble's database
- Workflow triggering: Create Bubble API workflows from Webflow form submissions launches multi-step processes, sends notification emails, or updates multiple systems
- CMS synchronization: Create Webflow items from Bubble workflow events publishes user-generated content or calculated results to Webflow collections
Make supports more complex scenarios with 48 combined modules across both platforms. The visual scenario builder connects multiple services, adds conditional logic, and transforms data formats. Make's Watch Data Things module monitors Bubble database changes in real-time, while Webflow modules manage collection items, products, and form submissions.
Both platforms handle authentication, rate limiting, and error recovery, though with important differences. Zapier works better for straightforward automations with pre-built templates and no-code configuration. Make handles complex workflows with multiple conditions and data transformations through its visual scenario builder with 48 combined modules.
Embed Bubble components in Webflow
Webflow's Code Embed element adds HTML, CSS, and JavaScript directly to pages. Use it to embed Bubble-powered calculators, booking systems, or interactive tools within Webflow's responsive layouts.
Access the Code Embed element through the Add panel (press A), drag it onto your page, and paste your embed code. Each Code Embed element supports 10,000 characters. Webflow allows 50,000 characters total across all custom code areas combined (site settings, page settings, Code Embed elements, and CMS Rich text fields). The element executes client-side JavaScript. Exclude <html>, <body>, and <head> tags from your code.
Common embedding patterns include the following:
- Interactive widgets: Embed Bubble applications as iframes for calculators, configurators, or lead generation tools that require user interaction
- Dynamic content: Display Bubble database content within Webflow pages using JavaScript to fetch and render data
- Booking systems: Surface Bubble-powered scheduling interfaces while maintaining Webflow's visual design
Configure CORS (cross-origin resource sharing) in Bubble's settings before embedding. Navigate to Settings → API in Bubble and enable "Allow all iframes" to prevent cross-origin errors when embedding Bubble applications in Webflow pages.
For production deployments, ensure you're using HTTPS on custom domains and consider using S3 direct links with custom CORS policies instead of Bubble CDN (content delivery network) file URLs, which commonly trigger CORS errors from Webflow pages.
Build with Webflow and Bubble APIs
Use API methods when automation platforms lack the control you need for complex workflows, real-time data synchronization, or custom business logic requiring server-side processing. APIs enable real-time inventory synchronization with sub-second latency, custom authentication flows that combine both platforms' user systems, and server-side data validation that automation platforms cannot perform. The following sections detail three primary integration patterns:
Sync CMS content between platforms
Connect Webflow to Bubble through integration platforms like Zapier or Make to maintain synchronized content across platforms. Using Zapier's pre-built templates or Make's visual scenario builder, content updates in either system can propagate to the other through automated workflows.
Alternatively, use Webflow's Code Embed element to embed Bubble-powered forms or widgets, or take advantage of Bubble's Data API (when exposed in settings) with Webflow's custom code for direct API connections.
Webflow's API provides these capabilities:
- Create collection items in Webflow from Bubble database records
- List collection items to pull Webflow content into Bubble
- Update item fields when Bubble data changes
Bubble's API provides these capabilities:
- Configure database trigger events to detect changes automatically
Enable Bubble's Data API in Settings → API by checking "This app exposes a Data API." Select which data types to expose and configure privacy rules for access control. Bubble generates RESTful endpoints for creating, reading, updating, and deleting records. Privacy rules automatically apply to the Data API, ensuring access is properly restricted according to your configuration.
Architectural considerations matter for API integration. Webflow's API rate limits are plan-dependent. Bubble uses Workload Units (WU) rather than traditional rate limits. For current limits, consult Bubble's pricing page and Settings → API documentation. Implement queue-based patterns and scheduled workflows rather than real-time synchronization when working within these constraints.
Process form submissions through backend workflows
Webflow forms collect data. Bubble workflows process it. Posting directly to Bubble's Workflow API from custom code handlers using backend workflows bypasses Webflow's form submission limits.
Bubble's Workflow API provides these capabilities:
- Initialize backend workflows to accept form data as parameters
- Schedule API workflows for delayed or batch processing
- Validate input and process multi-step business logic server-side
Webflow's Forms API provides these capabilities:
- Handle form submission events through Webflow's form API
Build authenticated user experiences
Combine Webflow's public pages with Bubble's authentication system. Webflow displays marketing content and login forms. Bubble manages user accounts, sessions, and permission systems.
Bubble's Data API provides these capabilities:
- Create user accounts through Bubble's Data API User endpoints
- Authenticate users with Bubble's authentication system
- Retrieve user profile data to personalize Webflow pages
- Store and validate authentication tokens securely
Use Bubble's Data API to create accounts, authenticate users, and retrieve profile information. Store authentication tokens in browser localStorage and include them in API requests to Bubble. Render personalized content by fetching user data and displaying it through JavaScript in Webflow pages using the Code Embed element.
For production systems, implement proper token refresh flows. OAuth tokens expire after 1 hour and require manual refresh flows. Handle token expiration, renewal, and storage in your custom code.
Monitor CORS configuration in both platforms to prevent cross-origin errors during API calls. Bubble allows all origins on file and API endpoints by default, but custom domains require HTTPS, and backend workflows cannot modify CORS headers directly. Use backend workflows instead of client-side API calls when possible to avoid CORS issues.
What you can build
Integrating Bubble with Webflow creates complete products that combine marketing sites with functional applications.
- SaaS products with separate marketing and application layers: Build landing pages, pricing comparisons, blog, and documentation in Webflow while running the product dashboard, user management, and database operations in Bubble.
- Membership sites with content and gated features: Display public content, course catalogs, and free resources through Webflow CMS collections. Bubble handles member authentication, progress tracking, and premium content access.
- E-commerce experiences combining product display with custom order processing: Showcase products through Webflow's responsive galleries and filtering systems while Bubble manages inventory checks, custom pricing logic, order fulfillment workflows, and customer account histories.
- Internal tools with branded interfaces: Create employee portals, CRM systems, or procurement platforms where Webflow provides the branded navigation and content organization. Bubble powers the data entry forms, approval workflows, reporting dashboards, and API integrations with existing enterprise systems.
Frequently asked questions
No. Bubble apps are not PCI-compliant environments for storing raw card data and require third-party payment processors. Use hosted payment pages from Stripe, PayPal, or similar processors. Payment data must flow through the processor's infrastructure, never touching Bubble's database or Webflow's forms directly.
Build product displays in Webflow, redirect to Stripe Checkout for payment processing, and receive confirmation webhooks in Bubble to update order status. Store order metadata, customer information, and fulfillment data in Bubble.
Stripe Checkout must be used as the hosted payment page; never expose raw payment card numbers or CVV codes to either platform's APIs, as Bubble is not PCI-compliant and Webflow's compliance is limited to native eCommerce forms only.
CORS (Cross-Origin Resource Sharing) errors occur when browsers block cross-origin requests between Webflow pages and Bubble APIs. Bubble allows all origins on file and API endpoints by default, but custom domains must use HTTPS or file URLs generate CORS errors.
You must enable "Allow all iframes" in Bubble settings and ensure HTTPS for custom domains. For production, use S3 direct links with custom CORS policies instead of Bubble CDN file URLs, which commonly trigger errors from Webflow pages.
Backend workflows don't face CORS restrictions; structure integrations so Bubble's server-side workflows call Webflow's API rather than client-side JavaScript making cross-origin requests.
CMS changes in Webflow propagate within 2 minutes to published sites according to Webflow's webhook documentation. Webhooks notify external systems with approximately 30-second delay. Webflow attempts up to 3 webhook retries over 4 hours, but manual replay is required for permanently failed deliveries.
Implement polling fallbacks with 30-60 second intervals for operations requiring faster consistency. Use Bubble's scheduled workflows to check for changes periodically. Store webhook delivery status and add idempotency in handlers to prevent duplicate processing.
Each platform requires independent authentication. Webflow provides OAuth tokens that expire after 1 hour. Bubble supports OAuth2 through the API Connector but requires manual configuration for token refresh flows. No native bridge exists between the platforms' authentication systems, requiring developers to implement token management middleware and maintain token refresh schedules.
Implement token management middleware in Bubble that stores Webflow OAuth tokens and refreshes them on a 45-minute schedule before expiration. Use Bubble's backend workflows for token refresh to avoid client-side complexity.
For user-facing authentication, manage sessions entirely in Bubble and embed authenticated Bubble pages within Webflow layouts rather than attempting to synchronize user sessions across platforms.
Description
Bubble is a no-code platform that provides application infrastructure including user authentication, database management, and workflow automation.
This integration page is provided for informational and convenience purposes only.
Salesforce Authenticator
Extra security made easy with Salesforce two-factor authentication (2FA).
Microsoft Authenticator
With Authenticator, your phone provides an extra layer of security on top of your PIN or fingerprint
Magic
Add passwordless authentication and Web3 wallet capabilities to your Webflow membership sites.
LastPass Authenticator
LastPass Authenticator offers a unique one-tap password verification experience.
LinkedIn is the world's largest professional networking platform with over 1 billion members. It offers business tools for recruitment, B2B marketing, content publishing, and professional development. Beyond networking, LinkedIn provides APIs for authentication, company data, job postings, and lead generation.
Google Authenticator
Google Authenticator generates single-use 2SV codes on Android or Apple mobile devices
Authy
Go beyond the password and protect yourself from hackers and account takeovers.
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
