連接 LINE 訊息功能整合

4.CHT_______________.png

*整合前請注意:若您是要設定「LINE 帳號可註冊/登入商店會員」功能,請直接點此 FAQ連結

SHOPLINE 提供整合 LINE 服務,透過串聯 LINE API,讓店家能匯集線上、線下的消費行為,有效擴展訂單來源以及行動行銷市場,將更多有使用 LINE 的消費者帶入成為商店會員。

當店家連結 LINE 帳號之後,支援使用以下功能:

*注意:以上功能發送的訊息都將以付費訊息發送,會佔用 LINE 每月免費訊息的額度。

OQm5t0GO39jMkEs6I-ohEApHRFfq-yzxL7fYTdOJqOCP_DT71QMoGeK0vjAqQ48YtpYnQ9YeRBn8aZVkBRN1NBEh2r9FvNXxZ0TBw3StfFrL5YtkGMAG21WkzcS6f9WvyLWd3Hyh.png

 

【設定流程 共十四步驟】

步驟一:確認商店計畫方案,開始使用 

進入商店後台右上角「你好,OOO」>「我的訂閱紀錄」查看商店的計畫方案和模組。

  1. 如果您看到的畫面如下圖,頁面內容中有「開店方案」及「功能模組」請先確認您的商店是否有「網路開店/社群購物」方案。有的話可以前往步驟二進行設定。
    CHT_Step1-1.png

  2. 如果您看到的畫面如下圖,頁面內容中的「計畫」為基本計畫、高階計畫、豪華計畫、O2O、企業旗艦計畫。請您先確認您的商店是否為「O2O/企業旗艦」計畫。
    CHT_Step1-2.png

    如果是的話請進入左側目錄選單中的「擴充功能」>「擴充功能商店」來安裝功能。

    mceclip1.png

步驟二

前往「LINE Official Account Manager」創建 LINE 官方帳號,或以有「管理員權限」的 LINE 個人帳號 / 商用帳號 登入。如為 LINE@ 帳號,請先透過 LINE Official Account Manager 後台進行升級 LINE 流程,才能串接服務並保留原先的追蹤者。

*注意:帳號由 LINE@ 轉換為 LINE 官方帳號後無法復原,用戶將無法操作 LINE@ 服務電腦版及應用程式版,需至新版的 LINE Official Account Manager 電腦版及應用程式版使用。


步驟三

登入 LINE Official Account Manager 後,先點按頁面右側的「設定」,再點選左側選單的「Messaging API > 啟用 Messaging API」。

DkgUvVAgppzm2DtD-gAthsUa5AXl28HmrzYAqobxS3wexnwLHZmN1b5u8RdtmdQ-uJtCQCNi2FsSqQEDp3y0bjpbKbGRKtEf5twnYwa1lUeteUSHs9YFB8QRYtpmrljLMmu7RpNv.png

1.png

 

選擇「建立服務提供者」並輸入「您的公司名稱」選取後點按下方「同意」並「確定」啟用 Messaging API。

provider.png

 

步驟四

啟用 Messaging API 後可由頁面點擊下方「LINE Developers」連結前往 LINE Developers 頁面右上方帳號圖示 > 點選「Provider List」選取剛剛建立的 Provider > 就會看到已經建立好的「Messaging API」。

___2020-09-17___12_28_21.png

mceclip0.png

 

步驟五

點按進入 Messaging API 頁面,在 Basic Settings 分頁中找到 Channel ID 及 Channel secret ,確認與 LINE Official Account Manager 中的值相同(如下圖),並顯示在 LINE Official Account Manager 設定之 APP Icon、名稱、敘述、商店類別及電郵。

mceclip1.png

mceclip2.png

mceclip14.png


步驟六

接下來到 SHOPLINE 商店後台「第三方服務整合」下方的「LINE」進入設定頁面,並點擊「連接 LINE 服務」右方的「連接」。

-DoMtZ9QjjggnOE7UWrWdAL3GkF-XSNyZ_LvnuSvI45vrdJwOJ1u84hmIdtmmoHN1x7rQsWTPD8fsoI_jGaXyPwqWC6G2Pyii6WKYB2jWed0GaFrtUSeaHBAE5abaJIoF8gp6waR.png

 

步驟七

進入連結設定頁面後,請按照以下步驟進行。

  1. 請複製「Webhook URL」
    6.png

  2. 回到 LINE Developers 後台的「Messaging API channel > Messaging API」分頁,下滑找到「Webhook URL」貼上,記得在最前方補上「https://」,並點選「Update」。
    7.png
    8.png

  3. 完成後等候約 1~2 秒出現「Verify」,點擊後務必確認看到 Success 字樣出現。

    __LINE-19.png
    __LINE-20.png

  4. 接下來到「LINE Official Account Manager」填入一樣的 Webhook URL,記得在最前方補上「https://」並按下「儲存」,右上角出現「已儲存」就完成 Webhook URL 設定囉!
    9.png

 

*注意
- 如果 LINE 回應模式若是選擇「聊天」,則會沒有 Edit 按鈕,並且會顯示「Note:If the response mode of your bot is "Chat", you cannot enable webhooks.」,請先將回應模式改回「聊天機器人」模式後,再稍等數分鐘後,重新進入該頁面進行操作。
mceclip0.png

- 若您要使用一對一訊息功能,這裡請選擇「聊天機器人模式」。若您沒有要使用一對一訊息功能,請使用「聊天訊息模式」。一對一訊息串接步驟請點 此連結 參考詳細設定說明。

 

步驟八

接著回到 LINE Developers 後台的 Messaging API channel 將設定值填入商店後台。

  1. 在「Messaging API channel > Basic Settings」分頁找到「Channel ID」及「Channel secret」。
    5.png
    __LINE-9.png

  2. 分別複製貼上至 SHOPLINE 後台對應欄位。
    __LINE-12.png

  3. 在「Messaging API channel > Messaging API」分頁找到「Channel access token(long-lived)」,點擊「Issue 」按鈕,將會出現 Channel Access Token 資料。
    2.png
    3.png

  4. 複製貼上 Token 資料至 SHOPLINE 後台「Channel Access Token」欄位。
    __LINE-16.png

 

設定完「Messaging API channel」的資訊後,接著要設定「LINE Login channel」資訊。

 

步驟九

建立 LINE Login Channel 讓顧客加入會員時可以訂閱您的 LINE@。

__LINE.png

*注意
- 若已設定過SHOPLINE後台「開啟 LINE 註冊及登入」功能,可跳過此步驟直接前往步驟十一。

- 若尚未設定過「LINE 註冊及登入」,可至 LINE developer 在 Messaging API channel 的同一個 provider 底下建立 LINE login channel ,請參考此篇「LINE 帳號快速註冊/登入商店會員|顧客登入設定」進行設定,完成後才能繼續步驟十。

 

步驟十

在「LINE Login channel > Basic settings」分頁複製「Channel ID」及「Channel secret」,並於 SHOPLINE 後台相對應的欄位貼上,務必留意貼上於後台的設定值正確。

13.png

14.png

15.png
16.png

 

步驟十一

再來是取得 Callback URL。請先複製 SHOPLINE 後台的 Callback URL,回到「LINE Login Channel > LINE Login」分頁並開啟 Web app 按鈕,點選 Callback URL 下方的「Edit」按鈕,再將 URL 貼至於此,最後點選「Update」。

__LINE-29.png
17.png

*注意:若未完成此步驟,顧客在前台使用 LINE 帳號註冊/登入時會看到「400」的錯誤提示

 

步驟十二

接著要取得您的 LINE@ ID。進入「LINE Login Channel > Basic settings」分頁,下滑找到 Linked OA 點擊「Edit」按鈕,選擇您的 Message API channel 後點擊「Update」按鈕。
17.png
18.png

 

完成後,會顯示您的 LINE@ ID(@ 後方的文字,不含 / 以後的字),以上方 ID 舉例:633nofwg,請您將您的原始 ID (非專屬 ID)回填至 SHOPLINE 後台對應欄位。

mceclip4.png

 

步驟十三

加油~來到最後一哩路了!在 LINE Login Channel 頁面中可以看到「Developing」的狀態,請點擊後選「Publish」,接著狀態會更新為「Published」。

20.png

21.png

22.png

步驟十四

回到SHOPLINE後台並點擊右下角「連接」,右上角將出現「成功連接LINE」! 恭喜您完成設定!

Lfu_KWg7fcjwK5Tfk20CYUWMZZU3fBSB0rTlBivA0zZF85WxrfPQHB8eoS3lxFCavfjkYgT7TnZqNDRI4Kqxpt593FJPw5HRd_La_CZb_PMA936AmzRKM2TpkdGKWmLQbKwzUbzY.pngQdbi1BmOoAJOv4ne-N2FtsBEhlKYInpXWtmevFyqt-Y9UFOBcxgSYMNnHpA3ml_GLgOyFz4vvX4f-80Fc-e9z_6Q09SvlIOVMNuH0VwhWV8LZW7mkW_3uk6qspDbWssB4KL4WRYq.png 

 

常見問題

點擊「連接」後如果有出現「連接 LINE Login API 發生問題」的提示訊息,請確認在後台的 Channel Secret(LINE login)填入的數值,若出現「*」字號,請回到 步驟十 依說明將相關數值正確填入。

image3.png

 

 

 

 

 

還有其他問題?提交請求

評論