Webflow Integration Setup

Use this guide to send quiz submissions from QuizFlow Labs into a Webflow CMS collection.

This guide is written for the current v1 Webflow flow:

• Destination sync (create CMS items from quiz submissions)

The Integrations dashboard may also show source-query preview tools. Those are for future dynamic recommendation flows and are optional for this setup.

Before you begin

• You have a published (or publish-ready) quiz in QuizFlow Labs.
• You have a Webflow site with a CMS collection where you want submissions to go.
• You are signed in to both QuizFlow Labs and Webflow.
• You know your production QuizFlow domain (for example https://www.quizflowlabs.com).

Step 0: Install QuizFlow Labs in Webflow

If you already installed QuizFlow Labs in Webflow, skip to Step 1.

1. Open Webflow and go to the workspace/site where you want the integration.
2. Open Apps (or the Webflow App Marketplace).
3. Search for QuizFlow Labs.
4. Click Install App.
5. Select the site(s) to authorize.
6. Complete Webflow authorization and allow the requested scopes.

After installation, continue in QuizFlow Labs to complete connection and mapping.

Step 1: Connect Webflow in QuizFlow Labs

1. Go to Dashboard > Integrations in QuizFlow Labs.
2. Click Connect Webflow.
3. Complete the OAuth prompt and approve access.
4. Confirm the success banner: Webflow connected successfully.

If connection fails, see the Troubleshooting section below and retry.

Step 2: Create a sync setup

In Sync setup:

1. Select your active Connection.
2. Select the Quiz you want to sync.
3. Click Load Webflow Targets to fetch your available Webflow collections.
4. Select the destination Webflow collection in Target.
5. Choose a Publish Mode:
   • staged for safer testing
   • live to publish immediately
6. Click Load Target Fields.
7. Optional: set Target name override for easier internal naming in QuizFlow Labs.

Step 3: Map fields

1. Click Add Mapping.
2. Choose a Source field from your quiz (lead email, score, completion text, or question answers).
3. Choose a matching Webflow Target Field.
4. Repeat until required Webflow fields are mapped.
5. Click Create Active Sync Config.

Important mapping rule: every required Webflow collection field must be mapped, or config validation can fail.

Step 4: Trigger a test sync

1. Submit a real response on the selected quiz.
2. Return to Dashboard > Integrations.
3. Click Run Sync Jobs Now.
4. Confirm Recent Jobs shows succeeded.
5. In Webflow CMS, confirm a new item was created in your chosen collection.

Step 5: Validate ongoing behavior

• Submit another quiz response and confirm another CMS item appears.
• If you use staged, verify items are saved as staged in Webflow.
• Switch to live only after staged tests are correct.
• Use Pause on the sync config if you need to temporarily stop outbound writes.

Data Sources (Preview): Read/query setup

Use this section if you want to test reading data from Webflow collections inside Integrations.

Current scope:

• Load source catalog from your active Webflow connection
• Run query preview against a selected source
• Save active source configs for future dynamic/recommendation flows

How to set it up:

1. Go to Dashboard > Integrations.
2. In Data Sources (Preview), select an active Connection.
3. Click Load Source Catalog.
4. Choose a Source (Webflow collection).
5. Click Preview Query to inspect sample returned records.
6. Optionally set Source name override and Query limit.
7. Click Create Active Source Config.

How to verify it worked:

• The new source config appears in Source Configs.
• You can Pause, Activate, or Delete that config from the table.
• Query preview returns JSON records instead of an error.

Current limitations (preview):

• Source configs are for read/query testing and future runtime use.
• They do not yet auto-bind directly into quiz step rendering in production flows.
• Destination sync (submission -> CMS item) remains the main production path in this release.

Ongoing Operations

• Pause a config: use Pause in the Sync Config table.
• Re-enable a config: use Activate.
• Delete a config: use Delete.
• Retry failed jobs: use Retry in Recent Jobs.
• Disconnect account: use Disconnect in Connections.

Troubleshooting

invalid_scope

Disconnect Webflow in QuizFlow Labs and reconnect. During authorization, ensure all requested scopes are approved.

invalid_redirect_uri

This means the callback URI used in OAuth does not exactly match what Webflow expects.

Checklist:

• Ensure WEBFLOW_REDIRECT_URI exactly matches your deployed callback URL.
• Typical production callback format:
  • https://www.quizflowlabs.com/api/integrations/webflow/callback
• Use the same domain form consistently (www vs non-www, app. subdomain, HTTPS only).
• Retry from Connect Webflow after updating environment variables.

Load targets/fields fails

• Reconnect Webflow from Integrations.
• Ensure the Webflow user has access to the destination site/collection.
• Refresh and retry after reconnecting.

Source catalog/query fails

• Confirm the selected connection is active.
• Click Load Source Catalog again after reconnecting.
• Reduce query limit and retry preview.
• If the selected collection changed in Webflow, reload catalog and reselect the source.

Job failed after submission

• Read Recent Jobs error message in Integrations.
• Verify required Webflow fields are mapped.
• Retry job after fixing mapping.

Mapping failed provider validation

• Reload target fields and confirm the mapped target fields still exist.
• Ensure required Webflow fields are mapped and types are compatible.
• Recreate the mapping row if a field was renamed/changed in Webflow.

Quick QA checklist before release

• Connect Webflow from a clean browser session.
• Create one staged sync config and run a full submission test.
• Verify succeeded job status and CMS item presence.
• Test one failure case (unmapped required field) and confirm readable error.
• Confirm disconnect/reconnect still works.