Category
Snippet Components
Snippet Components
Image
Image components will show image in snippet. Image's width will be 100% of snippet. { "id": "logo-image", "type": "image", "url": "https://cdn.channel.io/assets/snippet/snippet-img-1.png" } Property Type Example Description Required id string logo-image ID of component. ID should be unique in snippet. true type string image Type of component. use **image** true url string https://channel.io/images/ch-logo-ko.png URL of image true
Text
Text component shows text in snippet. { "id": "service-intro-text", "type": "text", "text": "Hi! It's Channel Talk :)", "style": "paragraph", "align": "center", "color": "default" } Property Type Example Description Required id string service-intro-text ID of component. ID should be unique in snippet. true type string text Type of component. use **text** true text string Hi! It's Channel Talk :) The text which will rendered in snippet. true style string paragraph Style of text. "h1", "h2", "para
Spacer
Spacer is a component for adding empty block. { "id": "xs-spacer", "type": "spacer", "size": "xs" } Property Type Example Description Required id string xs-spacer ID of component. ID should be unique in snippet. true type string spacer Type of component. use **spacer** true size string xs Size of empty space. "xs", "s", "m", "l" allowed. Default is "xs" false
Button
Button is an clickable component in snippet. { "id": "submit-button", "type": "button", "label": "Jump to example.com", "action": { "type": "url", "url": "http://example.com" }, "style": "primary" } Property Type Example Description Required id string submit-button ID of component. ID should be unique in snippet. true type string button Type of component. use **button** true action Object { "type": "submit", "url": "https://example.com" } true action.type string "submit" Type of action. "submit"
KeyValue
KeyValue can shows key-value shaped data. { "id": "order-property", "type": "key-value", "items": [ { "key": "name", "value": "Jihoon Park" }, { "key": "mobileNumber", "value": "+82-10-1234-5678" }, { "key": "address", "value": "[12345] Gangnam-gu, Seoul" } ] } Property Type Example Description Required id string order-property ID of component. ID should be unique in snippet. true type string key-value Type of component. use **key-value** true items List of Object [ { "key": "name", "value": "Ji
List
This component shows list-shaped data. It can be clicked { "id": "shopping-list", "type": "list", "items": [ { "id": "shopping-list-leggings", "title": "Leggings", "description": "Stripe leggings", "image": "https://cdn.channel.io/assets/snippet/snippet-list-1.png", "action": { "type": "url", "url": "https://channel.io" } }, { "id": "shopping-list-clutch", "title": "Clutch Bag", "description": "Handy clutch Bag", "image": "https://cdn.channel.io/assets/snippet/snippet-list-2.png", "action": { "t
Input
Input can get one-line string from user { "id": "input-name", "type": "input", "label": "name", "placeholder": "Write his/her name in here", "value": "Billo", "disabled": false } Property Type Example Description Required id string input-name ID of component. ID should be unique in snippet. true type string input Type of component. use **input**. true label string name Text shown above input box. false placeholder string Write his/her name in here Placeholder text in input box. false value strin
Dropdown
Dropdown can display dropdown menu for selection { "type": "dropdown", "id": "chat-mood-dropdown", "label": "text above the option", "value": "default option id", "disabled": false, "items": [ { "id": "chat-mood-dropdown-satisfied", "label": "Satisfied" }, { "id": "chat-mood-dropdown-angry", "label": "Angry" } ] } Property Type Example Description Required id string chat-mood-dropdown ID of component. ID should be unique in snippet. true type string dropdown Type of component. use **dropdown** t
Divider
Divider make a divider line in snippet. { "id": "context-divider", "type": "divider" } Property Type Example Description Required id string context-divider ID of component. ID should be unique in snippet. true type string divider Type of component. use **divider** true
Timeline
This component shows timeline-shaped data such like social networking services. It only presents data - no interactive. { "type":"timeline", "hour24":true, "events":[ { "ts":1601537400000, "value":"Read newspaper", "color":"white" }, { "ts":1601544600000, "value":"Conference call", "color":"green" }, { "ts":1601551800000, "value":"Meating", "color":"blue" } ] } Property Type Example Description Required type string timeline Type of component. Use **timeline** true hour24 boolean true Option for