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

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

labeled_box_rmyn5h.png

labeled_box_content_only_vqtajg.png

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.

list_item_tappable_tv7lpg.png

Other variations

list_item_not_tappable_yyix0g.png

list_item_title_only_not_tappable_h1bydt.png

list_item_title_only_tappable_buntcm.png

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
Was this article helpful?
0 out of 0 found this helpful

Articles in this section