Skip to content
Birdhouse

Setting Up a Quote Page

In this tutorial you will create a Quote-Page in Strapi, configure it with customization options and content sections, and link it to your pet insurance questionnaire. By the end, users will see a full pricing screen in the middle of their flow.

Prerequisites

Section titled “Prerequisites”

1. Create a Quote-Page entry

Section titled “1. Create a Quote-Page entry”

The Quote-Page is a separate content type in Strapi that defines the UI of the pricing screen.

  1. In Strapi, go to Content Manager
  2. Select Quote-Page from the collection types list
  3. Click Create new entry

Fill in the basic fields:

Field Value
name pet-insurance
title Choose your pet insurance plan

The name acts as a slug for internal identification. The title appears as the main heading on the quote page.

2. Add customization options

Section titled “2. Add customization options”

Customization options let users adjust their coverage. They appear as interactive controls on the quote page.

Add a slider

Section titled “Add a slider”

In the Quote Options section (where you add customization controls — see Glossary for “dynamic zone”), add a slider component:

Field Value
id coverageAmount
label Coverage amount
min 5000
max 50000
step 5000
defaultValue 10000
unit EUR

This creates a draggable slider that lets users choose their coverage amount between 5,000 and 50,000 EUR in steps of 5,000.

Add a switch

Section titled “Add a switch”

Add a switch component to the Quote Options section:

Field Value
id includeVetVisits
label Include routine vet visits
defaultValue false

A switch renders as a toggle/checkbox. When the user enables it, the value becomes true and the pricing engine can factor it into the premium.

3. Add content sections

Section titled “3. Add content sections”

The Content section (where you add the page’s body sections) holds the informational parts of the quote page.

Add covered cards

Section titled “Add covered cards”

Add a covered-cards component:

  1. For each covered item, add an entry with:
    • title — e.g., Surgery, Medication, Emergency care
    • icon — select an appropriate icon

These appear as a visual grid showing what the insurance covers.

Add a coverage table

Section titled “Add a coverage table”

Coverage tables let users compare plans side by side. First you need a Table entry.

  1. Go to Content Manager -> Table -> Create new entry
  2. Set the table name (e.g., pet-insurance-comparison)
  3. Add sections and rows:
    • Section: Core Coverage
      • Row: Surgery with cell values per plan
      • Row: Medication with cell values per plan
    • Section: Extras
      • Row: Routine vet visits with cell values per plan
  4. Save the Table

Now go back to your Quote-Page and add a coverage-table component in the content dynamic zone:

Field Value
table Select your pet-insurance-comparison table

Add FAQ

Section titled “Add FAQ”

Add an faq-collection component in the content dynamic zone:

  1. First, create an FAQ entry in Content Manager -> FAQ if one does not exist
  2. Add question/answer pairs relevant to pet insurance
  3. Back in the Quote-Page content, link the FAQ entry
Section titled “4. Configure the footer”

The footer appears at the bottom of the quote page.

Field Value
bookACallUrl https://calendly.com/feather-insurance/pet

This adds a “Book a call” link for users who want to speak with an advisor before purchasing.

5. Link the Quote-Page to your questionnaire

Section titled “5. Link the Quote-Page to your questionnaire”

Now connect everything together.

  1. Go back to Content Manager -> Questionnaire -> your pet insurance questionnaire
  2. In the questions dynamic zone, add a new component
  3. Select a Quote Page question type (QUOTE_CUSTOM)

Fill in:

Field Value
questionId quote
groupId postQuote
Quote Page (props.cmsQuote) Select your pet-insurance Quote-Page from the dropdown

The Quote Page field in the question’s settings tells the system which Quote-Page definition to use. This renders the full CMS-driven pricing experience (Quote Page V2).

6. Save and preview

Section titled “6. Save and preview”
  1. Save the questionnaire
  2. Click Preview
  3. Walk through the flow:
    • Answer the intro and pre-quote questions
    • You should arrive at the quote page showing your title, slider, switch, covered cards, coverage table, and FAQ
    • Adjust the slider and toggle the switch — the UI should respond
    • Select a plan and continue

What you built

Section titled “What you built”

Your questionnaire now has a complete pricing experience:

  • Slider for coverage amount selection
  • Switch for optional add-ons
  • Covered cards showing what is included
  • Coverage table for plan comparison
  • FAQ for common questions
  • Footer with a book-a-call link

The Quote-Page is linked to your questionnaire through the Quote Page field. You can update the pricing screen independently from the question flow.

Next steps

Section titled “Next steps”

Your questionnaire is feature-complete as a draft. In Syncing and Previewing, you will learn how to sync it to the app codebase and manage the full publish workflow.

See also

Section titled “See also”