Reference: Custom screens components

This article is part of Custom screens: Server side rendering.

Overview

There are several types of supported components, each with its own specific UI & interaction model. Common to all component definitions is the field component_type which, as its name suggests, identifies the type of the component.

Let’s explore available component types below.

• Labeled box
• List item
• Web URL

Labeled box

A simple row item with two values: title and content:

Data model example

{
  "component_type": "labeled_box",
  "title": "Tips this month",
  "content": "$17.23",
}

Details

• component_type = labeled_box
• title is optional
• content has to be present & non-empty
• if content is not set, the component will not render
• title, content are limited to 500 characters each
• title, content can render on multiple lines, no line limit
• no supported interactions, not clickable

List item

A simple row item that has its contents justified horizontally and is, optionally, clickable. Clicking a list item always opens a new custom screen.

Other variations

Data model structure & example

{
  "component_type": "list_item",
  "title": "Tips this month",
  "content": "$134.09",
  "parameters": {
      "page_id": "MONTH_TIPS_PAGE",
      "month": "march"      
      "year": "2022"
  }
}

Details

• component_type = list_item
• title has to be present & non-empty. If not set, the component will not render
• title is limited to 500 characters
• content is optional
• content is limited to 10 characters
• title, content can render on multiple lines, no line limit
• parameters → request parameters to be passed when this item is clicked. If present, the item is considered tappable
• If tappable, opens a new custom screen when tapped
• When tapped, contents of parameters will be sent to your custom screens endpoint. your endpoint can then decide how to build the custom screen to-be-opened, based on the contents of parameters
• If tappable, the arrow icon is shown on the right side

Web URL

An item that opens a given URL in a web view. Visually, it's the same as the List item.

Data model structure & example

{
  "component_type": "web_url",
  "title": "Talk to an agent",
  "content": "Open",
  "url": "https://www.motiontools.com/chat_support"
}

Details

• component_type = web_url
• title & contents carry the same requirements & restrictions as for the
• url is required and must be a valid URL
• When clicked, the URL is opened in an in-app WebView. The WebView also allows the option to open the link in Chrome/ Safari, depending on whether the app runs on iOS or Android.
• If a Custom screen contains a single WebUrl Component: When the custom screen opens, the apps will not render the single WebUrl Component but instead directly open the WebView & load the associated url