Skip to main content

Reference: Custom screens components

Support avatar
Written by Support
Updated over 10 months ago

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

Related Articles
Custom content
How Custom screens work
Custom screens: Server side rendering
Configure a new custom screen via the dashboard
Implement a simple endpoint to return a static custom screen
Did this answer your question?