多層LINE圖文選單,免費手把手教學 (2024年版)

0元免費教學文LINE圖文選單換頁

沒時間自己學?專人可協助或指導你

進階全方位應用,LINE自動回應訊息

LINE圖文選單是什麼?

LINE圖文選單(LINE Rich Menu)是LINE即時通訊應用程式上的一種功能,允許LINE用戶在聊天界面中以視覺化的方式與LINE官方帳號互動。圖文選單在LINE聊天視窗下方的固定選單,每次用戶不管是因為推播或其他互動打開品牌的LINE官方帳號時,都能看到這個版位。

制式的LINE圖文選單從後台就可以設定,然而如果要做到多層、切換,甚至不同的版型,發揮創意,則需要使用LINE的Messenging API進行設定。這篇line rich menu教學,就是要免費0元教你手把手完成綁定自己的LINE多層圖文選單!

LINE多層圖文選單切換範例加入柔兒LINE

100% 的流量給了LINE圖文選單

豐富的LINE圖文選單,可以增強用戶體驗,提高用戶參與度,讓品牌在宣傳、銷售等方面擁有提供更多機會,帳號更可以根據特定活動或需求定期更換圖文選單內容,以適應不同的推廣和行銷策略。

這篇文會以柔兒數位的圖文選單範例4層連結版為範例,做出來會是下圖效果。

/// 步驟一:先設計好你的LINE圖文選單

建議可以用Canva製作,LINE圖文選單模板設計尺寸拉 2500 X 1686。也可以直接複製柔兒May的Canva 4層圖文選單模板改成適合自己的設計樣子,然後下載備用。

多層line圖文選單模板

4層LINE圖文選單模板

/// 步驟到LINE Developer後台拿Channel access token

LINE Developer後台設定畫面,點選 Create a new provider> Create a Messaging API channel 畫面,把資料填一填後,得到一個Channel access token,把他複製起來。(參考以下影片)

如果圖文選單是要套用在現有的官方帳號上,不是要新建立,則就是需要去取得既有帳號的Channel access token喔!

/// 步驟:到postman網站,或下載免費postman軟體

請到 Postman 的官方網站下載應用程式:https://www.getpostman.com/downloads/

安裝好之後打開軟體,創建一個帳號,會看到以下的操作介面,你可以新增一個Collection(資料夾概念),以及點NEW準備要來和API溝通了。(見下面截圖) 

因為Postman是雲端機制,所以寫好的code只要有存,換台電腦依然可以登入帳號後使用與繼續~

/// 步驟:透過postman取得richMenuId

同時可以參考LINE官方文件

現在,我們必須開始刻畫這個圖文選單的背後程式邏輯了!完成後呼叫LINE替每一個我們創作的圖文選單取得它的richMenuId,像我們範本要來製作四層圖文選單,就需要取得四個richMenuId。

必須替每一個圖文選單取得它的richMenuId,四層圖文選單,就需要取得四個richMenuId。

第一層

{  "size": {    "width": 2500,    "height": 1686  },  "selected": true,  "name": "richmenu-a",  "chatBarText": "Menu",  "areas": [    {      "bounds": {        "x": 1250,        "y": 0,        "width": 1250,        "height": 200      },      "action": {        "type": "richmenuswitch",        "richMenuAliasId": "richmenu-b",        "data": "richmenu=b"      }    },    {          "bounds": {              "x": 0,              "y": 220,              "width": 1250,              "height": 730          },          "action": {              "type": "uri",              "uri": "https://www.gentlerdigit.com/"          }      },      {          "bounds": {              "x": 0,              "y": 951,              "width": 1250,              "height": 730          },          "action": {              "type": "uri",              "uri": "https://www.gentlerdigit.com/%E5%A4%9A%E5%B1%A4line%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE"          }      },    {          "bounds": {        "x": 1250,        "y": 220,              "width": 1250,              "height": 730          },          "action": {              "type": "uri",              "uri": "https://www.gentlerdigit.com/home/AI-SEO"          }      },    {          "bounds": {              "x": 1250,              "y": 951,              "width": 1250,              "height": 730          },          "action": {              "type": "uri",              "uri": "https://www.youtube.com/@gentlerdigit"          }      }  ]}

第二層

{  "size": {    "width": 2500,    "height": 1686  },  "selected": true,  "name": "richmenu-b",  "chatBarText": "Menu",  "areas": [    {      "bounds": {        "x": 0,        "y": 0,        "width": 1250,        "height": 200      },      "action": {        "type": "richmenuswitch",        "richMenuAliasId": "richmenu-a",        "data": "richmenu=a"      }    },    {          "bounds": {              "x": 1450,              "y": 1115,              "width": 1000,              "height": 500          },          "action": {              "type": "uri",              "uri": "https://www.sheriffteaegg.com/"          }      },    {          "bounds": {              "x": 850,              "y": 285,              "width": 830,              "height": 135      },      "action": {        "type": "richmenuswitch",        "richMenuAliasId": "richmenu-c",        "data": "richmenu=c"      }    }, {          "bounds": {              "x": 1705,              "y": 285,              "width": 830,              "height": 135      },      "action": {        "type": "richmenuswitch",        "richMenuAliasId": "richmenu-d",        "data": "richmenu=d"      }    }  ]}

第三層

{  "size": {    "width": 2500,    "height": 1686  },  "selected": true,  "name": "richmenu-c",  "chatBarText": "Menu",  "areas": [    {      "bounds": {        "x": 0,        "y": 0,        "width": 1250,        "height": 200      },      "action": {        "type": "richmenuswitch",        "richMenuAliasId": "richmenu-a",        "data": "richmenu=a"      }    },    {          "bounds": {              "x": 1450,              "y": 1115,              "width": 1000,              "height": 500          },          "action": {              "type": "uri",              "uri": "https://wumudesign.com.tw/"          }      },    {          "bounds": {              "x": 0,              "y": 285,              "width": 830,              "height": 135      },      "action": {        "type": "richmenuswitch",        "richMenuAliasId": "richmenu-b",        "data": "richmenu=b"      }    }, {          "bounds": {              "x": 1705,              "y": 285,              "width": 830,              "height": 135      },      "action": {        "type": "richmenuswitch",        "richMenuAliasId": "richmenu-d",        "data": "richmenu=d"      }    }  ]}

{  "size": {    "width": 2500,    "height": 1686  },  "selected": true,  "name": "richmenu-d",  "chatBarText": "Menu",  "areas": [    {      "bounds": {        "x": 0,        "y": 0,        "width": 1250,        "height": 200      },      "action": {        "type": "richmenuswitch",        "richMenuAliasId": "richmenu-a",        "data": "richmenu=a"      }    },    {          "bounds": {              "x": 1450,              "y": 1115,              "width": 1000,              "height": 500          },          "action": {              "type": "uri",              "uri": "https://www.largitdata.com/"          }      },    {          "bounds": {              "x": 0,              "y": 285,              "width": 830,              "height": 135      },      "action": {        "type": "richmenuswitch",        "richMenuAliasId": "richmenu-b",        "data": "richmenu=b"      }    },    {          "bounds": {              "x": 850,              "y": 285,              "width": 830,              "height": 135      },      "action": {        "type": "richmenuswitch",        "richMenuAliasId": "richmenu-c",        "data": "richmenu=c"      }    }  ]}

重要:小TIP!!! 那個LINE圖文選單座標和寬高,要怎麼算啊~~

如果你複製範本後,有做了一些設計欄位的調整,或是說你有從頭設計自己美美的圖文選單,介紹你可以下載官方LINE的LINE Bot Designer(連結),他可以協助你拉圖上的座標。

不過因為LINE已經不維護這個LINE Bot Designer了,所以bugs很多,沒辦法完全用它來寫出程式碼,只能做為輔助工具,拉座標和高寬很便利。見下面影片範例。記得哦,上傳圖文選單後,要點圖的上方,開始拉框框後,才會出現動作那些欄位~ 一開始傳圖上去後,動作和座標是預設沒有出現的!

補充說明:

重要:已經生出richMenuId,但發現寫錯程式內容了怎麼辦

如果只是在建立時程式碼打錯,還沒走到後面步驟話,那就改改好,重新生一個ID即可!

不過LINE有限制最多只能有1000個ID,以及為了避免混亂,後續真的用不到了建議也是可以直接刪除這個還沒上傳圖片的選單。

忘記自己有哪些選單?列表看看目前你庫存了多少個圖文選單!(還沒刪除的庫存):

/// 步驟五:上傳圖文選單的圖片

這個步驟就要來真正上傳圖片給LINE了,上一步驟我們只是在製作選單背後邏輯。

所以,現在,我們得把剛剛取得4個richMenuId,必須一一上傳圖片。

重要:圖片傳錯了、啊~~我要改圖!怎麼辦?

如果是在這一步驟出錯,或是覺得圖文選單的圖片設計要調整一下,那會需要把這個選單砍掉重新生ID喔。沒辦法取代已經上傳上去貼在選單上的設計圖片。

/// 步驟自定義連動 Rich Menu 別名 

這個關鍵步驟,我們需要將先前建立圖文選單的別名 Alias 分配給 Rich Menu a, b, c, d,這樣才能互相連動起來~記得嗎?因為在創建的程式碼中,我們有使用 "type": "richmenuswitch",       "richMenuAliasId": "richmenu-b", 這樣的語法(回去看你跑的程式碼~~有沒有看到呀)...意思是點選這個區域後LINE圖文選單要switch去另外一個別名叫做richmenu-b的圖文選單,但是要是我們沒有在這步驟,把定義傳送給LINE,他根本也不會知道誰是richmenu-b,因為我們寫richmenu-a時,richmenu-b的richMenuId還沒生出來呢,對吧?所以囉,這邊算是一個把該『連結』的,都連起來的關鍵步驟!

{    "richMenuId": "richmenu-5da3fd3e8f48dd73169074d71b7ce541",    "richMenuAliasId": "richmenu-a"}

重要:我改成了圖文選單的內外設計,從新連動卻失敗耶... 

因為程式就是靠一連串邏輯連動起來的,沒那麼智能~所以假設先前已經連動了某richMenuId給richMenuAliasId,但還要繼續使用同一個richMenuAliasId,則需要把本來『綁定的』richMenuAliasId和richMenuId解開刪除,這樣才能用新的richMenuId,去指派給原先的richMenuAliasId。

/// 步驟設定哪個圖文選單預設出現

即將完成啦!誰是首頁就設定誰~

{    "richMenuId": "richmenu-5da3fd3e8f48dd73169074d71b7ce541"}

/// 步驟八:成功!換頁的圖文選單出現

回到你的官方帳號,看看有沒有出現製作的LINE多層圖文選單呢?

通常如果是第一次裝,只要重新開LINE,基本上那會馬上出現。官方說不會超過數分鐘。

如果沒有出現新的,可以先試試看把先前做的舊的沒有在使用的選單刪除哦(可參考步驟四、步驟五的刪除方式說明)

要是沒有刪除舊的,就又疊加綁新的,新好友加入看到就會是新的選單,舊客人看到就會是舊的選單... 如果舊客人想要新選單,就要封鎖重加好友,想必這樣會造成你的LINE好友很多困擾呢! 

忘記自己有哪些選單?看看目前你庫存了多少個圖文選單!(還沒刪除的庫存):

刪除沒在用的圖文選單

/// 步驟:解除取消綁定多層圖文選單

請問有什麼方法可以取消使用多層圖文選單,用回去LINE預設的圖文選單嗎?因為LINE在顯示選單的順位上,是把使用Messaging API的多層圖文選單,優先於一般後台預設的圖文選單唷,所以需要先把多層圖文選單刪除掉,才能使用LINE預設的圖文選單。

取消刪除多層圖文選單的話,就需要下面三大步驟,都要一一執行哦(一個滾回去最初什麼都沒有的概念~)

---

以上資訊都可以在LINE官方文件中,找到更詳細的說明。祝福大家順利!

進階LINE圖文選單,一對一專人支援/指導

連結多頁訊息、LINE聊天預填預設文字等

柔兒團隊顧問,都可協助你!

加入柔兒LINE  以及 官網填單  留下您的資訊唷

LINE機器人關鍵字自動回覆 All message Types: Template message Flex Message Text message Sticker message Image message Video message Audio message Location message Imagemap message
圖文選單LINE聊天預填、預定、預約教學視窗打開預設文字,包車服務、機場接送、法務諮詢、業務諮詢、會計諮詢、餐廳訂位、室內裝修等

客戶見證示範

「Cp值超高的柔兒LINE教學課程,顧問老師美嘉也非常用心的解答~非常滿意」- Mio Beauty Nail 創辦人 Tanya

撰文者

楊涵柔 May

柔兒數位 Gentler Digit》創辦人

睿鼎數位 12CM Taiwan》行銷總監

英邦德科技 Inbound》創辦人