> ## Documentation Index
> Fetch the complete documentation index at: https://docs.scanova.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Start Page Schema

> Defines the structure for start or intro pages used in Feedback QR Codes. This schema specifies how the logo, title, description, and button appear on the first page of a feedback flow.

## 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](/guides/category-components/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

<CodeGroup>
  ```json Schema theme={null}
  {
    "$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"
              }
            }
          }
        }
      }
    }
  }
  ```
</CodeGroup>

## 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.