LINE 公式アカウント で手動チャットと Webhook を併用し柔軟な顧客対応を実現してみた

re:Invent で AWS のアップデートがドカドカ出る中、LINE からもユーザーが待ち望んでいた待望のアップデートが出ていました。

【仕様変更】「応答設定」について

このアップデートにより、 LINE 公式アカウントで以下のようなやり取りができるようになります。（歯医者さんの公式アカウントをイメージ）

つまり、LINE 公式アカウントのチャットにて、定型のやり取りに関しては自動化し、非定型のやり取りについては人間が返信することができるようになります。 また、今までは 「webhook で LINE 公式アカウントがブロックされたことを検知しつつ、LINE 公式アカウントのチャットを利用したい」のようなことを実現することはできませんでしたが、そのようなことにも対応できるようになります。これは色々と捗ります。

ということで、上記のフローを実現する簡単な予約システムを作ってみようと思います。

やってみた

定型のやり取りに関しては最近よく使っている Make というツールで実現していきます。 Make をまだ触ったことがない方は、一旦こちらのブログをみていただき戻ってきてもらえればと思います。

ノーコードツール（Make:旧Integromat）を使ってユーザー登録用のLINE botを作ってみた

自動応答の設定

以下の 2 つの機能を実装していきます。

• 「予約」という文言がチャットに送られてきた場合、空き時間を返却する仕組み
• 「YYYY/MM/DD XX:XX:XX」が送られてきたら、その時間を予約済みにし、登録完了アナウンスをする仕組み

上記 2 つの文言以外が送られてきた場合は反応しないようにします。そして完成したシナリオはこちらです。

Make の部分は当ブログの本質ではないためポイントのみ解説します

予約可能日返却シナリオ

① 「予約」という文言がきた場合のみ上ルートに入るように以下のように設定します

② その後、Array aggregatorを利用し対象のレコードのアウトプットを1つにまとめます。

③ 取得した日付をFlex Messageを使ってユーザーに返却します

body の内容は以下の通りです。

{
  "to": "{{1.events[].source.userId}}",
  "messages": [
    {
      "type": "flex",
      "altText": "This is a Flex Message",
      "contents": {
        "type": "bubble",
        "body": {
          "type": "box",
          "layout": "vertical",
          "contents": [
            {
              "type": "text",
              "text": "予約可能時間はこちら",
              "wrap": true,
              "size": "md",
              "margin": "md"
            },
            {
              "type": "button",
              "style": "primary",
              "action": {
                "type": "message",
                "label": "{{4.array[1].`0`}}",
                "text": "{{4.array[1].`0`}}"
              },
              "margin": "md"
            },
            {
              "type": "button",
              "style": "primary",
              "action": {
                "type": "message",
                "label": "{{4.array[2].`0`}}",
                "text": "{{4.array[2].`0`}}"
              },
              "margin": "md"
            },
            {
              "type": "button",
              "style": "primary",
              "action": {
                "type": "message",
                "label": "{{4.array[3].`0`}}",
                "text": "{{4.array[3].`0`}}"
              },
              "margin": "md"
            }
          ]
        }
      }
    }
  ]
}

予約可能日登録シナリオ

④ 「YYYY/MM/DD XX:XX:XX」が送られてきた場合のみ下ルートに入るよう以下のように設定します

こちらの正規表現^[0-9]{4}/(0[1-9]|1[0-2])/(0[1-9]|[12][0-9]|3[01]) ([01][0-9]|[2][0-3]):[0-9]{2}:[0-9]{2}$を使い制御しています。

あとはスプレットシートを適宜編集してユーザーに登録した旨を返却します。

手動応答とwebhookを併用するための設定

特に難しいことはなく、LINE 公式アカウント上の応答設定を以下のようにするだけです。

これでチャットと Webhook が併用できるようになります。

動かしてみた

この 2 つを組み合わせることで、以下のような柔軟な顧客対応を実現できます。

OAMには全部のやり取りも含め表示されています。これは便利ですね。

まとめ

LINE 公式アカウントで webhook を利用したい。でもそうすると LINE チャット機能が使えない。どちらかを選ぶしかない。。。

そんな悩みがなくなるとても良いアップデートでした。