比較バージョン

キー

  • この行は追加されました。
  • この行は削除されました。
  • 書式設定が変更されました。

...

こちらの記事は、ダイアログの活用方法についてご紹介しております。
画面構成などダイアログ機能の概要、シナリオの作成方法については、以下記事をご確認ください。
【ダイアログ】スタートアップガイド(概要編)
【ダイアログ】ツリー作成・編集手順

目次
minLevel1
maxLevel7

情報

ボタン毎にスペシャルタグを出し分ける

以下の手順で設定した場合の設定ファイルは以下です。
※チャットボタン設定のボタン有効化条件(どこのページなどボタンを表示させる条件を設定)は御社側でボタンを表示させたいページを設定ください。

本記事でご紹介するサンプル設定ファイルは以下です。
まず、どのように設定ができるか確認したい場合は、以下のファイルをダウンロードしてお使いください。
※インポート方法はこちらの記事をご確認ください。

View file
namedialog_sptg.json
View file
namebuttons_sptg.json

⚠️ サンプルファイルをご利用の際の留意点
・サンプルファイルはダイアログの設定ファイルとチャットボタンの設定ファイルとなります。
・スペシャルタグの設定に関しては御社にて設定されているタグをご活用ください。
・チャットボタン設定のボタン有効化条件(どこのページなどボタンを表示させる条件を設定)は御社側でボタンを表示させたいページを設定ください。

本記事で設定イメージは以下です。

  • TOPページ…チャットボタンクリック後、スペシャルタグを自動表示させる

  • カートページ…チャットボタンクリック後、スペシャルタグを自動表示させる

以下で設定方法をご紹介いたします。

パネル
panelIconId31-20e3
panelIcon:one:
panelIconText1️⃣
bgColor#E6FCFF

ダイアログ画面でスペシャルタグを設定する

⚙️ 1つ目のスペシャルタグの設定

  1. ダイアログ画面のタブ:テスト環境をクリックします。

     

  2. 左上の「編集」ボタンをクリックします。

     

  3. 「シナリオ先頭メッセージ追加」ボタンをクリックします。

     

  4. シナリオ先頭メッセージ追加後、ラベルを設定します。
    ※こちらは必須項目ではありませんが、チャットボタンと紐づける際にどのシナリオかを識別するために設定いただくことを推奨いたします。

     

  5. 次にメッセージタイプを設定します。メッセージタイプを設定します。
    今回はスペシャルタグを表示させたいので、「スペシャルタグ」を選択します。


     

  6. テキストはスナックバー上に表示されるテキストです。
    今回のサンプル設定では、チャットボタンをクリック後自動でスペシャルタグを開く設定のため、空欄にします。

    タグはスペシャルタグ検索に使用するタグを入力します。

  7. スペシャルタグ検索に使用するタグを入力します。


    タグにスペシャルタグのタグ名を入力し、「確定」ボタンをクリックします。

    ※スペシャルタグのタグ名は以下画像の赤枠内

    Image Added


  8. スナックバー省略は、チェックした場合スナックバーの表示を行わずにスペシャルタグが起動されます。
    今回のサンプル設定では、チャットボタンをクリック後自動でスペシャルタグを開く設定のため、チェックを入れます。
    1つ目のスペシャルタグの設定は以上となります。

 

...

次に同時に投稿するメッセージを設定します。
以下画像の赤枠内をクリック

...

ウィンドウの左上:「新規メッセージを追加して設定」ボタンをクリックします。
※すでに作成されたメッセージを選択することも可能です。

...

 

「新規メッセージを追加して設定」ボタンをクリック後
メッセージが追加されるので、メッセージをクリックしメッセージを編集します。

...

こちらの見本設定では、メッセージタイプから「リスト」を選択します。

...

⚙️ 2つ目のスペシャルタグの設定

  1. 「シナリオ先頭メッセージ追加」ボタンをクリックします。

    Image Added

  2. シナリオ先頭メッセージ追加後、ラベルを設定します。
    ※こちらは必須項目ではありませんが、チャットボタンと紐づける際にどのシナリオかを識別するために設定いただくことを推奨いたします。

    Image Added

  3. メッセージタイプを設定します。
    今回はスペシャルタグを表示させたいので、「スペシャルタグ」を選択します。

    Image Added

  4. テキストはスナックバー上に表示されるテキストです。
    今回のサンプル設定では、チャットボタンをクリック後自動でスペシャルタグを開く設定のため、空欄にします。

    Image Added

  5. タグはスペシャルタグ検索に使用するタグを入力します。

    Image Added

    タグにスペシャルタグのタグ名を入力し、「確定」ボタンをクリックします。

    Image Added

    ※スペシャルタグのタグ名は以下画像の赤枠内

    Image Added


  6. スナックバー省略は、チェックした場合スナックバーの表示を行わずにスペシャルタグが起動されます。
    今回のサンプル設定では、チャットボタンをクリック後自動でスペシャルタグを開く設定のため、チェックを入れます。
    2つ目のスペシャルタグの設定は以上となります。

    Image Added

⚙️ 設定の保存

  1. 設定が全て完了しましたら、「保存」ボタンをクリックします。

    Image Added

  2. 右下に「保存しました」が表示されましたら、テスト環境での設定保存が完了となります。

    Image Added

⚙️ 本番環境に反映

  1. タブ:テスト環境で保存した設定を本番反映させたい場合は、「テスト環境を本番環境へ反映」ボタンをクリックしてください。

    Image Added

  2. 本番環境への反映確認ウィンドウが表示されましたら、右側「はい」ボタンをクリックします。

    Image Added

  3. 右下に「環境への反映が完了しました」が表示されましたら、本番環境への反映が完了となります。

    Image Added

ダイアログ画面での設定は以上です。

 

パネル
panelIconId32-20e3
panelIcon:two:
panelIconText2️⃣
bgColor#E6FCFF

1で設定したダイアログ設定をチャットボタン設定に紐付ける

⚙️ 1つ目のスペシャルタグ設定をチャットボタンに紐づける

  1. チャットボタン設定画面を開き、保存済み一覧から使用するリビジョンを選択します。

    Image RemovedImage Added

     

  2. 「編集」ボタンをクリックします。

    Image RemovedImage Added

  3. シナリオを紐づけるボタン設定の右側「∨」をクリックします。

    Image RemovedImage Added

     

  4. 初期化メッセージのプルダウンから「ダイアログ」を選択します。

    Image RemovedImage Added

     

  5. ダイアログのプルダウンから紐づけたいシナリオを選択します。

    Image Added

⚙️ 2つ目のスペシャルタグ設定をチャットボタンに紐づける

  1. シナリオを紐づけるボタン設定の右側「∨」をクリックします。

    Image Added

  2. 初期化メッセージのプルダウンから「ダイアログ」を選択します。

    Image Added

  3. ダイアログのプルダウンから紐づけたいシナリオを選択します。

    Image RemovedImage Added

     

⚙️ 設定の保存

  1. 「保存」ボタンをクリックします。

    Image RemovedImage Added

  2. 任意でコメントを編集する場合は、コメントを編集し、「確定」ボタンをクリックします。

    Image RemovedImage Added

  3. 右下に「保存しました」が表示されましたら、チャットボタン設定の保存が完了となります。

    Image Added

    Image Removed

⚙️ テスト環境に反映

  1. 次にダイアログを紐付けたチャットボタン設定をテスト環境に反映します。
    該当のリビジョンをクリックします。

    Image RemovedImage Added

  2. 「テスト環境に反映」ボタンをクリックします。

    Image RemovedImage Added

  3. 任意でコメントを編集する場合は、コメントを編集し、「確定」ボタンをクリックします。

    Image RemovedImage Added

  4. 右下に「環境への反映が完了しました」が表示されましたら、テスト環境への反映が完了となります。

    Image RemovedImage Added 

⚙️ 本番環境に反映

  1. 最後にダイアログを紐付けたチャットボタン設定を本番環境に反映します。
    ※本番環境に反映前に、テスト環境で動作を確認したい場合はこちらをご確認ください。
    「テスト環境を本番環境へ反映」ボタンをクリックします。

    Image RemovedImage Added

  2. 任意でコメントを編集する場合は、コメントを編集し、「確定」ボタンをクリックします。

    Image RemovedImage Added

  3. 右下に「環境への反映が完了しました」が表示されましたら、本番環境への反映が完了となります。

    Image RemovedImage Added

     

設定は以上となります。