You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Create or update a message type. A message type is a schema that defines fields available to an editor within Knock. Message types always have at least one variant, that MUST be named "default".
55
-
56
-
Use this tool when you need to create a new message type, or update an existing message type. You must pass the FULL message type to this tool if you're going to update an existing message type.
54
+
Create or update a message type. A message type is a schema that defines fields available to an editor within Knock. Message types always have at least one variant, that MUST be named "default". Use this tool when you need to create a new message type, or update an existing message type.
57
55
58
-
The preview is a string of HTML that will be rendered in the Knock UI as a representation of the message type. It is shared across all variants. It supports liquid, where the field name is available as a variable, so a field named "text" will be rendered as {{ text }}.
56
+
## Schema and fields
57
+
58
+
The schema defines the fields available to an editor within Knock. A variant should have at least one field. Fields can be of different types, including: text, markdown, select, multi-select, image, and button.
59
+
60
+
Each field must have a key, label, and type. Some fields like \`select\` and \`multi_select\` have additional settings that can be used to configure the field.
59
61
60
62
<example>
61
-
<description>
62
-
Create a new message type for a banner component that has a text and an action URL.
63
-
</description>
64
-
<input>
65
-
{
66
-
"messageTypeKey": "banner",
67
-
"name": "Banner",
68
-
"description": "A banner component that has a text and an action URL.",
69
-
"preview": "<div>{{ text }}</div>",
70
-
"variants": [
71
-
{
72
-
"key": "default",
73
-
"name": "Default",
74
-
"fields": [
75
-
{
76
-
"key": "text",
77
-
"type": "text",
78
-
"label": "Text",
79
-
"settings": {
80
-
"max_length": 100,
81
-
},
82
-
},
83
-
{
84
-
"key": "action_url",
85
-
"type": "text",
86
-
"label": "Action URL",
87
-
"settings": {
88
-
"placeholder": "https://example.com",
89
-
},
90
-
}
91
-
]
92
-
}
93
-
]
94
-
}
95
-
</input>
63
+
{
64
+
"key": "text",
65
+
"label": "Text",
66
+
"type": "text",
96
67
</example>
68
+
97
69
<example>
98
-
<description>
99
-
Create a message type for a card component that has an icon type, title, body, and a single action button.
100
-
</description>
101
-
<input>
102
-
{
103
-
"messageTypeKey": "card",
104
-
"name": "Card",
105
-
"description": "A single-action card component.",
106
-
"preview": "
107
-
<div>
108
-
<h2>{{ title }}</h2>
109
-
<p>{{ body }}</p>
110
-
<button>Action</button>
111
-
</div>
112
-
",
113
-
"variants": [
70
+
{
71
+
"key": "select",
72
+
"label": "Select",
73
+
"type": "select",
74
+
"settings": {
75
+
"options": [
114
76
{
115
-
"key": "default",
116
-
"name": "Default",
117
-
"fields": [
118
-
{
119
-
"key": "icon_type",
120
-
"type": "select",
121
-
"label": "Icon type",
122
-
"settings": {
123
-
"options": [
124
-
{
125
-
"value": "warning",
126
-
"label": "Warning",
127
-
},
128
-
]
129
-
},
130
-
},
131
-
{
132
-
"key": "description",
133
-
"type": "markdown",
134
-
"label": "Description",
135
-
},
136
-
{
137
-
"key": "action_button",
138
-
"type": "button",
139
-
"label": "Action button",
140
-
},
141
-
]
142
-
}
143
-
]
144
-
}
145
-
</input>
77
+
"value": "option1",
78
+
"label": "Option 1",
79
+
},
80
+
],
81
+
},
82
+
}
83
+
</example>
84
+
85
+
## Preview templates
86
+
87
+
The preview is a string of HTML that will be rendered in the Knock UI as a representation of the message type. It is shared across all variants. It supports liquid, where the field name is available as a variable, so a field named "text" will be rendered as {{ text }}. All fields should be included in the preview.
88
+
89
+
You can make an educated guess as to what the preview template should look like based on the name of the message type and the fields. You can use plain CSS to style the preview by supplying a style tag in the preview. Use simple selectors like .class-name to style elements.
90
+
91
+
<example>
92
+
{
93
+
"preview": "<style>div { color: red; }</style>\n<div>Hello there, {{ text }}</div>"
0 commit comments