情報カード

情報カード

情報カードとは 

情報カードでは、画像、タイトル、サブタイトル、説明、ボタンなどの項目を組み合わせて、利用者にさまざまな情報を表示することが可能です。カードに情報を見やすく配置することで、利用者による情報の理解を促進し、ボットにおける手続きを円滑にすることができます。

たとえば、商品を紹介するカードには、商品の画像、名前(タイトル)、説明の見出し(サブタイトル)、説明、購入ページや詳細ページに移動するためのボタンを配置できます。

情報カードの種類 

情報カードには、動的と固定の2種類があります。

動的情報カード

各種変数によって出力される値を表示できます。変数を使用すると、実行時における最新の情報を取得して表示することが可能です。手動で情報を更新する手間を省くことができます。同じ選択肢を常に表示したい場合は、固定カードを選択することをお勧めします。一方、ボット利用者に応じて表示する内容を変えたい場合や、APIの処理に基づいた情報を表示したい場合、動的カードを選択することをお勧めします。


固定情報カード

選択肢として固定の内容を表示できます。チャットの利用者に対して常に同じ選択肢を表示したい場合に役立ちます。固定情報カードは、組織の連絡先、商品やサービスの詳細、商品の使用方法、商品の画像などを表示するために使用できます。固定情報カードを使用すると、すべてのボット利用者に対して同じ内容を表示し、一貫性のある情報提供が可能です。

固定情報カードの作成 

1.フローの編集画面で[+](ブロックの追加)アイコンをクリックします。 
2.ブロックの追加画面の[メッセージの表示]の欄で、[情報カード]を選択します。




3.[ブロック名]の項目で、ブロックの名前を重複しないように入力します。なお、日本語は使用できませんのでご注意ください。



4.[カードの種類]の項目で、[固定カード]を選択します。
5.[メッセージ]の項目にメッセージを入力します。


6.[カードに表示する情報]の欄に移動して、[カード名]の項目に名前を入力します。
7.[タイトル]の項目で、カードの件名を入力します。



8.カードをさらに追加する場合は、[カードを追加する]をクリックします。 
  1. 必要に応じて、[カードの一覧]の欄で項目をカスタマイズできます。固定カードでは、各カードに表示する項目を変更することが可能です。
9.プレビュー画面で、ブロックがどのように動作するかを確認します(プレビュー画面が表示されていない場合は、[プレビュー]ボタンをクリックするとプレビューを確認できます)。
10.[保存する]をクリックして、フローを公開します。



固定情報カードを使用するメリット 

固定情報カードを使用する主なメリットは、以下のとおりです。
  1. 画像情報の提供:カードに画像を表示することで、ボット利用者に対して情報を分かりやすく伝えることが可能です。
  2. CTA(行動喚起)ボタンの追加:[今すぐ購入する]、[詳細はこちら]、[カートに追加する]などのボタンを追加することで、ボット利用者の行動を喚起できます。
  3. 詳細な説明:テキストによる詳細な説明を提供することにより、ボット利用者の意思決定を手助けすることが可能です。
  4. スペースの有効活用:チャット画面のスペースを有効に活用し、情報を簡潔に分かりやすく表示できます。

固定情報カードの要素

  1. カード名:チャットの利用者に対して表示するカードの名前です。
  2. 画像:カードに表示される画像です。
  3. タイトル:カードの内容を表す件名です。
  4. サブタイトル:カードの内容を表す追加の件名です。
  5. 説明:チャットの利用者に対して表示する説明文です。
  6. 追加のカード項目:カードにボタンやテキストの項目を追加できます。テキストを追加して他の情報を表示したり、ボタンを追加して別のWebページへの移動を促したりすることが可能です。


固定カードの制限事項

項目

必須項目

文字数の上限と保存件数の上限

詳細

ブロック名

100文字

次の特殊文字は使用できません:< > “ ’ ,

質問

×

10,000文字

経路に応じて、スタイルの設定、画像/動画/音声/ファイルの使用が可能です。疑わしいスクリプトの確認、無害化が行われます。

画像

×

14MB

画像のラベル

×

100文字

次の特殊文字は使用できません:< > “ ’ ,

タイトル

200文字

HTMLタグは使用できません。

タイトルのラベル

×

100文字

次の特殊文字は使用できません:< > “ ’ ,

タイトルの値

200文字

カード名と同じにする必要があります。HTMLタグは使用できません。

サブタイトル

×

制限なし

サブタイトルのラベル

×

200文字

次の特殊文字は使用できません:< > “ ’ ,

サブタイトルの値

200文字

HTMLタグは使用できません。

説明

×

制限なし

説明のラベル

×

200文字

次の特殊文字は使用できません:< > “ ’ ,

説明の値

200文字

HTMLタグは使用できません。

ボタン

×

5件

ボタンのラベル

×

200文字

次の特殊文字は使用できません:< > “ ’ ,

ボタンの値

200文字

HTMLタグは使用できません。

ボタンのWebサイトのアドレス

有効なURLを入力する必要があります。

テキスト

×

5件

テキストのラベル

×

200文字

次の特殊文字は使用できません:< > “ ’ ,

テキストの値

200文字

HTMLタグは使用できません。


動的情報カードの作成

1.[+](ブロックの追加)アイコンをクリックします。 
2.ブロックの追加画面の[メッセージの表示]の欄で、[情報カード]を選択します。



3.[ブロック名]の項目で、ブロックの名前を重複しないように入力します。なお、日本語は使用できませんのでご注意ください。
4.[カードの種類]の項目で、[動的カード]を選択します。
5.[メッセージ]の項目にメッセージを入力します。



 6.[表示スタイル]の項目で、[1件のカード]または[複数のカード]のいずれかを選択します。画像の例では、[複数のカード]を選択しています。[複数のカード]を選択した場合、カード数の上限はありません。  
7.[カードに表示する情報]の欄で、カードに表示する項目を選択します。


8.[カード名]の項目に名前を入力します。
9.[タイトル]の項目で、カードの件名を入力します。
  1. [タイトル]の項目に初期値を設定できます。  タイトルで使用されている変数の値が空の場合や値を取得できない場合、こちらに入力した初期値がタイトルに使用されます。タイトルの項目は入力必須のため、初期値はタイトルにのみ設定可能です。
  2. タイトルは入力必須です。タイトル以外の項目は、必要に応じて削除できます。また、削除した項目はあらためて追加することが可能です。
  3. タイトルで使用されている変数は、カード名にも表示されます。カード名を手動で追加することはできません。
10.[カードに表示する情報]の欄で、各カード項目に変数を関連付けます。
変数は、以下のカード項目に対して関連付けることが可能です。
  1. 画像
  2. タイトル
  3. サブタイトル
  4. 説明

11.プレビュー画面で、ブロックがどのように動作するかを確認します(プレビュー画面が表示されていない場合は、[プレビュー]ボタンをクリックするとプレビューを確認できます)。
12.[保存する]をクリックして、フローを公開します。



動的情報カードを使用するメリット

チャットのフロー内に表示する情報を効率よく管理できます。変数を通じて最新の情報をカードに反映させることも可能です。情報カードの内容を手動で管理する手間を省くことができます。

動的情報カードの要素

詳細設定:
カードに追加できる項目は、固定情報カードと同じですが、ボット利用者に対して変数に保存されている情報(値または画像)を動的に表示できます。また、カード項目にラベルを追加し、変数についての説明を表示することが可能です。

動的カードの制限事項

項目

必須項目

文字数の上限と保存件数の上限

詳細

ブロック名

100文字

次の特殊文字は使用できません:< > " ’ ,

質問

×

10,000文字

経路に応じて、スタイルの設定、画像/動画/音声/ファイルの使用が可能です。疑わしいスクリプトの確認、無害化が行われます。

画像のラベル

×

100文字

次の特殊文字は使用できません:< > " ’ ,

タイトルのラベル

×

100文字

次の特殊文字は使用できません:< > " ’ ,

サブタイトルのラベル

×

100文字

次の特殊文字は使用できません:< > " ’ ,

説明のラベル

×

100文字

次の特殊文字は使用できません:< > " ’ ,

ボタン

×

5件

特殊文字の制限はありません。

ボタンのラベル

×

100文字

次の特殊文字は使用できません:< > " ’ ,

テキスト

×

5件(テキストの項目)

特殊文字の制限はありません。

テキストのラベル

×

100文字

次の特殊文字は使用できません:< > " ’ ,


情報カードの編集 

ブロックの設定内容は、必要に応じていつでも編集できます。フローが公開中、または下書きであっても編集は可能です。編集するには、以下の手順を実行します。
 1.フローの一覧画面で対象のフローをクリックし、フローの編集画面を開きます(フローにカーソルを合わせると表示される鉛筆アイコンをクリックすることでも編集画面が表示されます)。




2.編集する情報カードのブロックをクリックします。
3.操作メニューで[ブロックを編集する]を選択します。



4.ブロックの編集画面が表示されます。必要に応じてブロックを編集し、[保存する]をクリックします。
5.フローの編集画面で、[保存する]をクリックします。
6.フローを公開します。
  1. 情報カードの編集に関する留意事項
    1. 公開中の自動ガイドボットのフローにおいて、ブロックを編集中にリアルタイムでやりとりが行われている場合、進行中のやりとりが終了または再開されるまでブロックの編集前のバージョンが適用されます。
    2. ブロックの変更後に変更内容を反映させるには、フローを再度公開する必要があります。
    3. 入力変数を変更すると、該当の入力変数が使用されているすべてのフローに変更内容が自動で反映されます。


情報カードのコピー 

既存の情報カードをコピーし、フロー内の別の場所に追加できます。追加する際には、情報カードの内容を編集することも可能です。コピーするには、以下の手順を実行します。
1.フローの編集画面で、コピーする情報カードのブロックをクリックします。
2.操作メニューで[ブロックをコピーする]を選択します。 
3.コピーした情報カードのブロックを追加する場所で、[+](ブロックの追加)アイコンをクリックします。 
4.対象の情報カードのブロックをクリックし、必要に応じて編集します。完了後、[貼り付ける]をクリックします。
  1. 情報カードのコピーに関する留意事項
    1. コピーした情報カードは、何回でも貼り付けることができます。不要になった場合は、[クリップボードから]の欄で[×](クリアする)アイコンをクリックします。
    2. 情報カードをコピーすると、該当の情報カードの設定内容もすべてコピーされます。コピーした情報カードを追加する前に、必要に応じて内容を編集できます。
    3. 重複するブロック名は使用できないため、コピーしたブロック名の末尾には「_copy」が自動で追加されます。この名前を変更することも可能です。


情報カードの削除 

1.フローの一覧画面で対象のフローをクリックし、フローの編集画面を開きます(フローにカーソルを合わせると表示される鉛筆アイコンをクリックすることでも編集画面が表示されます)。


2.削除する情報カードのブロックをクリックします。
3.操作メニューで[ブロックを削除する]を選択します。



4.表示される確認画面で、[はい、削除します]をクリックします。




 フローの編集画面で[元に戻す]をクリックすると、削除したブロックを復元できます。



5.フローの編集画面で、[保存する]をクリックします。
6.フローを公開します。 
  1. 情報カードの削除に関する留意事項
    1. 顧客と自動ガイドボットとのチャットのやりとりが進行中にブロックを削除すると、進行中のやりとりには以前のフロー(ブロック)の設定内容が適用されたままになります。削除以降、新しいチャットのやりとりを開始する際には、更新後のフロー(ブロック)の設定内容が適用されます。
    2. ブロックの削除後に変更内容を反映させるには、フローを再度公開する必要があります。
    3. 他の内容に関連付けられているブロックを削除しようとすると、エラーが表示されます。以下の画像は、エラーの表示例です。

ブロックに経路が関連付けられている場合


移動ブロックにおいて移動先のブロックが削除された場合

対応している経路

  1. WhatsApp
  2. Telegram
  3. Facebook Messenger
  4. LINE
  5. Instagram
  6. ビジネスメッセンジャー