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

# QR Code Info Components

> When creating QR codes, the info parameter contains JSON data that varies based on the category. This page documents all the available components and their structure.

## **Overview**

Every QR Code created via the **Scanova API** includes an `info` parameter — a JSON object containing data relevant to the QR Code’s **category** (e.g., URL, Event, Product).

This page lists all available **components**, their required structure, and examples for implementation.

## Common Components

Each component corresponds to a specific QR Code category.\
You must use the exact JSON format shown for your selected category.

### URL Component

Used for **Website** **URL** and other link-based categories.

```json theme={null}
{
  "type": "url",
  "data": {
    "url": "https://example.com"
  }
}
```

### Location Component

Used for **Google** **Map** category.

```json theme={null}
{
  "type": "map",
  "data": {
    "provider": "google",
    "latitude": 40.724974,
    "longitude": -73.9337742,
    "placeId": "ChIJNXse7rRewokRNinJ2bCR8ss",
    "placeName": "2100 Cherry St, Brooklyn, NY 11222, USA"
  }
}
```

### Documents Component

Used for **Document** QR Codes.

```json theme={null}
[
  {
    "type": "page_layout",
    "data": {
      "templateId": "default_1"
    }
  },
  {
    "type": "design_info",
    "data": {
      "pageHeader": {
        "shapeName": "wave",
        "shapeColor": "#D8D8D8"
      },
      "color": {
        "button": "#585858",
        "text": "#FFFFFF"
      },
      "fontSize": 1.25,
      "fontFamily": "Inter"
    }
  },
  {
    "type": "intro_page",
    "data": {
      "url": "https://qcg-media.scanova.io/core/images/document_QR/document.svg",
      "tagline": "Loading...",
      "time": 3
    }
  },
  {
    "type": "main_page",
    "data": {
      "pageLayout": "list",
      "pageTitle": "All Documents in One Place",
      "subHeading": "All documents have been organized here for easy access and review.",
      "files": [
        {
          "url": "https://qcg-media.scanova.io/media/uploads/example.pdf",
          "name": "gst-banner.pdf",
          "size": 78482,
          "fileName": "gst-banner"
        }
      ],
      "allowFileDownload": true
    }
  }
]
```

### Images Component

Used for **Image** QR Codes.

```json theme={null}
{
  "type": "image",
  "data": [
    {
      "url": "https://example.com/image.jpg",
      "name": "Image Name"
    }
  ]
}
```

### Audio Component

Used for **Audio** QR Codes.

```json theme={null}
{
  "type": "audio",
  "data": [
    {
      "url": "https://example.com/audio.mp3",
      "name": "Audio Name"
    }
  ]
}
```

### Social Media Component

Used for **Social** **Media** QR Codes.

```json theme={null}
{
  "type": "page_layout",
  "data": {
    "backgroundColor": "#ffffff",
    "socialLinks": [
      {
        "platform": "facebook",
        "url": "https://facebook.com/yourpage"
      },
      {
        "platform": "twitter",
        "url": "https://twitter.com/yourhandle"
      },
      {
        "platform": "instagram",
        "url": "https://instagram.com/yourhandle"
      },
      {
        "platform": "linkedin",
        "url": "https://linkedin.com/in/yourprofile"
      },
      {
        "platform": "youtube",
        "url": "https://youtube.com/yourchannel"
      }
    ]
  }
}
```

### Event Component

Used for **Event** and **Wedding** QR Codes.

```json theme={null}
{
  "type": "page_layout",
  "data": {
    "backgroundColor": "#ffffff",
    "eventDetails": {
      "title": "Event Title",
      "date": "2024-01-15",
      "time": "18:00",
      "venue": "Event Venue",
      "description": "Event description",
      "rsvp": {
        "enabled": true,
        "url": "https://example.com/rsvp"
      }
    }
  }
}
```

### Product Component

Used for **Product** QR Codes.

```json theme={null}
{
  "type": "page_layout",
  "data": {
    "backgroundColor": "#ffffff",
    "productDetails": {
      "name": "Product Name",
      "price": "$99.99",
      "description": "Product description",
      "images": [
        "https://example.com/product1.jpg",
        "https://example.com/product2.jpg"
      ],
      "features": [
        "Feature 1",
        "Feature 2",
        "Feature 3"
      ]
    }
  }
}
```

### Custom Page Component

Used for **Custom Page** QR Codes.

```json theme={null}
{
  "type": "page_layout",
  "data": {
    "backgroundColor": "#ffffff",
    "sections": [
      {
        "type": "banner_images",
        "data": {
          "images": [
            "https://example.com/banner1.jpg"
          ]
        }
      },
      {
        "type": "text_content",
        "data": {
          "title": "Page Title",
          "content": "Page content goes here"
        }
      }
    ]
  }
}
```

### App Store Component

Used for **App** **Store** QR Codes.

```json theme={null}
{
  "type": "app_store",
  "data": {
    "app_name": "My App",
    "app_id": "123456789",
    "platform": "ios",
    "store_url": "https://apps.apple.com/app/my-app/id123456789"
  }
}
```

### App Deep Link Component

Used for **App** **Deep** **Link** QR Codes.

```json theme={null}
{
  "type": "app_deep_link",
  "data": {
    "app_name": "My App",
    "deep_link": "myapp://open/screen/123",
    "fallback_url": "https://example.com/download"
  }
}
```

### Coupon Component

Used for **Coupon** QR Codes.

```json theme={null}
{
  "type": "coupon",
  "data": {
    "title": "Special Offer",
    "description": "Get 20% off your next purchase",
    "code": "SAVE20",
    "expiry_date": "2024-12-31",
    "terms": "Terms and conditions apply"
  }
}
```

### Business Card Component

Used for **Business** **Card** QR Codes.

```json theme={null}
{
  "type": "business_card",
  "data": {
    "name": "John Doe",
    "title": "Software Engineer",
    "company": "Tech Corp",
    "email": "john@techcorp.com",
    "phone": "+1-555-123-4567",
    "website": "https://techcorp.com",
    "address": "123 Tech Street, City, State 12345"
  }
}
```

### Restaurant Component

Used for **Restaurant** QR Codes.

```json theme={null}
{
  "type": "restaurant",
  "data": {
    "name": "Restaurant Name",
    "description": "Fine dining experience",
    "menu_url": "https://example.com/menu",
    "phone": "+1-555-123-4567",
    "address": "123 Food Street, City, State 12345",
    "hours": "Mon-Sun: 11:00 AM - 10:00 PM"
  }
}
```

## Best Practices

<Note>
  All QR Codes created through the API are **Dynamic by default**, allowing you to update their content anytime without changing the printed code.
</Note>

### Component Guidelines

1. Always include the `"type"` field.
2. Validate all URLs and ensure they’re accessible.
3. Follow the exact JSON schema per component.
4. Use `pattern_info` for consistent QR branding. See `QR Code Design` for more details.
5. Validate JSON before sending to prevent request errors.