Skip to main content

​
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

PropertyTypeRequiredDescription
logoobjectNoContains the logo used on the start screen.
logo.urlstringNoURL of the logo image. Must be a valid image URL (.png, .jpg, .svg, etc.).
titlestringNoTitle text displayed on the page. Must be between 0–100 characters.
descriptionstringNoShort page description or subtitle. Must be between 2–200 characters.
buttonobjectNoDefines the start button’s label, colors, and style properties.
button.labelstringNoText label displayed on the button (e.g., “Start Feedback”).
button.buttonStyleobjectNoButton styling details such as border width and border radius.
button.buttonStyle.borderWidthnumberNoSpecifies the border thickness of the button.
button.buttonStyle.borderRadiusnumberNoSpecifies the corner rounding of the button.
button.colorobjectNoDefines color settings for border, background, and text label.
button.color.borderstringNoHex color for button border.
button.color.buttonstringNoHex color for button background.
button.color.labelstringNoHex color for button text.

​
Used in Categories

This component is used in the following categories: 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.