カテゴリー
Snippet Components
Image
画像コンポーネントは、スニペット内に画像を表示します。画像の幅は、スニペットの100%になります。 { "id": "logo-image", "type": "image", "url": "https://cdn.channel.io/assets/snippet/snippet-img-1.png" } プロパティ タイプ 例 説明 要件 id string logo-image スニペットのコンポーネントのID。IDはスニペット内で一意である必要があります。 true type string image コンポーネントのタイプ。imageを使用してください。 true url string https://channel.io/images/ch-logo-ja.png 画像のURL true
Text
テキストコンポーネントはスニペット内にテキストを表示します。 { "id": "service-intro-text", "type": "text", "text": "Hi! It's Channel Talk :)", "style": "paragraph", "align": "center", "color": "default" } プロパティ タイプ 例 説明 要件 id string service-intro-text スニペットのコンポーネントのID。IDはスニペット内で一意である必要があります。 true type string text コンポーネントのタイプ。textを使用してください。 true text string Hi! It's Channel Talk :) スニペット内に表示されるテキスト true style string paragraph テキストのスタイル。"h1"、"h2"、"paragraph"が使用可能で、デフォルトは"paragraph"です。 false align string left テキストの配置。"center"、"
Spacer
Spacerは、空のブロックを追加するためのコンポーネントです。 { "id": "xs-spacer", "type": "spacer", "size": "xs" } プロパティ タイプ 例 説明 要件 id string xs-spacer コンポーネントのID。IDはスニペット内で一意である必要があります。 true type string spacer コンポーネントのタイプ。spacerを使用してください。 true size string xs 空きスペースのサイズ。"xs"、"s"、"m"、"l"が使用可能で、デフォルトは"xs"です。 false
Button
ボタンはスニペット内のクリック可能なコンポーネントです。 { "id": "submit-button", "type": "button", "label": "Jump to example.com", "action": { "type": "url", "url": "http://example.com" }, "style": "primary" } プロパティ タイプ 例 説明 要件 id string submit-button コンポーネントのID。IDはスニペット内で一意である必要があります。 true type string button コンポーネントのタイプ。buttonを使用してください。 true action Object { "type": "submit", "url": "https://example.com" } true action.type string "submit" アクションのタイプ。"submit"、"url"が使用可能で、"submit"タイプの場合、すべての入力データを収集し、ご自身のスニペットサーバーに情報を送信します。"
KeyValue
KeyValueは、キーと値の形式のデータを表示できるコンポーネントです。 { "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" } ] } プロパティ タイプ 例 説明 要件 id string order-property コンポーネントのID。IDはスニペット内で一意である必要があります。 true type string key-value コンポーネントのタイプ。key-valueを使用してください。 true items List of Object [ { "key": "name", "value": "Jihoon Park" }, { "key": "mobileNumber", "value":
List
このコンポーネントはリスト形式のデータを表示します。クリック可能です。 { "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": { "type": "url", "url": "
Input
Inputは、ユーザーから1行の文字列を取得できるコンポーネントです。 { "id": "input-name", "type": "input", "label": "name", "placeholder": "Write his/her name in here", "value": "Billo", "disabled": false } プロパティ タイプ 例 説明 要件 id string input-name コンポーネントのID。IDはスニペット内で一意である必要があります。 true type string input コンポーネントのタイプ。inputを使用してください。 true label string name 入力ボックスの上に表示されるテキスト false placeholder string Write his/her name in here 入力ボックス内のプレースホルダーテキスト false value string Billo 入力ボックスのデフォルト値 false error string Length of name should be lo
Dropdown
ドロップダウンは、選択のためのドロップダウンメニューを表示できます。 { "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" } ] } プロパティ タイプ 例 説明 要件 id string chat-mood-dropdown コンポーネントのID。IDはスニペット内で一意である必要があります。 true type string dropdown コンポーネントのタイプ。dropdownを使用してください。 true label string text above the option オプションの上に表示されるテキスト f
Divider
Dividerはスニペット内に区切り線を作成します。 { "id": "context-divider", "type": "divider" } プロパティ タイプ 例 説明 要件 id string context-divider コンポーネントのID。IDはスニペット内で一意である必要があります。 true type string divider コンポーネントのタイプ。dividerを使用してください。 true
Timeline
このコンポーネントは、SNS（ソーシャル・ネットワーキング・サービス）のようなタイムライン形式のデータを表示します。データの表示のみを行い、インタラクティブな機能はありません。 { "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" } ] } プロパティ タイプ 例 説明 要件 type string timeline コンポーネントのタイプ。timelineを使用してください。 true hour24 boolean true 各イベントの時間をどのように表示するかを設定するオプション。trueの場合、「18:40」のような24時間形式で表示されます。それ以外の場合は、