Add New Vertical (End-to-End)

This guide walks through every step needed to launch a new insurance vertical — from creating the Vertical entry to verifying the full flow in preview.

Before you start

Prerequisites:

• Access to Strapi CMS (staging environment)
• Insurance type name confirmed with engineering
• Brand color from Design
• Pricing logic agreed with the pricing team

Role split:

• Product/Ops does: Steps 1-4 (CMS configuration)
• Engineering does: Steps 5-6 (syncing and testing)
• If you’re Product, complete Steps 1-4, then request engineering support for Steps 5-6.

Overview

A complete vertical requires these content types, created in order:

1. Vertical — The product definition
2. Questionnaire — The flow of questions
3. Quote-Page — The pricing screen UI
4. Quote-Price — The pricing calculations
5. Sync — Pull everything into the app
6. Verify — Preview and test

Step 1: Create the Vertical

1. Content Manager -> Vertical -> Create new entry
2. Fill in: name, humanReadableName, insuranceType, image, colorCode, regions
3. Add planMapping entries for each plan tier
4. Add addonMapping entries if applicable
5. Configure policyModalSections and policyModalButtons
6. Save and publish

See Create a Vertical for field details.

Step 2: Create the Questionnaire

1. Content Manager -> Questionnaire -> Create new entry
2. Set metadata: name, slug, vertical (link to Step 1), type, regions
3. Add questions in the dynamic zone:
   • Start with INTRO (groupId: intro)
   • Add data-collection questions (groupId: preQuote)
   • Add QUOTE_CUSTOM for pricing (groupId: postQuote) — link to Quote-Page in Step 3
   • Add post-quote questions if needed (groupId: postQuote)
   • Add CHECKOUT or SUBMISSION (groupId: signup)
   • Add PROCESSING (groupId: signup)
   • Add SUCCESS (groupId: signup)
4. Add rules for branching logic
5. Configure progressBar in metadata
6. Save as draft

See Create a Questionnaire for details.

Step 3: Create the Quote-Page

1. Content Manager -> Quote-Page -> Create new entry
2. Set name and title
3. Add quoteOptions (sliders, switches, toggles)
4. Add content (coverage table, covered cards, add-ons, FAQ, info boxes)
5. Save

Then go back to the Questionnaire and link this Quote-Page in the QUOTE_CUSTOM question’s props.cmsQuote field.

See Create a Quote Page for details.

Step 4: Create the Quote-Price

1. Content Manager -> Quote-Price -> Create new entry
2. Set metadata.vertical to the same Vertical from Step 1
3. Configure the pricing calculation (json-builder format)
4. Save and publish

Caution

Quote-Price configuration requires understanding of the json-builder pricing format. Work with your engineering team for complex pricing logic.

Step 5: Sync to the app

# Sync the vertical definitions
yarn sync:verticals

# Sync the questionnaire
yarn sync:questionnaire -q your-vertical-slug

Review the generated files:

• Vertical: generates enum values and lookup functions
• Questionnaire: generates a .ts file in apps/app/src/syncedData/questionnaires/

Step 6: Verify in preview

1. Open the questionnaire in Strapi
2. Click Preview
3. Walk through the entire flow:
   • Intro screen renders correctly
   • All questions appear in the right order
   • Rules redirect correctly (test all branches)
   • Quote page shows plans, pricing, and customizations
   • Checkout/submission works
   • Processing and success screens render

Checklist

Item	Status
Vertical created with planMapping
Questionnaire created with all question groups
Quote-Page created with content sections
Quote-Price created with pricing logic
Questionnaire linked to Vertical, Quote-Page linked to QUOTE_CUSTOM
Synced to app codebase
Full flow tested in preview
PR opened with generated files

See also

• Vertical Schema Reference – complete field specification for the Vertical content type
• Sync Commands Reference – CLI reference for sync:questionnaire and sync:verticals
• Vertical Ecosystem – how all the pieces of a vertical connect