Start Page Schema

Overview

The Start Page Schema provides a standardized layout for introductory or welcome screens within QR Code landing pages.
It typically includes a logo, title, and description, along with a primary button to guide users to the next section (e.g., form or feedback screen). This schema allows customization of button style, colors, and layout to maintain consistent visual branding.

Properties

Property	Type	Required	Description
logo	`object`	No	Contains the logo used on the start screen.
logo.url	`string`	No	URL of the logo image. Must be a valid image URL (`.png`, `.jpg`, `.svg`, etc.).
title	`string`	No	Title text displayed on the page. Must be between 0–100 characters.
description	`string`	No	Short page description or subtitle. Must be between 2–200 characters.
button	`object`	No	Defines the start button’s label, colors, and style properties.
button.label	`string`	No	Text label displayed on the button (e.g., “Start Feedback”).
button.buttonStyle	`object`	No	Button styling details such as border width and border radius.
button.buttonStyle.borderWidth	`number`	No	Specifies the border thickness of the button.
button.buttonStyle.borderRadius	`number`	No	Specifies the corner rounding of the button.
button.color	`object`	No	Defines color settings for border, background, and text label.
button.color.border	`string`	No	Hex color for button border.
button.color.button	`string`	No	Hex color for button background.
button.color.label	`string`	No	Hex color for button text.

Used in Categories

This component is used in the following categories:

Feedback

Related Component:
The Success Page Schema complements the Start Page.
While the Start Page introduces the user journey, the Success Page concludes it — ideal for post-submission messages or thank-you screens.

Schema

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "definitions": {},
  "title": "Start page schema",
  "description": "",
  "type": "object",
  "properties": {
    "logo": {
      "type": "object",
      "required": [],
      "additionalProperties": false,
      "properties": {
        "url": {
          "type": "string",
          "description": "Logo URL",
          "anyOf": [
            {
              "pattern": "^(https?://.*\\.(png|jpeg|jpg|svg|gif|PNG|JPEG|JPG|SVG|GIF))$"
            },
            {
              "const": ""
            }
          ]
        }
      }
    },
    "title": {
      "type": "string",
      "minLength": 0,
      "maxLength": 100,
      "description": "Page title"
    },
    "description": {
      "type": "string",
      "minLength": 2,
      "maxLength": 200,
      "description": "Page description"
    },
    "button": {
      "type": "object",
      "properties": {
        "label": {
          "type": "string"
        },
        "buttonStyle": {
          "type": "object",
          "properties": {
            "borderWidth": {
              "type": "number"
            },
            "borderRadius": {
              "type": "number"
            }
          }
        },
        "color": {
          "type": "object",
          "properties": {
            "border": {
              "type": "string"
            },
            "button": {
              "type": "string"
            },
            "label": {
              "type": "string"
            }
          }
        }
      }
    }
  }
}

Notes

The logo image should ideally be square and optimized for web (e.g., 512×512 px).
The button can inherit theme styling if global design tokens are defined.
Keep titles and descriptions short and action-oriented to improve engagement.
Use consistent button styles across feedback screens for visual continuity.

Getting Started

Code Examples

Category Components

Categories

Overview

Properties

Used in Categories

Schema

Notes

​Overview

​Properties

​Used in Categories

​Schema

​Notes

Overview

Properties

Used in Categories

Schema

Notes