Skip to main content

​
Overview

The Page Layout Component controls the visual appearance of a QR Code landing page.
It allows configuration of background colors, images, and layout behavior to align with brand identity or event themes. This component is flexible and reusable — supporting various QR Code categories like Coupon, Event, Social Media, and more.
It ensures consistent styling across pages while allowing each category to customize its visual theme.

​
Properties

PropertyTypeRequiredDescription
backgroundColorstringNoSets the background color of the page (supports HEX, RGB, or CSS color names).
backgroundImagestringNoURL of the background image. Supports .png, .jpg, .jpeg, .svg, .gif.
backgroundImageSettingstringNoControls background image behavior (e.g., cover, contain, or repeat).

​
Used in Categories

This component is used in the following categories:

​
Example Schema

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "definitions": {},
  "title": "Page layout component",
  "description": "Validate page payload component",
  "type": "object",
  "required": [],
  "properties": {
    "backgroundColor": {
      "type": "string"
    },
    "backgroundImage": {
      "type": "string"
    },
    "backgroundImageSetting": {
      "type": "string"
    }
  }
}

​
Notes

  • If both backgroundColor and backgroundImage are provided, the image will take priority.
  • Use light or neutral background colors for better text readability.
  • Always use optimized background images (< 1 MB) to prevent slow page loading.
  • Ensure the background image URL is publicly accessible (HTTPS recommended).