設定傳送者資訊,在 LINE 聊天機器人中實現多場景、多身分的頭像與暱稱切換

依稀記得曾經在 TechPulse 2018 的議程裡面聽過 Icon Switch API 這項功能( 請見新聞報導),當下看完展示覺得非常方便也很感興趣,應用上可以切換成不同小編的頭像(或稱「大頭照」, LINE 管理後台稱為「基本檔案照片」),搭配 Switcher API 由不同的機器人與小編輪番上陣回應使用者的疑難雜症,但是當時僅限付費的合作伙伴可以使用。隨著 LINE 官方帳號 2.0 上路,不僅能夠在後台的回應模式裡面切換機器人與真人,現在(從 2020/3/17 開始支援,請見新聞稿)透過 Messagning API 也可以變換頭像與暱稱了,這項功能尤其適合用於不同場景或是不同身分之間的切換,效果顯著。

在切換場景或身分時,變換頭像與暱稱可以作為除了圖文選單之外的另類方案,同樣都有明顯的區分效果。
在切換場景或身分時,變換頭像與暱稱可以作為除了圖文選單之外的另類方案,同樣都有明顯的區分效果。

話說回來,其實我們每個人應該都曾看過會不停變換的頭像與暱稱。在聊天視窗裡,左側是對方,右側是自己。當我們在操作聊天機器人的時候,就跟平常與單獨一位朋友傳訊息時一樣,左側只會有頭像,不會顯示暱稱,要想起來是跟誰在聊天,看一下標題列就知道(如下圖左側所示),但是如果是群組或聊天室的話,因為左側發言的人數會超過一位,這時候除了頭像之外,還會標註暱稱以資區別(如下圖右側所示)。

一般而言,要在 LINE 聊天機器人中製造明顯的操作場景或對話身分的切換效果,可以透過改變聊天視窗下方的圖文選單( Rich Menu )或者聊天室背景的底色,但是聊天室背景沒有辦法透過 Messaging API 動態變換(至少目前沒有辦法),因此常見的作法是透過 Messagnin API 來更換圖文選單(連同聊天視窗最下方的「選單列」的標題文字也可以更換)。

請先將範例「彰化旅行+」加為 LINE 好友,一開始下方的圖文選單提供「鹿港」、「和美」、「彰化」三個觀光導覽場域,點選後,圖文選單和選單列文字都會變換,如下圖所示。

「彰化旅行+」預設的圖文選單提供了「鹿港」、「和美」、「彰化」三個觀光導覽場域,點選後,圖文選單和選單列文字都會變換。
「彰化旅行+」預設的圖文選單提供了「鹿港」、「和美」、「彰化」三個觀光導覽場域,點選後,圖文選單和選單列文字都會變換。
透過圖文選單與選單列文字的變換,實現多重場景的切換。
透過圖文選單與選單列文字的變換,實現多重場景的切換。
透過頭像和暱稱的變換,實現多重場景的切換。
透過頭像和暱稱的變換,實現多重場景的切換。

話說回來,變換頭像與暱稱這項功能的實作,跟快速回覆( Quick Reply )有點像又不太像。相似之處是它們都像是現有訊息的補充,而相異之處則是「變換頭像與暱稱」可以(也必須)每一則訊息、每一個泡泡框都加註,有加註才會生效,沒有加註就是原本的頭像,如下圖所示。相較之下,「快速回覆」則只能夠加註在最後一則訊息,也只有最後一則才會生效。

每一則訊息、每一個泡泡框都可以更換頭像或加註暱稱。
每一則訊息、每一個泡泡框都可以更換頭像或加註暱稱。

舉例而言,假設原本的文字訊息以 PHP 實作如下:

array(
  'type' => 'text',
  'text' => '今天就讓「借問哥」帶你玩彰化。',
),

那麼在傳送者資訊( Sender )更換了「鹿港」頭像、加註了「鹿港借問哥」身分之後,程式碼會變成:

array(
  'type' => 'text',
  'text' => '今天就讓「借問哥」帶你玩彰化。',
  'sender' => array(
    'name' => '彰化借問哥',
    'iconUrl' => 'https://.../avatar_changhua.jpg',
  ),
),

以 JSON 來看,就是從:

{
  "type": "text",
  "text": "今天就讓「借問哥」帶你玩彰化。"
}

擴充為:

{
  "type": "text",
  "text": "今天就讓「借問哥」帶你玩彰化。",
  "sender": {
    "name": "彰化借問哥",
    "iconUrl": "https://.../avatar_changhua.jpg"
  }
}

如你所見,多了關於傳送者( Sender )的描述區塊,暱稱的格式是「設定的暱稱 from ‘聊天機器人的帳號名稱’」,而圖像則是一個圖片網址。此外, name 和 iconUrl 屬性都是選用的,也就是說,可以只加註暱稱,或者只更換頭像,也可以兩者都做。程式碼很單純,實作起來相當容易,基本上只需要把現有訊息再加上一些屬性設定即可。

很有趣吧,而且視覺效果明顯,尤其適合多場景、多身分的動態切換需求,可以作為除了圖文選單之外的另類方案,應該能夠收到許多意想不到的用戶回饋,現在就動手試試看唄!

↓ 請幫我按 5 次 Like ,感恩 ↓