# 圖文選單 **圖文選單** 可以提供給 **LINE** 的聊天機器人使用。 尺寸固定為 2 種尺寸，分別是 **2500 \* 1686** 或 **2500 \* 843**（單位**px**）。 選單上可以建立多組按鈕區塊，根據需求自行決定按鈕區塊的位置與尺寸，每個按鈕區塊可以設定不同的行為。 行為共有 3 種類型，分別是：**文字、網址、回傳資料**，當用戶點選按鈕區塊時就會觸發設定的行為。 - - **文字**： 是指用戶點選時會幫用戶說一句話，通常會搭配 流程編輯器 定義的文字指令，讓用戶只需在圖文選單上點選就可以直接下達指令，省去用戶手動輸入指令的困擾。 - **網址**： 是指要導向的網頁位置，用戶點選會直接開啟瀏覽器瀏覽網址的內容。 - **回傳資料(Postback)**： 圖文選單的按鈕區塊若選擇此種類型，當使用者點選該區塊將會觸發 **起始點 - Postback 事件。** 共有 **回傳內容** 與 **文字內容** 兩個部分可以設定，其中 **回傳內容** 為**必填**欄位。 當觸發 **Postback 事件** 後，會將此回傳內容發送至所有的 **起始點 - Postback 事件**，因此可以做為相對隱私的資料夾帶方式使用。 **文字內容** 為選填，若有輸入**文字內容**，觸發區塊按鈕時使用者本人會說出該內容，但需要注意此文字訊息並非說話的文字訊息，所以並無法觸發 **起始點 - 接收文字 事件**。 ##### **介面** [![0_介面.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/CUYLWYrHGRNGNpTS-0_%E4%BB%8B%E9%9D%A2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/CUYLWYrHGRNGNpTS-0_%E4%BB%8B%E9%9D%A2.png) 初次進入圖文選單的畫面。 [![1_選擇機器人.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/yY2afPo3WIIJx58M-1_%E9%81%B8%E6%93%87%E6%A9%9F%E5%99%A8%E4%BA%BA.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/yY2afPo3WIIJx58M-1_%E9%81%B8%E6%93%87%E6%A9%9F%E5%99%A8%E4%BA%BA.png) 先選擇圖文選單要建立的機器人。 [![2_新增圖文選單.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/b93LUAM5gNsu4pcj-2_%E6%96%B0%E5%A2%9E%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/b93LUAM5gNsu4pcj-2_%E6%96%B0%E5%A2%9E%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE.png) 選擇好機器人後，按下 **新增圖文選單**。 [![3_圖文選單_設定名稱.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/e6sqqvn87ST7C5sP-3_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E5%90%8D%E7%A8%B1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/e6sqqvn87ST7C5sP-3_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E5%90%8D%E7%A8%B1.png) 進到建立選單的介面。 [![3_圖文選單_設定名稱.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/eoUrkjUKFzD03jnm-3_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E5%90%8D%E7%A8%B1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/eoUrkjUKFzD03jnm-3_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E5%90%8D%E7%A8%B1.png) 選單名稱是指在 **GOSU BAR** 後台中顯示的名稱，用戶並不會看到此名稱。 命名建議容易辨識好理解，將來若選單數量較多會比較好管理維護。 [![3_圖文選單_選擇尺寸.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/HTCkUNDCRrw787Km-3_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E9%81%B8%E6%93%87%E5%B0%BA%E5%AF%B8.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/HTCkUNDCRrw787Km-3_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E9%81%B8%E6%93%87%E5%B0%BA%E5%AF%B8.png) 選擇選單的尺寸，僅有 **2** 種尺寸可以選擇，分別是 **2500 \* 1686** 或 **2500 \* 843**（單位px）。 [![4_圖文選單_設定選單提示文字.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/nMTToji1NCHhy4b8-4_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E9%81%B8%E5%96%AE%E6%8F%90%E7%A4%BA%E6%96%87%E5%AD%97.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/nMTToji1NCHhy4b8-4_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E9%81%B8%E5%96%AE%E6%8F%90%E7%A4%BA%E6%96%87%E5%AD%97.png) 選單提示是指當用戶以手機使用機器人時，介面底部顯示的提示文字，適合的名稱有助於引導使用者使用選單。 [![5_圖文選單_設定選單是否預設展開.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/Bvr0kqVALab9tLOq-5_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E9%81%B8%E5%96%AE%E6%98%AF%E5%90%A6%E9%A0%90%E8%A8%AD%E5%B1%95%E9%96%8B.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/Bvr0kqVALab9tLOq-5_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E9%81%B8%E5%96%AE%E6%98%AF%E5%90%A6%E9%A0%90%E8%A8%AD%E5%B1%95%E9%96%8B.png) 設定是否要 預設展開 選單，若勾選啟用，則使用者開起機器人時選單會自動展開顯示；反之，不會展開顯示。 [![6_圖文選單_上傳選單圖.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/HBqUvkkLzkmKupwC-6_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E4%B8%8A%E5%82%B3%E9%81%B8%E5%96%AE%E5%9C%96.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/HBqUvkkLzkmKupwC-6_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E4%B8%8A%E5%82%B3%E9%81%B8%E5%96%AE%E5%9C%96.png) 根據需求自行上傳需要的圖片作為底圖，圖片尺寸要符合選擇的尺寸，且**圖片檔案大小必須小於 1MB**。 [![座標２.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/crh9HgbTFfnLnsmh-%E5%BA%A7%E6%A8%99%EF%BC%92.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/crh9HgbTFfnLnsmh-%E5%BA%A7%E6%A8%99%EF%BC%92.png) 按鈕區塊預設劃分成6等分，可以根據需求新增、刪減。 按鈕區塊的位置是以直角座標系進行設定，以上圖 2500 \* 1686 （px）的尺寸為例，圖文選單左上角的座標為（0,0），右下角座標為（2500,1686），X軸向右，Y軸向下。 設定 按鈕區塊 的方法，除了直接透過座標計算位置來設定，也可以直接點選 按鈕區塊 拖拉調整位置跟尺寸。 [![7_圖文選單_設定按鈕區塊.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/qwCEjzK4xc7DNVl0-7_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E6%8C%89%E9%88%95%E5%8D%80%E5%A1%8A.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/qwCEjzK4xc7DNVl0-7_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E6%8C%89%E9%88%95%E5%8D%80%E5%A1%8A.png) 以上圖為例，選單有兩個按鈕區塊。 區塊1 為文字，用戶點選後會幫用戶說一句話「GOSU BAR 真不錯！」。 區塊2 為網址，用戶點選後會開啟瀏覽器至 Google 搜尋 。 [![8_選單建立完成.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/4lJ7DfsncMYksdRk-8_%E9%81%B8%E5%96%AE%E5%BB%BA%E7%AB%8B%E5%AE%8C%E6%88%90.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/4lJ7DfsncMYksdRk-8_%E9%81%B8%E5%96%AE%E5%BB%BA%E7%AB%8B%E5%AE%8C%E6%88%90.png) 選單建立完成就會顯示在圖文選單清單中。 [![9_選單建立副本.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/bQIqxdNRb8BbFYdz-9_%E9%81%B8%E5%96%AE%E5%BB%BA%E7%AB%8B%E5%89%AF%E6%9C%AC.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/bQIqxdNRb8BbFYdz-9_%E9%81%B8%E5%96%AE%E5%BB%BA%E7%AB%8B%E5%89%AF%E6%9C%AC.png) 有時可能需要將圖文選單複製給其他機器人使用，或是想要複製副本修改內容另作他用，這時候可以按下建立副本。 [![10_選單建立副本-2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/E3KXPqq9QimLaxBb-10_%E9%81%B8%E5%96%AE%E5%BB%BA%E7%AB%8B%E5%89%AF%E6%9C%AC-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/E3KXPqq9QimLaxBb-10_%E9%81%B8%E5%96%AE%E5%BB%BA%E7%AB%8B%E5%89%AF%E6%9C%AC-2.png) 建立副本的介面，基本上與建立選單相同，差別在於多了機器人來源可以選擇，可以維持在原本的機器人建立副本，也可以建立副本給其他機器人使用。