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

LINE公式アカウントで手動チャットと Webhook が併用できるようになりました。

#LINE

#LINE Bot

城岸直希

2022.12.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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"
            }
          ]
        }
      }
    }
  ]
}