Outgrow

Handle site structure, layout, and CMS-driven content in Webflow, while Outgrow powers interactive experiences like scored assessments, ROI calculators, and product recommendation quizzes. Together, Outgrow manages personalized experiences, gated results, and lead routing into Webflow CMS collections or external CRMs.

Marketing teams, ecommerce brands, SaaS companies, and agencies running lead generation on Webflow sites will get the most use from this setup. If you need real-time data pipelines between Outgrow and CMS items, you'll also find a clear API path here.

How to integrate Outgrow with Webflow

What is Outgrow? Outgrow is a no-code interactive content platform that lets you create quizzes, calculators, assessments, polls, chatbots, product recommendations, forms, giveaways, and landing pages. It has a drag-and-drop builder with 1,000+ templates, conditional logic, formula support, and built-in lead capture gating. Outgrow is SOC 2 Type II certified and hosted on Amazon Web Services.

Pair Outgrow with Webflow when you need interactive content that goes beyond static forms. A marketing site may need an ROI calculator on its pricing page, a product quiz in a popup, or a scored assessment on a landing page built for paid traffic. Outgrow creates the interactive experience, and Webflow provides the site infrastructure around it.

You can use the Outgrow-Webflow integration in 4 ways:

• Code Embed elements and custom code let you place Outgrow quizzes, calculators, popups, and widgets directly on your pages without writing application code.
• Outgrow's native Webflow integration syncs lead data from Outgrow into your site through an authentication flow inside Outgrow's dashboard.
• Zapier and Make automate lead data routing from Outgrow into CMS collections or connected tools.
• The Webflow Data API and Outgrow webhooks give you control over how lead and visit data flows into CMS collections, but require server-side development.

Most implementations combine two of these methods: one for displaying interactive content on the page and another for routing the captured lead data.

Embed Outgrow content with Code Embed elements

Outgrow generates embed codes for every content type it supports, including inline iframes, popups, chat widgets, floating rectangles, exit-intent overlays, and greet bars. Place these codes on your pages using Code Embed elements for inline placement, or use custom code in head and body tags for site-wide or page-specific scripts. You need a paid site plan to publish custom code to a live domain. Custom code doesn't execute in the Designer, so use Preview mode to verify your embeds before publishing.

To get your embed code from Outgrow:

1. Log in to Outgrow and select the content piece you want to embed.
2. Open the Configure tab in the builder and click Embed On A Webpage.
3. Select an embed type (In-Page, Full Page, Popup, Chat Messenger, Exit Intent, Custom, Floating Rectangle, Greet Bar, or Sidenote).
4. Customize the visual settings (button colors, popup style, trigger behavior) in Outgrow's UI.
5. Copy the generated code.

Where you paste the code depends on the embed type and scope you need:

• Inline embeds (In-Page, Full Page, Custom iframe) go into a Code Embed element dragged onto the canvas at the position where the content should appear.
• Site-wide scripts (popups, chat widgets, floating widgets, exit-intent overlays) go into Site settings > Custom Code > Footer code.
• Page-specific scripts go into the target page's settings under Custom Code > Before </body> tag.
• CMS collection-scoped embeds go into the collection's custom code settings, which applies the embed to every item page in that collection.

Each Code Embed element supports up to 50,000 characters. If your embed code exceeds that limit, host the script externally and reference it with a <script src="..."> tag.

Add an inline Outgrow embed

Inline embeds work best for calculators, assessments, or quizzes that should appear at a specific position within a page layout. The In-Page Embed type loads its content inside an iframe when the visitor clicks the start button.

To add an inline embed:

1. In Outgrow, select In-Page Embed, Full Page Embed, or Custom from the embed options and copy the code.
2. Open the Add panel (+) and drag a Code Embed element onto the canvas where you want the content to appear.
3. Click the element to open the code editor, paste the Outgrow code, and click Save & Close.
4. Preview and publish your site.

To control the embed width, wrap the code in a div with an inline style: <div style="width: 400px;"><!-- Outgrow code here --></div>. Height adjusts through Outgrow's resize script, which you must include alongside the iframe code for responsive behavior.

Add a popup triggered by a button

Outgrow provides its own trigger button with popup embeds, but you can also wire the popup to an existing button on your page using a class-based approach. This keeps your site's design consistent.

To connect a popup to your own button:

1. In Outgrow, select Launch In A Popup and copy the generated popup code. This code includes a <div> with a data attribute, a loader script, and an initIframe() call.
2. Paste the popup code into your page's custom code (page settings > Before </body> tag) or a Code Embed element.
3. Add the jQuery suppression script from Outgrow's custom popup trigger documentation below the popup code. This script removes the default Outgrow button and binds the popup to elements with a specific class.
4. Select your existing button element and add the class custom-outgrow-b.
5. Publish your site and test the button.

You can trigger Outgrow popups from any element on your page without changing the page's visual design.

Add site-wide widgets

Chat messenger, floating rectangle, greet bar, sidenote, and exit-intent embeds typically run across all pages. Place them in site-wide custom code to avoid duplicating the script on every page.

To add a site-wide widget:

1. In Outgrow, select the widget type (Chat Messenger, Floating Rectangle, Greet Bar, Sidenote, or Exit Intent Pop Up) and copy the code.
2. Go to Site settings > Custom Code > Footer code.
3. Paste the code, click Save changes, and publish your site.

The widget will appear on every page after publishing. To limit it to a single page, use the page-specific custom code field instead.

Sync lead data with Outgrow's native Webflow integration

Outgrow includes a built-in Webflow integration that pushes lead data from completed quizzes and assessments directly into your site. You configure it entirely within Outgrow's dashboard, with no code to write.

To set up the native integration:

1. Log in to Outgrow and open a live content piece.
2. Go to the Configure tab and click Integrations.
3. Under Native Integrations, locate Webflow and click Configure Integration.
4. Click Authenticate With Webflow and authorize Outgrow to access your site.
5. Choose Proceed with Project to route all leads to a project, or Proceed with Segment to route leads based on quiz segments.
6. Optionally toggle Configure Visit Trigger to pass visitor details before form completion.

This completes the data connection inside Outgrow. You still need an embed or link to display the Outgrow content on your site.

Connect Outgrow and Webflow with Zapier or Make

Both Zapier and Make support explicit Outgrow-to-Webflow automations. Outgrow also has an official Zapier setup guide for Webflow.

Available Outgrow-to-Webflow pairings include:

• Outgrow New Lead → Webflow Create Item (add a CMS record for each quiz completion)
• Outgrow New Lead → Webflow Create Live Item (immediately publish the CMS record)
• Outgrow Lead Segment → Webflow Update Item (update an existing CMS record based on quiz segment)
• Outgrow Watch New Visit (Make only) → Webflow Create Item (capture visit-level data)

These pairings route lead data into CMS collections automatically without writing server-side code.

To set up a Zapier workflow:

1. Create a CMS collection with fields matching the Outgrow data you want to capture (name, email, quiz result, submission date).
2. In Zapier, create a new Zap with Outgrow as the trigger app and New Lead as the trigger event.
3. Authenticate your Outgrow account and select the quiz or calculator to monitor.
4. Set Webflow as the action app and Create Item as the action.
5. Map Outgrow lead fields (name, email, result) to the corresponding CMS collection fields.
6. Test and activate the Zap.

Once active, new Outgrow leads will flow into the mapped CMS collection automatically. No pre-built Zap or Make template exists for the Outgrow-Webflow pairing specifically, so you'll configure the connection manually.

Build with the Webflow API and Outgrow webhooks

If you need full control over data flow, field mapping, and conditional routing, the API path connects Outgrow's outbound webhooks to the v2 Data API. You'll need a middleware server (Node.js, Pipedream, or similar) that receives Outgrow webhook payloads and transforms them into Webflow API calls. Outgrow webhooks require a Business or Enterprise plan. API calls require the appropriate token and scopes for the target site or workspace context.

The setup uses:

• Outgrow webhooks send HTTP POST requests with JSON payloads containing lead data, quiz responses, UTM parameters, and geolocation fields
• The Data API v2 handles CMS collection management and item creation
• Webhooks fire events when CMS items are created, updated, published, or deleted

Outgrow webhooks support two event types: LEADS (fires on lead form submission) and VISITS (fires on page load and for each question answered). Use the VISITORKEY field to correlate multiple visit payloads to a single session.

Push quiz leads into a CMS collection

When someone completes an Outgrow quiz and submits the lead form, the webhook fires, your middleware maps the fields, and a new CMS item appears in your collection.

To implement this flow:

1. Create a CMS collection (for example, "Quiz Leads") with fields for name, slug, email, result, quiz-name, and any other Outgrow fields you want to capture.
2. Retrieve the collection_id from the API using GET /v2/sites/:site_id/collections with a Bearer token, or find it in your site's CMS settings.
3. Deploy a middleware endpoint at a public HTTPS URL. This server receives the Outgrow webhook POST and transforms the payload into a CMS item creation request.
4. In Outgrow, go to Build mode > Configure > Integrations > Webhooks. Enter your middleware URL, toggle Leads under Events To Send, and click Send Test JSON to verify delivery.
5. In your middleware, map Outgrow fields to fieldData keys and POST to https://api.webflow.com/v2/collections/{collection_id}/items with "isDraft": false to create a published item.
6. Click Enable Webhook in Outgrow to activate the live connection.

A sample API request for creating a CMS item:

curl -X POST "https://api.webflow.com/v2/collections/{collection_id}/items" \
  -H "Authorization: Bearer <token>" \
  -H "Content-Type: application/json" \
  -d '{
    "fieldData": {
      "name": "Lead Name",
      "slug": "lead-name-1716480000",
      "email": "user@example.com",
      "result": "Your quiz result",
      "quiz-name": "ROI Calculator"
    },
    "isArchived": false,
    "isDraft": false
  }'

Generate unique slugs by combining the CALCLEAD value with a timestamp, since each collection item needs a unique slug. Use RequestBin to capture and inspect test payloads during development. Outgrow's payload fields use the actual question titles as JSON keys, so run a Send Test JSON from your specific content piece to see the exact field structure before building your mapping logic.

Create live CMS pages from calculator results

For use cases where each calculator completion generates a unique results page, such as a personalized ROI report, use the live items endpoint to publish CMS items immediately.

To implement live item creation:

1. POST to https://api.webflow.com/v2/collections/{collection_id}/items/live instead of the staged items endpoint.
2. The response body returns the item id. Use this to construct the CMS page URL and redirect the user.
3. To publish items separately, POST to https://api.webflow.com/v2/collections/{collection_id}/items/publish with an itemIds array.

The CMS plan supports 2,000 items per collection, and the Business plan supports 10,000. For high-volume calculators, monitor your item count and implement cleanup logic for expired results.

What you can build with the Outgrow Webflow integration

Integrating Outgrow with Webflow lets you add interactive lead capture and personalized content to any page without building custom front-end applications.

• ROI calculator on a pricing page: Embed a numerical calculator on your pricing page where prospects input their team size, current costs, and time spent on manual tasks. The calculator returns a personalized savings estimate, gates the full report behind a lead form, and syncs the captured data to a CMS collection or CRM. VenturePact generated 87,381 qualified leads using this pattern with an interactive calculator.
• Product recommendation quiz in a popup: Add a popup quiz to your ecommerce homepage that asks shoppers 5 to 7 questions about their preferences, then recommends specific products with direct purchase links on the result page. Golf Avenue captured over 82,000 leads and drove more than 1 million visits with a product recommendation quiz built in Outgrow.
• Lead qualification assessment on a landing page: Replace the static contact form on a landing page with a scored assessment that asks about company size, current tools, and budget. High-scoring leads receive a direct calendar booking link. Low-scoring leads enter an email nurture sequence. The assessment data syncs to your CMS via Zapier or webhooks for reporting.
• Client needs assessment for agency sites: Embed a scored marketing audit or SEO health check on your agency site. Prospects self-diagnose their challenges, receive a scored report with recommendations, and arrive at the sales call pre-sold on the solution. Macroscape converted 36% of their 3,225 assessment visitors into leads using this approach.

If you need more control over data routing, conditional CMS item creation, or real-time results page generation, the API integration path covers those cases with full flexibility.