多層LINE圖文選單,免費手把手教學 (2024年版)
✔ 0元免費手把手教學文,LINE圖文選單換頁
✔ 也提供付費1對1教學,專人耐心教會你
✔ 選單進階全方位應用,LINE自動回應訊息
LINE圖文選單是什麼?
LINE圖文選單(LINE Rich Menu)是LINE即時通訊應用程式上的一種功能,允許LINE用戶在聊天界面中以視覺化的方式與LINE官方帳號互動。圖文選單在LINE聊天視窗下方的固定選單,每次用戶不管是因為推播或其他互動打開品牌的LINE官方帳號時,都能看到這個版位。
LINE多層圖文選單切換範例:加入柔兒官方帳號LINE
制式的LINE圖文選單從後台就可以設定,然而如果要做到多層、切換,甚至不同的版型,發揮創意,則需要使用LINE的Messenging API進行設定。
這篇line rich menu教學文章要免費0元教你手把手完成綁定自己的LINE多層圖文選單!另提供付費專人1對1教學、付費代綁定、付費機器人設定等,歡迎LINE內聯繫或官網留下資料
100% 的流量給了LINE圖文選單
豐富的LINE圖文選單,可以增強用戶體驗,提高用戶參與度,透過多層圖文選單換頁設計,更可讓品牌擁有迷你官網形象,在宣傳、銷售等方面擁有提供更多機會,官方帳號更可以根據特定活動或需求定期更換圖文選單內容,以適應不同的推廣和行銷策略。
免費教學開始:這篇文會以柔兒數位的圖文選單範例4層連結版為範例,做出來會是下圖效果。
/// 步驟一:先設計好你的LINE圖文選單
建議可以用Canva製作,LINE圖文選單模板設計尺寸拉 2500 X 1686。也可以直接複製柔兒May的Canva 4層圖文選單模板改成適合自己的設計樣子,然後下載備用。
/// 步驟二:到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。
上方欄位 POST 填入 https://api.line.me/v2/bot/richmenu
欄位Authorization 選擇 Bearer 然後填入步驟二的 channel access token
欄位Header裡面欄位Key填入Content-Type,欄位Value填入 application/json(如果有預設填入別的了,把預設的不勾選即可)
欄位Body下選raw,在raw內帶入json程式碼,範例如下。最後按送出會回傳 rich menu id,後面 API 會使用到。
必須替每一個圖文選單取得它的richMenuId,四層圖文選單,就需要取得四個richMenuId。
第一層
第二層
第三層
第四層
重要:小TIP!!! 那個LINE圖文選單座標和寬高,要怎麼算啊~~
如果你複製範本後,有做了一些設計欄位的調整,或是說你有從頭設計自己美美的圖文選單,介紹你可以下載官方LINE的LINE Bot Designer(連結),他可以協助你拉圖上的座標。
不過因為LINE已經不維護這個LINE Bot Designer了,所以bugs很多,沒辦法完全用它來寫出程式碼,只能做為輔助工具,拉座標和高寬很便利。見下面影片範例。記得哦,上傳圖文選單後,要點圖的上方,開始拉框框後,才會出現動作那些欄位~ 一開始傳圖上去後,動作和座標是預設沒有出現的!
補充說明:
size: 圖文選單圖片的長寬,必需為以下尺寸: 2500x1686、2500x843、1200x810、1200x405、800x540、800x270
selected: 選單是否預設開啟,我們設定為 true,預設開啟。
name: 選單名稱,用於識別和管理選單,不會顯示給使用者。
chatBarText: 顯示在聊天視窗圖文選單下方的選單文字。
areas: 用於定義按鈕的可點墼區域。
bounds 用於定義座標和大小
x、y: 起始座標
width: 寬度
height: 高度
action 用於定義觸發的動作
type: 動作類型
label: 動作標籤
text: 發送到聊天視窗的文字
data: 透過 webhook 回傳到後端的字串
重要:已經生出richMenuId,但發現寫錯程式內容了怎麼辦
如果只是在建立時程式碼打錯,還沒走到後面步驟話,那就改改好,重新生一個ID即可!
不過LINE有限制最多只能有1000個ID,以及為了避免混亂,後續真的用不到了建議也是可以直接刪除這個還沒上傳圖片的選單。
上方欄位是改成選DELETE哦,填入 https://api.line.me/v2/bot/richmenu/{richMenuId}/
得到狀態碼 200 與 {}, 代表成功刪除。
忘記自己有哪些選單?列表看看目前你庫存了多少個圖文選單!(還沒刪除的庫存):
上方欄位改成 GET 填入 https://api.line.me/v2/bot/richmenu/list
/// 步驟五:上傳圖文選單的圖片
這個步驟就要來真正上傳圖片給LINE了,上一步驟我們只是在製作選單背後邏輯。
所以,現在,我們得把剛剛取得4個richMenuId,必須一一上傳圖片。
首先程式碼建議是分開存哦,尤其新手很容犯錯誤,所以上一步驟的每一個richMenuId都有自己的程式碼,傳圖片也比照辦理。所以我們可以命名檔案叫做image menu-a (然後因為要上傳四張,所以 b c d就分別寫一支,見截圖示範)
上方欄位一樣是要選POST哦,填入 https://api-data.line.me/v2/bot/richmenu/{richMenuId}/content,將上步驟得到的對應 {rich menu id} 帶入網址。所以,看是要要上傳哪張圖文選單,就放他的richMenuId到網址內
欄位Authorization 選擇 Bearer 然後一樣填入步驟二的 channel access token
欄位Header裡面欄位Key填入Content-Type,欄位Value填入 image/jpeg or image/png,看image檔案是哪一種
欄位Body那邊選擇 binary ,接著選擇對應的圖文選單上傳,最後按送出後,如果回傳狀態碼 200 與 {}, 代表成功!四張圖片,都需要傳上去哦!
重要:圖片傳錯了、啊~~我要改圖!怎麼辦?
如果是在這一步驟出錯,或是覺得圖文選單的圖片設計要調整一下,那會需要把這個選單砍掉重新生ID喔。沒辦法取代已經上傳上去貼在選單上的設計圖片。
刪除{richMenuId}方式,上方欄位是改成選DELETE哦,填入 https://api.line.me/v2/bot/richmenu/{richMenuId}/,把對應 {richMenuId} 帶入網址。欄位Authorization 和欄位Header都和上傳時填一樣
得到狀態碼 200 與 {}, 代表成功刪除,就同回到上一步驟,重新生一個richMenuId,再回到這步驟,用新的richMenuId來重新上傳新圖。
/// 步驟六:自定義連動 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還沒生出來呢,對吧?所以囉,這邊算是一個把該『連結』的,都連起來的關鍵步驟!
一樣記得再開新檔案哦!上方欄位POST 填入 https://api.line.me/v2/bot/richmenu/alias
欄位Authorization 選擇 Bearer 然後一樣填入步驟二你的 channel access token
欄位Header裡面欄位Key填入Content-Type,欄位Value填入 application/json
欄位Body那邊raw帶入json程式碼,範例如下。最後按送出會狀態碼 200 與 {},代表成功!
四個Alias都要做哦。
重要:我改成了圖文選單的內外設計,從新連動卻失敗耶...
因為程式就是靠一連串邏輯連動起來的,沒那麼智能~所以假設先前已經連動了某richMenuId給richMenuAliasId,但還要繼續使用同一個richMenuAliasId,則需要把本來『綁定的』richMenuAliasId和richMenuId解開刪除,這樣才能用新的richMenuId,去指派給原先的richMenuAliasId。
上方欄位是選DELETE哦,填入 https://api.line.me/v2/bot/richmenu/alias/{rich menu Alias id}/,看是哪一個richMenuAliasId需要解放,就把其帶入網址。
欄位Authorization 和欄位Header都和上傳時填一樣
得到狀態碼 200 與 {}, 代表成功解放。
/// 步驟七:設定哪個圖文選單預設出現
即將完成啦!誰是首頁就設定誰~
上方欄位POST 填入 https://api.line.me/v2/bot/user/all/richmenu/
欄位Authorization 選擇 Bearer 然後一樣填入步驟二的 channel access token
欄位Header裡面欄位Key填入Content-Type,欄位Value填入 application/json
欄位Body那邊帶入json程式碼richMenuID,範例如下。最後按送出會狀態碼 200 與 {},代表成功!
/// 步驟八:成功!換頁的圖文選單出現
回到你的官方帳號,看看有沒有出現製作的LINE多層圖文選單呢?
通常如果是第一次裝,只要重新開LINE,基本上那會馬上出現。官方說不會超過數分鐘。
如果沒有出現新的,可以先試試看把先前做的舊的沒有在使用的選單刪除哦(可參考步驟四、步驟五的刪除方式說明)
要是沒有刪除舊的,就又疊加綁新的,新好友加入看到就會是新的選單,舊客人看到就會是舊的選單... 如果舊客人想要新選單,就要封鎖重加好友,想必這樣會造成你的LINE好友很多困擾呢!
忘記自己有哪些選單?看看目前你庫存了多少個圖文選單!(還沒刪除的庫存):
上方欄位改成 GET 填入 https://api.line.me/v2/bot/richmenu/list
刪除沒在用的圖文選單
上方欄位改成 DELETE 填入 https://api.line.me/v2/bot/richmenu/{richMenuId}/
/// 步驟九:解除取消綁定多層圖文選單
請問有什麼方法可以取消使用多層圖文選單,用回去LINE預設的圖文選單嗎?因為LINE在顯示選單的順位上,是把使用Messaging API的多層圖文選單,優先於一般後台預設的圖文選單唷,所以需要先把多層圖文選單刪除掉,才能使用LINE預設的圖文選單。
取消刪除多層圖文選單的話,就需要下面三大步驟,都要一一執行哦(一個滾回去最初什麼都沒有的概念~)
先取消預設的選單:回到步驟七,把欄位改成DELETE 後一樣是填入 https://api.line.me/v2/bot/user/all/richmenu/,Body內容一樣是你要取消的選單richMenuID
再來是刪除所有的Alias:
上方欄位欄位選 GET ,填入 https://api.line.me//v2/bot/richmenu/alias/list,取得目前所有的richMenuAliasId
上方欄位選 DELETE 哦,填入 https://api.line.me/v2/bot/richmenu/alias/{rich menu Alias id}/,把每一個設定的richMenuAliasId都刪除
最後是刪除所有的richMenuID:
上方欄位欄位選 GET ,填入 https://api.line.me/v2/bot/richmenu/list,取得目前所有的richMenuId
上方欄位選DELETE哦,填入 https://api.line.me/v2/bot/richmenu/{richMenuId}/ ,把每一個richMenuId都刪除。
---
以上資訊都可以在LINE官方文件中,找到更詳細的說明。祝福大家順利!
進階LINE圖文選單,一對一專人教學/代綁訂
連結多頁訊息、LINE聊天預填預設文字等
多層圖文選單我們有提供2個服務,分別是一對一專人教學服務或是代綁定服務,還可以加購機器人綁定支援:
1.多層圖文選單一對一專人教學:線上的教學,時長約2-3小時,保證教會所有細節和邏輯,以及進階版的關鍵字觸發、預填操作等~課程會確認學生可以自行綁定成功才下課,後續再操作如果有問題,只要在範疇內也都可以再詢問喔,我們教會很多品牌囉!
2.多層圖文選單代綁定服務:適合後續不太會有變動調整的品牌,如果後續要調整我們會再示幅度報價唷
3.多層圖文選單機器人設定與操作:圖文選單支援flex message (彈性樣板訊息) 、template message、貼圖訊息等...,打造超厲害LINE Bot 圖文選單!