Markup Reference

Introduction

Prism Data Structure must be a valid JSON markup.

The markup structure is divided into separate Widgets.

Widgets, in turn, can contain the following data:

  • Global widget config (design and other settings)
  • Content data structure (may vary for each widget)

Prism Server renders widgets on Prism Page based on their settings.

Design customization

Widgets may provide optional design/layout settings, but not all design settings available via JSON markup. Please ask your manager for additional customization options.

Widgets position on the page

The position of the widgets relative to each other is controlled by changing their order in the JSON markup (auto placement feature).

However, several widgets ignore theirs position in markup and are placed in fixed slots on the page or have their own position param in the JSON markup.

Supported placement types for widgets:

Placement type Description
auto Widget’s position is chosen automatically based on their order in the JSON markup
fixed The position specified in the widget settings is used
none Selecting position is not applicable to this widget

Widgets IDs

Each widget must have a required Id field. If the same widget is located on different pages, then it must always have the same Id.

You can use in Id any of the following combinations:

  • letters (upper or lowercase)
  • numbers (0-9)
  • underscore (_)
  • dash (-)
  • point (.)

Id must match this regular expression: ^[a-zA-Z0-9_.-]*$

Markup example

[
    {
        "Type": "head",
        "Id": "abcABC123",
        "Url": "https://yoursite.com/current/page/", 
        "Content": "<!-- Content from your <head></head> tag: --> <title>Page title</title><link rel=\"icon\" href=\"https://yoursite.com/favicon.png\" sizes=\"32x32\" /> ..."
    },
    {
        "Type": "menu",
        "Id": "abcABC123",
        "Placement": "BurgerMenu",
        "BurgerMenuWidthPercent": 100,
        "BurgerMenuSide": "right",
        "ShowSearchInput": true,
        "MenuTitleText": "Catalog",
        "Items": [
            {
                "Id": "1.0", 
                "Title": "Cars", 
                "Url": "https://yoursite.com/cars/", 
                "Items": [
                    {
                        "Id": "1.1", 
                        "Title": "Parts", 
                        "Url": "https://yoursite.com/cars/parts/"
                    }
                ]
            },
            {
                "Id": "2", 
                "Title": "Bikes", 
                "Url": "https://yoursite.com/bikes.html"
            }
        ]
    },
    {
        "Type": "article",
        "Id": "abcABC123",
        "CreatedDate": "2020-08-03T12:36:26", 
        "ModifiedDate": "2020-08-03T12:36:26", 
        "Taxonomies": [{
            "Type": "Category",
            "Items": [{
                "Name": "Football",
                "Default": true
            },{
                "Name": "Basketball",
                "Default": false
            }]
        }],
        "Image": {
            "Src": "https://yoursite.com/images/hero-full.jpg",
            "Width": 1500,
            "Height": 844,
            "Alt": "Alt text",
            "Caption": "Caption text",
            "Description": "Image description text"
        },
        "Title": "Article title",
        "Description": "Description text",
        "Text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur interdum, nisl quis facilisis sollicitudi, tellus metus fringilla dolor, eu porta libero mauris finibus metus. Quisque pulvinar mattis sagittis.",
        "Author": [{
            "Name": "John Doe",
            "Url": "https://yoursite.com/author/page/", 
            "Description": "Author description text",
            "Image": {
                "Src": "https://yoursite.com/images/author/avatar.jpg",
                "Width": 1500,
                "Height": 844,
                "Alt": "Alt text"
            }
        }]
    }
]

Next Steps

Explore the rest of the documentation: