Ulink後台串接LINE OA

1. 登入您的集客專屬後台


當你訂閱Ulink雲服務後, 就會提供如下資訊

1. 您的專屬後台: https://專屬網址/oaadmin/
2. 預設登入帳號: admin
3. 預設登入密碼: Epower123


1. 請開啟一般瀏覽器輸入您專屬網址, 會出現如下登入畫面

➔ 輸入預設帳號與密碼 ➔ 登入
login_01.png


2. 登入後台後請點選 ➔ 串接設定

建議串接設定順序

1. LINE Messaging API
2. LINE Login API
3. LINE Notify API
4. 圖文選單模組

雖然這些設定很多, 但只要做一次設定, 您就會發現你的LINE OA是一個很強大的小幫手機器人, 請繼續看下去讓你收穫滿滿, 如果你用心學會了也歡迎成為我們的種子合作顧問.
Uplogin-02.png

2. 如何申請LINE OA官方帳號


1. 申請LINE官方帳號連結 https://account.line.biz/login
進入 LINE Business ID ➔ 建立帳號
biz_01.png

2. 建議使用獨立的電子帳號來註冊比較好, 不要綁定在某位員工LINE的手機
點選 ➔ 使用電子郵件帳號註冊
biz_02.png


3. 輸入您專屬信箱帳號 ➔ 點傳送註冊連結 就會發送啟用連結到此信箱
biz_03.png


4. 前往您的郵件信箱查看郵件

biz_04.png
5. 就會發現一封 LINE商用ID標題 ➔ 請點選 ➔ 前往註冊連結按鈕

biz_05.png



6. 輸入您的姓名與專屬密碼, 密碼要記住下次登入會使用

biz_06.png


7. 請點選 ➔ 完成, 這樣就完成專屬帳號申請了, 以後就可以email及密碼方式登入很方便.
biz_07.png

8. 請點選 ➔ 前往服務, 就可以開始幫不同客戶建立很多的LINE OA不須任何費用喔, 建議一個email規劃建100個客戶就好, 滿了再用新的email申請.

biz_08.png
9. 請點選 ➔ 建立LINE官方帳號, 開始建立第一個LINE OA官方帳號


biz_08.png


10. 請輸入相關資訊

biz_10.png


11. 確認輸入內容 ➔ 完成

biz_11.png


12. 請點選 ➔ 稍後進行認證, 就會進入LINE官方帳號後台, 限制免費訊息推播200則, 其餘免費使用.


biz_12.png

1. 請點選 ➔ 右上設定, 點選「前往回應設定頁面」, 關閉加入好友的歡迎訊息。
 ➔ 聊天的回應方式-關閉回應時間 

hellow.png

2. 開啟手動聊天

api_linelogin_29.png

3. LINE Messaging API


當我們擁有LINE OA官方帳號後, 就可以進入串接步驟, 讓你的LINE動起來就像是一個機器人幫您處理大小事, 高效率極低成本.




1. 點選 ➔ 編輯, 我們要開始串接了要跟上喔~

api_01.png



2. 點選 ➔ 帳號設定
api_02.png


3. 點選選單 ➔ Messaging API ➔ 啟用 Messaging API


api_03.png


4. 點選您建立服務商名稱 ➔ 同意


api_04.png

5. 非必填直接點選 ➔ 確定
biz_18.png

6. 點選 ➔ 確定
api_06.png


7. 點選 ➔ Webhook網址 ➔ 貼上您專屬網址 ➔ 儲存
https://更改成您專屬網址/oaadmin/api/callback/
api_07.png

8. 點選 ➔ LINE Developers, 進入LINE開發者後台
api_08.png


9. 點選 ➔ /Start Console > 連結

api_10.png


10. 點選左邊(服務提供者名稱) ➔ 點選 Messaging API
準備取得 LINE Messaging API key 共3組
1. Channel ID
2. Channel secret
3. Channel access token


biz_22.png


11. 複製 Channel ID ➔ Channel icon 後續可隨時更換圖片先不設定


api_11.png

12. 前往Ulink專屬後台 ➔ 貼上Channel ID, 還有2組Key, 可以一組一組複製貼上或一次找集都可以

api_12.png


13. 回到LINE Developers網站 ➔ 複製 Channel secret ➔ 回到Ulink專屬後台 ➔ 貼上Channel secret

api_13.png

14. 點選 Messaging API
api_14.png


15. 點選「Verify」系統將會確認串街的網址是否正確 ➔ 點選OK, 此步驟務必執行確認一下

api_15.png

16. 開啟「Use webhookWebhook」, 一定要開啟喔很多人都忘了開, 機器人就不會動了

api_16.png

17. 複製 Channel access token

api_17.png

18. 前往Ulink專屬後台 ➔ 貼上Channel access token ➔ 按確認 ➔ 恭喜您已完成Messaging API串接, 注意這個複製貼上的步驟, 前後不要有空格.

api_18.png


4. LINE Login API


LINE除了開放強大的Messaging API功能, 還推出Login API功能, 讓開發商可以透過網頁技術開發很多商業應用服務, 可以取代 90%原生APP功能性, 也拉近與消費者體驗距離.
這個串接步驟流程有點多, 要細心的看

準備取得 LINE Login API key 共5組

1. Channel ID
2. Channel secret
3. LIFF ID Full
4. LIFF ID Tall
5. LIFF ID Compact
1. 進入LINE Developers https://developers.line.biz/console/
➔ 點選左邊 ( 服務提供者名稱 ) 

api_linelogin_01.png
2. 點選 ➔ { +Create a new channel } ➔ 選擇 { LINE Login }
api_linelogin_02.png

3. 將 { Region to provide the service } 、{ Company or owner's country or region }
➔ 設定Taiwan

 api_linelogin_03.png

4. 輸入相關資訊, 後續都可以再修改
1. 上傳Logo圖片
2. 輸入頻道名稱, 中英文皆可
3. 輸入頻道描述, 中英文皆可
api_linelogin_04.png
5. 設定 App types
1. web app ➔ 句選啟用
2. Mobile app ➔ 句選啟用
api_linelogin_05.png
6. 勾選同意 { I have read and agree to the LINE Developers Agreement } ➔ 按 Create

api_linelogin_06.png
7. 點選 ➔ Developing ➔ 選擇 { Publish }, 將服務開放使用

api_linelogin_07.png


8. Channel ID 複製 ➔ 前往您Ulink專屬後台 ➔ 串接設定 ➔ LINE Login API ➔ 貼上 Channel ID

api_linelogin_08.png
9. 複製 「Channel secret」➔ 前往您Ulink專屬後台 ➔ 串接設定 ➔ LINE Login API
   ➔ 貼上 Channel Secret
api_linelogin_10.png



10. Basic settings提供會員加入LINE OA的關鍵頁面

在Add friend option請選擇api所串接的LINE OA ➔ 點Update

IMG_20240619_215956.png

 

 

 點選 LIFF ➔ 選擇 ➔ Add, 先新增第一筆 (網頁高度是100％全版), 步驟比較多要仔細一點
api_linelogin_13.png


11. 輸入相關資訊

1. LIFF app name ➔ 輸入webapp1
2. 在 Size ➔ 點選 Full
3. 在 Endpoint URL ➔ 輸入網址
➔ { https://更改成您專屬網址/oaadmin/api/webapp/1/ }

api_linelogin_14.png


4. 勾選 Scopes ➔ profile、chat_message.write、openid
5. Add friend option ➔ On (Aggressive)
6. Options全開 ➔ Scan QR、Module mode
➔ 按 Add
 api_linelogin_15.png 
13. 開啟 shareTargetPicker ➔ 勾選 { I have read.... } ➔ 選擇 Enable
 api_linelogin_17.png  
14. 複製 webapp1 ➔ LIFF ID
api_linelogin_18.png
15. 回到您Ulink專屬後台貼上 ➔ 貼上 webapp1 LIFF ID
api_linelogin_19.png

16. 回到 LINE Developers 按 ➔  Add, 再新增第2筆 (網頁高度是80％比率)

api_linelogin_24.png
api_linelogin_20.png
17. 輸入相關資訊

1. LIFF app name ➔ 輸入webapp2
2. 在 Size ➔ 點選 Tall
3. 在 Endpoint URL ➔ { https://更改成您專屬網址/oaadmin/api/webapp/2/ }
4. 勾選 Scopes ➔ profile、chat_message.write、openid
5. Add friend option ➔ On (Aggressive)
6. Options全開 ➔ Scan QR、Module mode
➔ 按 Add
api_linelogin_21.png
18. 複製 webapp2 LIFF ID ➔ 前往您Ulink專屬後台 ➔ 串接設定 ➔ LINE Login API
 api_linelogin_22.png
19. 回到Ulink專屬後台 ➔ 貼上 LIFF ID Tall

api_linelogin_23.png
20. 回到 LINE Developers 按 ➔  Add, 再新增第3筆 (網頁高度是50％比率)
api_linelogin_24.png
21. 新增webapp3

api_linelogin_21-2.png
輸入相關資訊
1. LIFF app name ➔ 輸入webapp2
2. 在 Size ➔ 點選 Compact
3. 在 Endpoint URL ➔ { https://更改成您專屬網址/oaadmin/api/webapp/2/ }
4. 勾選 Scopes ➔ profile、chat_message.write、openid
5. Add friend option ➔ On (Aggressive)一定要選這個要不然你的好友進不來
6. Options全開 ➔ Scan QR、Module mode
➔ 按 Add

api_linelogin_26.png

22. 複製 webapp3 LIFF ID
api_linelogin_27.png

23. 前往您Ulink專屬後台 ➔ 串接設定 ➔ LINE Login API ➔ 貼上 ID Compact ➔ 按確定
api_linelogin_28.png

24. 完成 LINE Login API 串接 

5. LINE Notify API

LINE官方推出一個免費通知服務, 跟LINE OA官方帳號一點關係都沒有, 但是一個可以幫店家省大錢, 團隊當然要把這麼好的服務整合給店家使用,

1. 對消費者要自行綁定, 我們可以提供一些優惠或引導方式來節省訊息推播的費用
2. 對店家管理者綁定後, 所有訂單,預約,報名通,系統..通知, 一個月省下上千元推播費用
這個 LINE Notify 串接跟之前比就簡單多了


1. 進入LINE Notify 連結 https://notify-bot.line.me/zh_TW/ ➔ 登入

這個帳號無法前面教的使用獨立申請的 email 帳號登入( 除非此信箱與LINE 手機有綁定) ,
 要有LINE手機帳號才能登入

notify_01.png



2. 點選右上角 ➔ 帳戶名稱下拉選單 ➔ 管理登錄服務 

notify_02.png


3. 點選登入服務notify_03.png

4. 依序填入資料訊息 ➔ 輸入網址 ➔ 按 同意並前往下一步

主要設定是最下面的 Ca 網址要對, 其他資訊後續都可以修改的
➔ https://您專屬後台網址/oaadmin/api/webapp/1/notify/index.php
notify_04.pngnotify_05.png 


5. 按 登錄
notify_06.png



6. 前往 ➔ ( 步驟5.輸入 ) 電子郵件帳號 ➔ 點選Notify信箱 ➔ 按 { LINE Notify註冊用網址 }

notify_10.png

7. 電子郵件認證完成 ➔ 前往服務一覽
notify_12.png
8. 按 LINE Notify 新增帳號
notify_13.png  

9. 主要複製兩個 Key, 然後複製並貼上到Ulink專屬後台, 就整合完成了

1. Client ID ➔ 前往Ulink專屬後台 ➔ 串接設定 ➔ LINE Notify API ➔ 貼上Channel ID
2. Client Secret ➔ 前往Ulink專屬後台 ➔ 串接設定 ➔ LINE Notify API ➔ 貼上Channel Secret

notify_14.png


10. 按確定 ➔ 完成 LINE Notify API 串接

notify_15.png

6. 圖文選單功能


圖文選單可以說是店家品牌形象, 可以針對您的品牌形象設計出獨一無二的風格

以下步驟先學會一頁式設定步驟, 後續再深入幫店家規劃第二頁...




1. 選單說明：選單分頁依據訂閱系統功能數量，至多可分為三頁式，下方展示各分頁設計畫面參考。


richmenu_04.png



2. 製作 1200x810 像素的選單
    八顆按鈕英文的排序會是
    ABCD
    EFGH
下方為6顆按鈕相對應按鈕位置

richmenu_02.png



3. 基本設定 ➔ 圖文選單模組 ➔ 向右滑動點選 ➔ 修改

richmenu_05.png


richmenu_01.png



4. 請選擇 ➔ 重新輸入選單名稱 ➔ 按鈕對應的系統功能或自訂連結 ➔ 上傳圖文選單png ➔ 確定

richmenu_03.png


５. 一頁式選單完成，若選單不只一頁 ➔ 請點選操作 ➔「+ 新增」
➔ 輸入選單名稱與選單圖片
richmenu_06.png
6. 點選修改步驟同 4. ➔ 若還有第三張選單 ➔ 請點選「操作」➔ 步驟同 5.
richmenu_07.png

7. 最後無論幾頁選單，一定要點 ➔ 選單一(最下面)的修改 ➔ 按確認
    系統會在前台 ( LINE OA ) 呈現最後修改的選單頁面

richmenu_08.png


8. 完成 ➔ 選單於LINE OA前台畫面展示 ( 一頁式、兩頁式、三頁式 )                    

richmenu_09.png

7. 如何曝光LINE官方帳號加好友

LINE OA加好友有兩種方式

1. LINE專屬加好友連結
2. 列印出實體的QR扣立牌



1. 加入好友連結或QR扣

front desk_01.png


2. 這邊有兩種方式加好友, LINE官方很貼心幫我們設計好QR扣下載圖檔
1. 點選建立網址, 就會產品加好友的連結, 可以傳給所有的朋友客戶
2. 選點建立加入好友行動條碼, 就會出現QR扣的下載

front desk_02.png


3. 使用手機LINE掃 ➔ 點選連結加入 ➔ 按 {加入好友 } ➔按 { 聊天 }

front desk_03.png

8.製作圖文選單

圖文選單可分為一頁、二頁、三頁式

1.提供選單底圖一頁式(底圖為白色請點右鍵另存圖案)：

top1.png

 
2.提供選單底圖兩頁式：

top2_01.png

top2_02.png

 

3.提供選單底圖三頁式：

top3_01.png

top3_02.png

top3_03.png

 

4.每頁選單擁有6項功能按鈕，請輸入英文搜圖，ICON建議選擇黑色的，複製ICON

ICON網站連結：

https://www.flaticon.com/search?word=introduce&color=black

richmenu_10.png

5.使用「CANVA」連結https://www.canva.com/
點選「上傳」選單底圖，貼上ICON，調整ICON透明度50 ％

richmenu_11.png

 

6.按「分享」➔ 按【下載】，完成

 


9. 如何開啟官方帳號授權管理

1. 點選編輯 account_01.png

2. 點「帳號設定」 account_02.png
3. 點「權限管理」➔ 點「新增管理成員」➔ 點選「發行網址」
 

account_03.png

account_04.png

account_05.png

account_06.png

10. Notify如何使用商用帳號信箱登入

首先一LINE 手機只能設定一信箱
1. LINE App  ➔  主頁  ➔  設定  ➔  我的帳號，在「電子郵件帳號」中設定E-mail

1.jpg

2.jpg

3.jpg

4.jpg

notify_02.jpg

 

 

2. 前往 Notify 登入畫面

 

notify_01.png

 

3. 登入成功

notify_03.png

 

 

 

 

 

11. 如何新增LINE OA 大頭照

  1. 準備LOGO
    檔案格式：JPG、JPEG、PNG
    檔案容量：3MB以下
    建議圖片尺寸：640px × 640pxLOGO
  2. 進入 https://manager.line.biz/
  3. 點選大頭照或編輯

    PHOTO_01.png

12. 如何更改圖文選單名稱?

1. 串接設定 ➔ 圖文選單模組 ➔ 修改 ➔ 圖文選單名稱

api_linelogin_30.png

2. 前台展示

api_richmenu_02.jpg

綠界金流串接