チュートリアル: ウェブチャットにカスタムオプションボタンを実装する

このチュートリアルでは、オプション応答のデフォルトのレンダリングを、独自のクリック可能なボタンに置き換える方法を示します。

このチュートリアルで説明している例の完全な動作版については、「 AI アシスタントWebチャット用のカスタムボタン」をご覧ください。

デフォルトでは、ウェブチャットは常に、クリック可能なボタンのセット（4つ以下のオプションの場合）またはドロップダウンリスト（5つ以上のオプションの場合）としてオプションの応答を表示します。この例では、3つのオプションを持つオプション・レスポンスのデフォルト・レンダリングを示します：

3つのボタンで表示されるオプション

このチュートリアルでは、このデフォルトのレンダリングを、より大きなカードスタイルのボタンに置き換えます：

オプション・レスポンスは、3つのカスタム・カード・スタイルのボタンとして表示されます

オプションレスポンスのレンダリングは変更できないので、アシスタントからやってくるオプションレスポンスをインターセプトして、カスタム (user_defined) レスポンスに変換することでこれを行います。そして、これらのレスポンスに対してカスタムレンダリングを実装することができる。

イベント pre:receive 用のハンドラを作成します。このハンドラでは、メッセージのペイロードから「optionレスポンスを探し、「user_definedレスポンスに変換する。

    function preReceiveHandler(event) {
      const message = event.data;
      if (message.output.generic) {
        message.output.generic.forEach(messageItem => {
          if (messageItem.response_type === 'option') {
            messageItem.response_type = 'user_defined';
          }
        })
      }
    }

イベント customResponse 用のハンドラを作成します。このハンドラは、CSSで定義したカスタム'CardButtonスタイルを使用して、カスタムボタンをレンダリングします。（このスタイルの定義については、完全な例を参照してください。）

    function customResponseHandler(event) {
      const { message, element, fullMessage } = event.data;
      message.options.forEach((messageItem, index) => {
        const button = document.createElement('button');
        button.innerHTML = messageItem.label;
        button.classList.add('CardButton');
        button.addEventListener('click', () => onClick(messageItem, button,     fullMessage, index));
        element.appendChild(button);
      });
    }

イベント onLoad ハンドラ内で、インスタンス on() メソッドを使用しておよび customResponse イベント pre:receive を購読し、ハンドラをコールバックとして登録します。

    instance.on({ type: 'customResponse', handler: customResponseHandler });
    instance.on({ type: 'pre:receive', handler: preReceiveHandler });

顧客がカスタムボタンのいずれかをクリックしたときに応答するクリックハンドラを作成します。ハンドラー内で、インスタンス send() メソッドを使用して、ボタンのラベルをメッセージテキストとしてアシスタントにメッセージを送信します。

さらに、クリックされたボタンにカスタムCSSクラス「CardButton--selected」を追加し、選択されたことを示す外観に変更しています。（このクラスは、完全な例でも定義されています。）

    function onClick(messageItem, button, fullMessage, itemIndex) {
      webChatInstance.send({ input: { text: messageItem.label }});
      button.classList.add('CardButton--selected');
    }

ユーザーがページをリロードするか、別のページに移動すると、ウェブチャットはセッション履歴からリロードします。この場合、クリックされたボタンの「選択状態」を維持したい。

これを行うには、ハンドラ onClick 内で updateHistoryUserDefined インスタンスメソッドを使用して、どのボタンがクリックされたかを示す変数をセッション履歴に保存します。

    webChatInstance.updateHistoryUserDefined(fullMessage.id, { selectedIndex:     itemIndex });

次に、'customResponseハンドラでこの値を読み込んで、セッション履歴にあるカスタムレスポンスのボタンの初期状態を設定します。

    if (fullMessage.history?.user_defined?.selectedIndex === index) {
      button.classList.add('CardButton--selected');
    }

完全な動作コードについては、「 AIアシスタント Webチャット用カスタムボタン」のサンプルを参照してください。この例では、顧客がメッセージを送信した後、カスタムレスポンスでボタンを無効にする方法も示しています。