# System Components
## Web components
### article_container
Represents container for Article
##### Example
```json
{
"type": "article_container",
"visible_since": "2022-04-11T13:49:51.729401Z",
"visible_until": "2024-04-10T12:54:27.609Z",
"title": { "en": "Article" },
}
```
### articles_list_container
Represents container for Articles List
##### Example
```json
{
"type": "articles_list_container",
"visible_since": "2022-04-11T13:49:51.729401Z",
"visible_until": "2024-04-10T12:54:27.609Z",
"title": { "en": "Articles List" },
}
```
### carousel
Represents slideshow of "screens" consisting of image, text and/or link.
##### Example
```json
{
"type": "carousel",
"visible_since": "2022-10-07T07:44:34.534Z",
"visible_until": "2024-07-09T01:44:58.684Z",
"title": { "en": "Carousel", "pl": "Karuzela" },
"slides": [
{
"visible_since": "2023-03-08T21:07:34.372Z",
"visible_until": "2024-01-03T20:17:01.416Z",
"layout": "split",
"position": "top",
"background_color": "#FF00FF",
"title": { "text": { "en": "Title", "pl": "Tytuł" }, "color": "#ffffff" },
"subtitle": { "text": { "en": "Subtitle", "pl": "Subtytuł" }, "color": "#000fff" },
"link": {
"text": { "en": "Link", "pl": "Odnośnik" },
"url": "https://dakotalapse.com/",
"link_opens_new_tab": true
},
"image": {
"url": "https://cdn-files.dev.placewise.com/files/cNxZL2C4-sSH8NvN3fNM2N6_rHoz1mlYY1oxcmlPaHpvTA"
}
}
]
}
```
### connect_form
Member enrolment form for the profile or newsletter programme (depending on which option is selected).
##### Example
```json
{
"type": "connect_form",
"cta": {
"en": null,
"fi": "Call to action",
"pl": null
},
"body": {
"en": null,
"fi": "Blocks body",
"pl": null
},
"image": {
"url": "https://url.com"
},
"title": {
"en": null,
"fi": "Title",
"pl": null
},
"sub_title": {
"en": null,
"fi": "Subtitle",
"pl": null
},
"privacy_text": {
"en": null,
"fi": "Privacy text",
"pl": null
},
"visible_until": "2024-09-28T11:01:00+0200",
"visible_since": "2024-09-05T11:00:00+0200"
}
```
### contact_form
Section to display contact form
##### Example
```json
{
"type": "contact_form",
"title": { "fi": "Title", "en": null, "pl": null },
"visible_until": "2024-09-18T11:01:00+0200",
"visible_since": "2024-09-06T11:00:00+0200",
}
```
### contacts
Grid for displaying photo and contact details.
##### Example
```json
{
"title": 'Title',
"type": "contacts",
"items": [
{
"name": {
"fi": "First name",
"en": null,
"pl": null
},
"position": {
"fi": "Position",
"en": null,
"pl": null
},
"department": {
"fi": "Department",
"en": null,
"pl": null
},
"phone": {
"fi": "+1 123-123-123",
"en": null,
"pl": null
},
"email": "email@email.com",
"image": {
"url": "https://url.com"
}
}
],
"visible_until": "2024-09-28T11:01:00+0200",
"visible_since": "2024-09-05T11:00:00+0200"
}
```
### cta_section
Banner with formated text, optionally with dark-coloured buttons.
##### Example
```json
{
"title": null,
"type": "cta_section",
"sub_title": {
"fi": "Subtitle",
"en": null,
"pl": null
},
"body": {
"fi": "Body",
"en": null,
"pl": null
},
"background": {
"url": "https://url.com"
},
"links": [
{
"link": {
"text": {
"fi": "Cta on the button",
"en": null,
"pl": null
},
"url": "https://google.com",
"target": "blank"
}
}
],
"visible_until": "2024-09-28T11:01:00+0200",
"visible_since": "2024-09-05T11:00:00+0200"
}
```
### cta_with_buttons
Image with header, text and optional buttons.
##### Example
```json
{
"title": {
"fi": "title",
"en": null,
"pl": null
},
"visible_until": "2024-09-27T11:01:00+0200",
"visible_since": "2024-09-04T11:00:00+0200",
"type": "cta_with_buttons",
"header": "Header",
"content": "Content",
"image": {
"url": "https://url.com"
},
"buttons": [
{
"link": {
"text": {
"fi": "Button CTA",
"en": null,
"pl": null
},
"url": "http://google.com",
"target": "blank"
}
}
]
}
```
### data_points
Section to display statistics, allows to display label and value.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-18T11:01:00+0200",
"visible_since": "2024-09-06T11:00:00+0200",
"type": "data_points",
"items": [
{
"label": {
"fi": "Label",
"en": null,
"pl": null
},
"value": {
"fi": "Value %",
"en": null,
"pl": null
}
}
]
}
```
### directions
Location of the venue on the map with description and a button.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-20T11:01:00+0200",
"visible_since": "2024-09-11T11:00:00+0200",
"type": "directions",
"description": {
"fi": "Description",
"en": null,
"pl": null
},
"cta": {
"fi": "CTA",
"en": null,
"pl": null
}
}
```
### directory_preview
Displays CMS stores in the grid layout, can include categories.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-20T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "directory_preview",
"categories_count": 2,
"categories_order": [
{
"category": "shopping"
},
{
"category": "dining"
}
]
}
```
### diumvirate
Two linked images, placed in a side-by-side view.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-26T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "diumvirate",
"items": [
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"sub_title": {
"fi": "Subtitle",
"en": null,
"pl": null
},
"image": {
"url": "https://url.com"
},
"link": {
"text": {
"fi": "CTA",
"en": null,
"pl": null
},
"url": "https://google.com",
"target": "blank"
}
},
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"sub_title": {
"fi": "Subtitle",
"en": null,
"pl": null
},
"image": {
"url": "https://url.com"
},
"link": {
"text": {
"fi": "CTA",
"en": null,
"pl": null
},
"url": "https://google.com",
"target": "blank"
}
}
]
}
```
### event_container
Represents container for Event
##### Example
```json
{
"type": "event_container",
"visible_since": "2022-04-11T13:49:51.729401Z",
"visible_until": "2024-04-10T12:54:27.609Z",
"title": { "en": "Event" },
}
```
### events_list_container
Represents container for Events List
##### Example
```json
{
"type": "events_list_container",
"visible_since": "2022-04-11T13:49:51.729401Z",
"visible_until": "2024-04-10T12:54:27.609Z",
"title": { "en": "Events List" },
}
```
### featured_articles_carousel
Displays CMS articles as slides in the carousel layout.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "featured_articles_carousel"
}
```
### featured_elements
Displays CMS events and manually added elements.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "featured_elements",
"elements": [
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"sub_title": {
"fi": "Subtitle",
"en": null,
"pl": null
},
"location": {
"fi": "Location",
"en": null,
"pl": null
},
"description": {
"fi": "\u003cp\u003eDescription\u003c/p\u003e",
"en": null,
"pl": null
},
"image": null,
"link": {
"text": {
"fi": "CTA",
"en": null,
"pl": null
},
"url": "http://google.com",
"target": "blank"
}
}
]
}
```
### featured_events
Displays latest or related CMS events.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "featured_events"
}
```
### featured_events_carousel
Displays CMS events as scrolling carousel slides.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "featured_events_carousel"
}
```
### featured_stores
For the Store page.
Displays related Stores.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "featured_stores"
}
```
### footer_1
Represents footer variant for layout.
##### Example
```json
{
"type": "footer_1",
"links_1": {
"children": [
{ "label": { "text": { "en": "Home" }, "url": "website://service_page?service=home_page" } },
{ "label": { "text": { "en": "Deals" }, "url": "website://service_page?service=promotions_list" } },
]
},
"links_2": {
"children": [
{ "label": { "text": { "en": "About" }, "url": "website://page?id=15" } },
{ "label": { "text": { "en": "Download the App" }, "url": "https://play-store.com/app" } }
]
},
"social_media": true,
"call_to_action_1": {
"target": "self",
"text": { "en": "Register" },
"url": "website://page?id=24"
},
"call_to_action_2": {
"target": "blank",
"text": { "en": "Promotions" },
"url": "https://example.com/promotions"
}
}
```
### gallery
A photo grid that allows to download a photo or display it in a modal.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "gallery",
"download": null,
"images": [
{
"image": {
"url": "https://url.com"
}
}
]
}
```
### header_1
Represents header variant for layout.
##### Example
```json
{
"type": "header_1",
"opening_hours": false,
"weather_forecast": true,
"logo": { "url": "https://placewise.com/image-90949191.jpg" },
"site_menu": {
"children": [
{ "label": { "text": "Home", "url": "website://service_page?service=home_page" } },
{ "label": { "text": "Deals", "url": "website://service_page?service=promotions_list" } },
{ "label": { "text": "About", "url": "website://page?id=15" } },
{ "label": { "text": "Download the App", "url": "https://play-store.com/app" } },
{
"label": { "text": "News" },
"children": [
{ "label": { "text": "Events", "url": "website://service_page?service=events" } },
{ "label": { "text": "Articles", "url": "website://service_page?service=articles" } }
]
}
]
}
}
```
### home_hero
Displays home hero carousel.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "home_hero"
}
```
### hours_calendar
Opening hours of the venue on particular days, from Venue info.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "hours_calendar"
}
```
### html_block
Represents simple block of HTML content.
##### Example
```json
{
"type": "html_block",
"visible_since": "2022-04-11T13:49:51.729401Z",
"visible_until": "2024-04-10T12:54:27.609Z",
"title": { "en": "Hi there!", "pl": "Cześć!" },
"body": { "en": "What's up?
", "pl": "Jak leci?
" }
}
```
### iframe
An inline frame displaying another website.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "iframe",
"url": "http://google.com",
"width": "full",
"height": 500
}
```
### job_container
Represents container for Job
##### Example
```json
{
"type": "job_container",
"visible_since": "2022-04-11T13:49:51.729401Z",
"visible_until": "2024-04-10T12:54:27.609Z",
"title": { "en": "Job" },
}
```
### jobs_list_container
Represents container for Jobs List
##### Example
```json
{
"type": "jobs_list_container",
"visible_since": "2022-04-11T13:49:51.729401Z",
"visible_until": "2024-04-10T12:54:27.609Z",
"title": { "en": "Jobs List" },
}
```
### map
Standalone map of the venue.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "map"
}
```
### movies_browser
Movies feed
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "movies_browser"
}
```
### movies_carousel
For movie page
Movies feed as a carousel with one item selected.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "movies_carousel"
}
```
### page_content
Represents dummy page in layout.
##### Example
```json
{
"type": "page_content"
}
```
### popup_image
Represents slideshow of informational notices consisting of text and/or link.
##### Example
```json
{
"type": "popup_image",
"title": { "en": "Popup" },
"image": { "url": "https://example.com" },
"link": {
"url": "https://example.com",
"text": { "en": "Click me" },
"target": "self"
}
}
```
### press_browser
Press releases feed
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "press_browser"
}
```
### press_browser
For press releases page
Press releases feed - same as press_releases_list_container
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "press_details"
}
```
### press_details
For press release page
Press releases details - same as press_release_container
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "press_details"
}
```
### press_release_container
Represents container for Press Release
##### Example
```json
{
"type": "press_release_container",
"visible_since": "2022-04-11T13:49:51.729401Z",
"visible_until": "2024-04-10T12:54:27.609Z",
"title": { "en": "Press Release" }
}
```
### press_releases_list_container
Represents container for Press Releases List
##### Example
```json
{
"type": "press_releases_list_container",
"visible_since": "2022-04-11T13:49:51.729401Z",
"visible_until": "2024-04-10T12:54:27.609Z",
"title": { "en": "List" }
}
```
### promotion_container
Represents container for Promotion
##### Example
```json
{
"type": "promotion_container",
"visible_since": "2022-04-11T13:49:51.729401Z",
"visible_until": "2024-04-10T12:54:27.609Z",
"title": { "en": "Promotion" },
}
```
### promotions
Banner, with several links
##### Example
```json
{
"title": {
"fi": "Title",
"en": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "promotions",
"sub_title": {
"fi": "Subtitle",
"en": null
},
"background": null,
"links": [
{
"link": {
"text": {
"fi": "CTA",
"en": null
},
"url": "https://google.com",
"target": "blank"
}
}
]
}
```
### promotions_list_container
Represents container for Promotions List
##### Example
```json
{
"type": "promotions_list_container",
"visible_since": "2022-04-11T13:49:51.729401Z",
"visible_until": "2024-04-10T12:54:27.609Z",
"title": { "en": "Promotions List" },
}
```
### search_results
Displays search results.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "search_results"
}
```
### service_messages_list
WIP
##### Example
```json
{
"type": "service_messages_list"
}
```
### site_map
Displays site map.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "site_map"
}
```
### social_feed
Displays social media feed from Curator.
api_key, feed_id, container_id - Curator config values
##### Example
```json
{
"title": {
"fi": "Title",
"en": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "social_feed",
"sub_title": {
"fi": "Subtitle",
"en": null
},
"api_key": "123123",
"feed_id": "123123",
"container_id": "123123"
}
```
### store_container
Represents container for Store
##### Example
```json
{
"type": "store_container",
"visible_since": "2022-04-11T13:49:51.729401Z",
"visible_until": "2024-04-10T12:54:27.609Z",
"title": { "en": "Store" }
}
```
### store_deals
For the Store page.
Displays Deals related to the Store.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "store_deals"
}
```
### store_deals_carousel
For the Deal page.
Displays Deals as scrolling carousel slides.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "store_deals_carousel"
}
```
### store_map
For the Deal page.
Displays Deals as scrolling carousel slides.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null,
"pl": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "store_map"
}
```
### store_description
For the Deal and Event page.
Shows details of the attached Store in simplified form.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "store_description",
"store_id": 123
}
```
### store_movies_browser
For the Store page.
Mvoies feed. Will render only on the store marked as a cinema.
##### Example
```json
{
"title": {
"fi": "Title",
"en": null
},
"visible_until": "2024-09-19T11:01:00+0200",
"visible_since": "2024-09-12T11:00:00+0200",
"type": "store_movies_browser"
}
```
### stores_list_container
Represents container for Stores List
##### Example
```json
{
"type": "stores_list_container",
"visible_since": "2022-04-11T13:49:51.729401Z",
"visible_until": "2024-04-10T12:54:27.609Z",
"title": { "en": "Stores List" },
}
```
### ticker
Represents slideshow of informational notices consisting of text and/or link.
##### Example
```json
{
"type": "ticker",
"title": { "en": "Ticker", "pl": "Pasek" },
"items": [
{
"text": { "en": "Very important notice", "pl": "Ważna informacja. Będzie dobrze."},
"url": "https://example.com",
"target": "blank"
}
]
}
```
## Mobile components
### member_offers
Displays a list of offers targeted for member
##### Example
```json
{
"type": "member_offers"
"title": { "en": "Offers", "pl": "Ofersy" },
"visible_until": "2026-02-28T12:01:00+0100",
"visible_since": "2026-01-16T12:00:00+0100",
}
```
### member_rewards
Displays a list of rewards targeted for member
##### Example
```json
{
"type": "member_rewards"
"title": { "en": "Rewards", "pl": "Rewardsy" },
"visible_until": "2026-02-28T12:01:00+0100",
"visible_since": "2026-01-16T12:00:00+0100",
}
```
### member_welcome
Displays a personalized module that displays member-specific information
##### Example
```json
{
"type": "member_welcome"
"title": { "en": "Hi", "pl": "Witaj" },
"visible_until": "2026-02-28T12:01:00+0100",
"visible_since": "2026-01-16T12:00:00+0100",
}
```
### mobile_links
Contains link, potentially to the mobile app views.
The `member://` scheme must be used to generate the universal URL for the app.
##### Example
```
{
"type": "mobile_links",
"title": { "en": "Links", "pl": "Linki" },
"links": [
{ "url": "member://article?id=39913", "text": { "en": "Articles", "pl": "Artykuły" } },
{ "url": "member://profile" }
]
}
```
## Universal components
### mixed_content_list
TODO
##### Example
```json
// todo
```