In-App Templates - Content Schema¶
The following document describes the JSON defining the allowable shape of the In-App template content, along with their nesting and hierarchy. When using the API to create a template this is put into the content field. It is broken into a sections describing the general concepts, a simple worked example and the complete JSON schema describing all the available types and their properties and allowable values.
Concepts¶
In-App templates consist of a frame defining a drawable area with padding, background colors, background images etc. This serves as a container for content nodes and can control an automatic "close" button to ensure that the eventual recipients will have a means to close the message.
Content nodes include text, images, videos and buttons. Many of the properties are common, for example most of the fields displaying text will have alignment, font, sizing and color options.
Worked Example¶
In the example below a very simple template is defined using examples of the available text fields, a button, and a basic gradient background.
The contents of the template also make use of dynamic content tags, which are replaceable content at the point of sending a message via the API, our sample template looks like:
The JSON to create the template is shown below, and should demonstrate the frame container with some options applied, along with the array of nodes defining the content.
{
"ver": 1,
"frame": {
"type": "fullscreen",
"closeButton": "top-right",
"backgroundLayers": [
{
"type": "color",
"attrs": {
"value": {
"r": 255,
"g": 255,
"b": 255,
"a": 1
}
}
},
{
"type": "gradient",
"attrs": {
"angleDeg": 180,
"type": "linear",
"stops": [
{
"color": {
"r": 43,
"g": 133,
"b": 190,
"a": 0.5
},
"stopPct": 0.3
},
{
"color": {
"r": 43,
"g": 133,
"b": 190,
"a": 1
},
"stopPct": 0.6
}
]
}
}
],
"stackingGravity": "top-down",
"nodes": [
{
"id": "tQFQIB",
"text": [
"Hey {{name}}!\n"
],
"type": "heading",
"attrs": {
"font": {
"stack": [
"Abril Fatface",
"cursive"
],
"baseSizeMultiplier": 3.4
},
"color": {
"a": 1,
"b": 80,
"g": 80,
"r": 80
},
"alignment": "center"
},
"layout": {
"padding": {
"top": 0,
"left": 0,
"right": 0,
"bottom": 0
}
}
},
{
"id": "8lHOKZ",
"text": [
"Welcome to templates\n"
],
"type": "subheading",
"attrs": {
"font": {
"stack": [
"Roboto Condensed",
"sans-serif"
],
"baseSizeMultiplier": 2.2
},
"color": {
"a": 1,
"b": 80,
"g": 80,
"r": 80
},
"alignment": "center"
},
"layout": {
"padding": {
"top": 0,
"left": 0,
"right": 0,
"bottom": 0
}
}
},
{
"id": "fPDneo",
"text": [
"This is a text area where the message body is displayed.\n"
],
"type": "text",
"attrs": {
"font": {
"stack": [
"Roboto",
"sans-serif"
],
"baseSizeMultiplier": 1.4
},
"color": {
"r": 241,
"g": 236,
"b": 236,
"a": 1
},
"alignment": "center"
},
"layout": {
"padding": {
"top": 0,
"left": 0,
"right": 0,
"bottom": 0
}
}
},
{
"id": "8aD2J8",
"type": "button",
"layout": {
"padding": {
"top": 4.5,
"right": 0,
"bottom": 0,
"left": 0
}
},
"attrs": {
"actions": [
{
"type": "closeMessage"
},
{
"type": "deepLink",
"data": {
"deepLink": {
"path": "{{deepLinkPath}}",
"foo": "bar"
}
}
}
],
"style": {
"shape": "square",
"elevation": "flat",
"alignment": "center",
"widthType": "auto",
"border": {
"color": {
"type": "color",
"attrs": {
"value": {
"r": 255,
"g": 255,
"b": 255,
"a": 1
}
}
},
"weight": 0.21
},
"backgroundLayer": {
"type": "color",
"attrs": {
"value": {
"r": 218,
"g": 166,
"b": 18,
"a": 1
}
}
}
}
},
"child": {
"id": "UQfepP",
"type": "text",
"layout": {
"padding": {
"top": 0.3,
"right": 0.5,
"bottom": 0.3,
"left": 0.5
}
},
"attrs": {
"alignment": "center",
"color": {
"r": 80,
"g": 80,
"b": 80,
"a": 1
},
"font": {
"stack": [
"Roboto",
"sans-serif"
],
"baseSizeMultiplier": 1.4
}
},
"text": [
"OK!\n"
]
}
}
]
},
"defaults": {
"fontColor": {
"r": 80,
"g": 80,
"b": 80,
"a": 1
},
"fonts": {
"heading": {
"stack": [
"Abril Fatface",
"cursive"
],
"baseSizeMultiplier": 3.4
},
"subheading": {
"stack": [
"Roboto Condensed",
"sans-serif"
],
"baseSizeMultiplier": 2.2
},
"text": {
"stack": [
"Roboto",
"sans-serif"
],
"baseSizeMultiplier": 1.4
}
}
}
}
Full Schema¶
The complete schema for the allowable types is presented alphabetically below.
{
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false,
"definitions": {
"BaseFontSizeMultiplier": {
"type": "number"
},
"ButtonActionType": {
"anyOf": [
{
"additionalProperties": false,
"properties": {
"data": {
"additionalProperties": false,
"properties": {
"deepLink": {
"type": "object"
}
},
"required": [
"deepLink"
],
"type": "object"
},
"type": {
"const": "deepLink",
"type": "string"
}
},
"required": [
"type",
"data"
],
"type": "object"
},
{
"additionalProperties": false,
"properties": {
"data": {
"additionalProperties": false,
"properties": {
"url": {
"type": "string"
}
},
"required": [
"url"
],
"type": "object"
},
"type": {
"const": "openUrl",
"type": "string"
}
},
"required": [
"type",
"data"
],
"type": "object"
},
{
"additionalProperties": false,
"properties": {
"data": {
"additionalProperties": false,
"properties": {
"data": {
"type": "object"
},
"eventType": {
"type": "string"
}
},
"required": [
"eventType"
],
"type": "object"
},
"type": {
"const": "trackConversionEvent",
"type": "string"
}
},
"required": [
"type",
"data"
],
"type": "object"
},
{
"additionalProperties": false,
"properties": {
"data": {
"additionalProperties": false,
"properties": {
"channelUuid": {
"type": "string"
}
},
"required": [
"channelUuid"
],
"type": "object"
},
"type": {
"const": "subscribeToChannel",
"type": "string"
}
},
"required": [
"type",
"data"
],
"type": "object"
},
{
"additionalProperties": false,
"properties": {
"type": {
"enum": [
"closeMessage",
"requestAppStoreRating",
"promptPushPermission"
],
"type": "string"
}
},
"required": [
"type"
],
"type": "object"
}
]
},
"ButtonAttrs": {
"additionalProperties": false,
"properties": {
"actions": {
"items": {
"$ref": "#/definitions/ButtonActionType"
},
"type": "array"
},
"style": {
"additionalProperties": false,
"properties": {
"alignment": {
"$ref": "#/definitions/TextAlignment"
},
"backgroundLayer": {
"anyOf": [
{
"$ref": "#/definitions/ColorLayer"
},
{
"$ref": "#/definitions/GradientLayer"
}
]
},
"border": {
"additionalProperties": false,
"properties": {
"color": {
"$ref": "#/definitions/ColorLayer"
},
"weight": {
"$ref": "#/definitions/BaseFontSizeMultiplier"
}
},
"required": [
"color",
"weight"
],
"type": "object"
},
"elevation": {
"$ref": "#/definitions/ButtonElevationType"
},
"shape": {
"$ref": "#/definitions/ButtonShapeType"
},
"widthType": {
"$ref": "#/definitions/ButtonWidthType"
}
},
"required": [
"shape",
"alignment",
"widthType",
"elevation"
],
"type": "object"
}
},
"required": [
"style",
"actions"
],
"type": "object"
},
"ButtonElevationType": {
"enum": [
"flat",
"raised"
],
"type": "string"
},
"ButtonNode": {
"additionalProperties": false,
"properties": {
"attrs": {
"$ref": "#/definitions/ButtonAttrs"
},
"child": {
"$ref": "#/definitions/TextNode"
},
"id": {
"type": "string"
},
"layout": {
"$ref": "#/definitions/LayoutAttrs"
},
"type": {
"const": "button",
"type": "string"
}
},
"required": [
"id",
"type",
"layout",
"attrs",
"child"
],
"type": "object"
},
"ButtonShapeType": {
"enum": [
"pill",
"square",
"rounded"
],
"type": "string"
},
"ButtonWidthType": {
"enum": [
"auto",
"fullwidth"
],
"type": "string"
},
"ColorLayer": {
"additionalProperties": false,
"properties": {
"attrs": {
"additionalProperties": false,
"properties": {
"value": {
"$ref": "#/definitions/Rgba"
}
},
"required": [
"value"
],
"type": "object"
},
"type": {
"const": "color",
"type": "string"
}
},
"required": [
"type",
"attrs"
],
"type": "object"
},
"ContentNode": {
"anyOf": [
{
"$ref": "#/definitions/HeadingNode"
},
{
"$ref": "#/definitions/SubheadingNode"
},
{
"$ref": "#/definitions/TextNode"
},
{
"$ref": "#/definitions/ImageNode"
},
{
"$ref": "#/definitions/VideoNode"
},
{
"$ref": "#/definitions/ButtonNode"
}
]
},
"Font": {
"additionalProperties": false,
"properties": {
"baseSizeMultiplier": {
"$ref": "#/definitions/BaseFontSizeMultiplier"
},
"stack": {
"$ref": "#/definitions/FontStack"
}
},
"required": [
"stack",
"baseSizeMultiplier"
],
"type": "object"
},
"FontFace": {
"type": "string"
},
"FontStack": {
"items": {
"$ref": "#/definitions/FontFace"
},
"type": "array"
},
"FrameCloseButtonType": {
"enum": [
"top-left",
"top-right",
"none"
],
"type": "string"
},
"FrameStackingGravity": {
"enum": [
"centered",
"top-down",
"bottom-up"
],
"type": "string"
},
"FrameType": {
"enum": [
"fullscreen",
"inset",
"alert"
],
"type": "string"
},
"GradientLayer": {
"additionalProperties": false,
"properties": {
"attrs": {
"additionalProperties": false,
"properties": {
"angleDeg": {
"type": "number"
},
"stops": {
"items": {
"$ref": "#/definitions/GradientStop"
},
"type": "array"
},
"type": {
"const": "linear",
"type": "string"
}
},
"required": [
"type",
"angleDeg",
"stops"
],
"type": "object"
},
"type": {
"const": "gradient",
"type": "string"
}
},
"required": [
"type",
"attrs"
],
"type": "object"
},
"GradientStop": {
"additionalProperties": false,
"properties": {
"color": {
"$ref": "#/definitions/Rgba"
},
"stopPct": {
"type": "number"
}
},
"required": [
"color",
"stopPct"
],
"type": "object"
},
"HeadingNode": {
"additionalProperties": false,
"properties": {
"attrs": {
"additionalProperties": false,
"properties": {
"alignment": {
"$ref": "#/definitions/TextAlignment"
},
"color": {
"$ref": "#/definitions/Rgba"
},
"font": {
"$ref": "#/definitions/Font"
}
},
"required": [
"alignment",
"color",
"font"
],
"type": "object"
},
"id": {
"type": "string"
},
"layout": {
"$ref": "#/definitions/LayoutAttrs"
},
"text": {
"$ref": "#/definitions/TextValue"
},
"type": {
"const": "heading",
"type": "string"
}
},
"required": [
"id",
"type",
"layout",
"attrs",
"text"
],
"type": "object"
},
"ImageAttrs": {
"additionalProperties": false,
"properties": {
"aspect": {
"type": "number"
},
"height": {
"type": "number"
},
"source": {
"additionalProperties": false,
"properties": {
"url": {
"type": "string"
}
},
"required": [
"url"
],
"type": "object"
},
"width": {
"type": "number"
}
},
"required": [
"aspect",
"height",
"source",
"width"
],
"type": "object"
},
"ImageNode": {
"additionalProperties": false,
"properties": {
"attrs": {
"$ref": "#/definitions/ImageAttrs"
},
"id": {
"type": "string"
},
"layout": {
"$ref": "#/definitions/LayoutAttrs"
},
"type": {
"const": "image",
"type": "string"
}
},
"required": [
"id",
"type",
"layout",
"attrs"
],
"type": "object"
},
"Layer": {
"anyOf": [
{
"$ref": "#/definitions/ColorLayer"
},
{
"additionalProperties": false,
"properties": {
"attrs": {
"$ref": "#/definitions/ImageAttrs"
},
"type": {
"const": "image",
"type": "string"
}
},
"required": [
"type",
"attrs"
],
"type": "object"
},
{
"$ref": "#/definitions/GradientLayer"
},
{
"additionalProperties": false,
"properties": {
"attrs": {
"$ref": "#/definitions/VideoAttrs"
},
"type": {
"const": "video",
"type": "string"
}
},
"required": [
"type",
"attrs"
],
"type": "object"
}
]
},
"LayoutAttrs": {
"additionalProperties": false,
"properties": {
"padding": {
"$ref": "#/definitions/PaddingAttrs"
}
},
"required": [
"padding"
],
"type": "object"
},
"PaddingAttrs": {
"additionalProperties": false,
"properties": {
"bottom": {
"$ref": "#/definitions/BaseFontSizeMultiplier"
},
"left": {
"$ref": "#/definitions/BaseFontSizeMultiplier"
},
"right": {
"$ref": "#/definitions/BaseFontSizeMultiplier"
},
"top": {
"$ref": "#/definitions/BaseFontSizeMultiplier"
}
},
"required": [
"top",
"right",
"bottom",
"left"
],
"type": "object"
},
"Rgba": {
"additionalProperties": false,
"properties": {
"a": {
"type": "number"
},
"b": {
"type": "number"
},
"g": {
"type": "number"
},
"r": {
"type": "number"
}
},
"required": [
"r",
"g",
"b",
"a"
],
"type": "object"
},
"SubheadingNode": {
"additionalProperties": false,
"properties": {
"attrs": {
"additionalProperties": false,
"properties": {
"alignment": {
"$ref": "#/definitions/TextAlignment"
},
"color": {
"$ref": "#/definitions/Rgba"
},
"font": {
"$ref": "#/definitions/Font"
}
},
"required": [
"alignment",
"color",
"font"
],
"type": "object"
},
"id": {
"type": "string"
},
"layout": {
"$ref": "#/definitions/LayoutAttrs"
},
"text": {
"$ref": "#/definitions/TextValue"
},
"type": {
"const": "subheading",
"type": "string"
}
},
"required": [
"id",
"type",
"layout",
"attrs",
"text"
],
"type": "object"
},
"TextAlignment": {
"enum": [
"left",
"center",
"right"
],
"type": "string"
},
"TextMark": {
"enum": [
"bold",
"italic",
"underline"
],
"type": "string"
},
"TextNode": {
"additionalProperties": false,
"properties": {
"attrs": {
"additionalProperties": false,
"properties": {
"alignment": {
"$ref": "#/definitions/TextAlignment"
},
"color": {
"$ref": "#/definitions/Rgba"
},
"font": {
"$ref": "#/definitions/Font"
}
},
"required": [
"alignment",
"color",
"font"
],
"type": "object"
},
"id": {
"type": "string"
},
"layout": {
"$ref": "#/definitions/LayoutAttrs"
},
"text": {
"$ref": "#/definitions/TextValue"
},
"type": {
"const": "text",
"type": "string"
}
},
"required": [
"id",
"type",
"layout",
"attrs",
"text"
],
"type": "object"
},
"TextSpan": {
"anyOf": [
{
"type": "string"
},
{
"items": [
{
"type": "string"
},
{
"items": {
"$ref": "#/definitions/TextMark"
},
"type": "array"
}
],
"maxItems": 2,
"minItems": 2,
"type": "array"
}
]
},
"TextValue": {
"items": {
"$ref": "#/definitions/TextSpan"
},
"type": "array"
},
"VideoAttrs": {
"additionalProperties": false,
"properties": {
"aspect": {
"type": "number"
},
"autoplay": {
"type": "boolean"
},
"height": {
"type": "number"
},
"loop": {
"type": "boolean"
},
"source": {
"additionalProperties": false,
"properties": {
"thumbnailUrl": {
"type": "string"
},
"url": {
"type": "string"
}
},
"required": [
"thumbnailUrl",
"url"
],
"type": "object"
},
"width": {
"type": "number"
}
},
"required": [
"aspect",
"autoplay",
"height",
"loop",
"source",
"width"
],
"type": "object"
},
"VideoNode": {
"additionalProperties": false,
"properties": {
"attrs": {
"$ref": "#/definitions/VideoAttrs"
},
"id": {
"type": "string"
},
"layout": {
"$ref": "#/definitions/LayoutAttrs"
},
"type": {
"const": "video",
"type": "string"
}
},
"required": [
"id",
"type",
"layout",
"attrs"
],
"type": "object"
}
},
"properties": {
"defaults": {
"additionalProperties": false,
"properties": {
"fontColor": {
"$ref": "#/definitions/Rgba"
},
"fonts": {
"additionalProperties": false,
"properties": {
"heading": {
"$ref": "#/definitions/Font"
},
"subheading": {
"$ref": "#/definitions/Font"
},
"text": {
"$ref": "#/definitions/Font"
}
},
"required": [
"heading",
"subheading",
"text"
],
"type": "object"
}
},
"required": [
"fontColor",
"fonts"
],
"type": "object"
},
"frame": {
"additionalProperties": false,
"properties": {
"backgroundLayers": {
"items": {
"$ref": "#/definitions/Layer"
},
"type": "array"
},
"closeButton": {
"$ref": "#/definitions/FrameCloseButtonType"
},
"nodes": {
"items": {
"$ref": "#/definitions/ContentNode"
},
"type": "array"
},
"stackingGravity": {
"$ref": "#/definitions/FrameStackingGravity"
},
"type": {
"$ref": "#/definitions/FrameType"
}
},
"required": [
"type",
"nodes",
"backgroundLayers",
"stackingGravity",
"closeButton"
],
"type": "object"
},
"ver": {
"const": 1,
"type": "number"
}
},
"required": [
"ver",
"frame",
"defaults"
],
"type": "object"
}