> For the complete documentation index, see [llms.txt](https://docs.wpsite.pro/wp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wpsite.pro/wp/jin-jie-yan-shen-gong-neng/chuan-jie-salesmartly-ke-fu-dui-hua-shi-chuang.md).

# 串接SaleSmartly客服對話視窗

[95折申請連結](https://share.salesmartly.com/xk78nV)

## 網站右下角對話框

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2Fh2yp62bGmM9Rm2cKj3cw%2Fimage.png?alt=media&amp;token=dfd9c38e-8737-4ebf-b97e-e403232990a9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FyYHGzMrrWNo19tdK7Ib5%2Fimage.png?alt=media&amp;token=e0556dbb-6410-4300-8d99-22e5a5011a60" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

### 建立聊天插件後，複製程式碼

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FNd4QMOz06I0bYEiisfRF%2Fimage.png?alt=media&amp;token=e459bad2-da5e-43f9-9924-4d867c542e2c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FQ1bBTVWbCZebEImqds94%2Fimage.png?alt=media&amp;token=ac1d52e6-084c-46af-8554-096276a767ab" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### 安裝好能自訂 Javascript 的外掛後，把程式碼放進去

[安裝外掛方法](/wp/wordpress-kuai-su-ru-men/an-zhuang-wai-gua.md)

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2Fpb6CbWjcyaGNLRVTZzDG%2Fimage.png?alt=media&amp;token=f5fa3b88-925f-436b-9f8f-3f846f509558" alt=""><figcaption><p>*此處以 Simple Custom CSS and JS 為例</p></figcaption></figure>
{% endstep %}
{% endstepper %}

## 串接官方Line

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FZyUo00VgnJb1m2SiH2Mw%2Fimage.png?alt=media&amp;token=9e99753b-9d56-400e-bb37-b848823d2f42" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FpxchOy6QKehME72qvtTV%2Fimage.png?alt=media&amp;token=b9605dcd-6f36-4313-a4e4-e2c9278e32e4" alt=""><figcaption></figcaption></figure>

### 1# 添加Line到集成，並輸入Channel資訊

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FTIzSn5dRZgPSlHXaso6D%2Fimage.png?alt=media&amp;token=6cc15376-f3e5-4529-bb00-addf5fc4f602" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FGYQId0ZY5oDf2nmpFn6I%2Fimage.png?alt=media&amp;token=c6a2775c-d8f1-496c-b2f7-521e284e9ed2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FGSuQsmpFeNbRWlhzpC2s%2Fimage.png?alt=media&amp;token=2e875d97-79a5-4003-9f0b-f92f15cdd048" alt=""><figcaption><p>Channel資訊位置</p></figcaption></figure>

{% hint style="info" %}
如果以前沒設定過，會出現"創建Messaging API"按紐，按它並照流程設定
{% endhint %}

### 2# 設定Line回應設定

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FWwrjeQ98y5a7GXYtH8pQ%2Fimage.png?alt=media&amp;token=46999dca-7bdd-42c7-b48f-5d26cc1da5b4" alt=""><figcaption></figcaption></figure>

### 3# 前往 LINE Developers 開啟 Use Webhook

前往[ LINE Developers 頁面](https://developers.LINE.biz/console)

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2Fzqyg8VR8Yvo9lbvWdu5R%2Fimage.png?alt=media&amp;token=65e797d4-d9a1-4077-8a42-04b754622dcc" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2F1JJ9zoqrQgUIpSK88aHX%2Fimage.png?alt=media&amp;token=691bdf33-340a-449b-a893-740a8a8071fd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FYkN8hHh4SNDVFDZP5DF9%2Fimage.png?alt=media&amp;token=097a8fe9-50d3-4592-9ffd-43b764d4912e" alt=""><figcaption></figcaption></figure>

### 4# 在網站上顯示

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2Fyl5XBDbK0Qw6wZn9OZcx%2Fimage.png?alt=media&amp;token=f0993abc-1ff1-4ac6-91fe-ef898c0f48c7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FS0OXftxqjVecaxIaPLkn%2Fimage.png?alt=media&amp;token=d0aee362-b73b-4c44-b48f-b5700f0b9611" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FpJyeNm6iIwmzwkFzaRhS%2Fimage.png?alt=media&amp;token=8dd9d42d-a016-412a-867e-aaebf41ddc80" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
如果不需知道訪客瀏覽連結，不用進行後面步驟
{% endhint %}

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FO1Qy72hV2aY2FYJdmkzD%2Fimage.png?alt=media&amp;token=3ed180a4-cb2a-4f03-a511-cb3697671a35" alt=""><figcaption></figcaption></figure>

### 5# 建立LINE Login

前往[ LINE Developers 頁面](https://developers.LINE.biz/console)

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FMyeRPWgjYuy9HtE281iy%2Fimage.png?alt=media&amp;token=3bc38df8-2139-4336-868d-5373e8de63e3" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FkLBmV0KoAfKiAektpZpX%2Fimage.png?alt=media&amp;token=61d3bdb4-ec85-4df9-9b17-32467a7637ad" alt=""><figcaption></figcaption></figure>

* Region to provide the service：Taiwan
* Company or owner's country or region：Taiwan
* Channel icon (非必填)：放你的logo
* Channel name：填頻道名稱
* Channel description：填頻道簡介
* App types：Web app
* Email address：填你的mail
* Privacy policy URL (非必填)：填網站的"隱私權政策"頁面連結
* Terms of use URL (非必填)：填網站的"服務條款"頁面連結

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FlNtT8kbC2iWgSu3MSXhg%2Fimage.png?alt=media&amp;token=355cb2fb-63e1-4e54-a26b-7a6288701e9f" alt=""><figcaption></figcaption></figure>

Callback URL：<https://api.salesmartly.com/client/line/callback>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FML8bJDo984LsaBpxWakN%2Fimage.png?alt=media&amp;token=6c4b9f84-c46c-4300-9448-156c8b572699" alt=""><figcaption></figcaption></figure>

### 6# 創建LIFF app

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2F0RmkACHCHCKoJwHKMRIl%2Fimage.png?alt=media&amp;token=d6e8f9c9-f743-4634-b904-cdf50dbc0a53" alt=""><figcaption></figcaption></figure>

* LIFF app name：頻道名稱
* Size：Full
* Endpoint URL：<https://api.salesmartly.com/client/line/auth-redirect>
* Scopes：全打勾
* Add friend option：On
* Scan QR：打開

### 7# 把資料填到salesmartly

<div data-full-width="false"><figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2F0GIR1Pbv9wYhz8vf2dQZ%2Fimage.png?alt=media&amp;token=8385f5c9-440d-4159-9631-334b8a9c1142" alt="" width="538"><figcaption></figcaption></figure></div>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FmSDcdvLrbgUuj9n7hoWc%2Fimage.png?alt=media&amp;token=696ac0b2-1879-42e9-afec-1aa727475ca8" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FTovpTR9hsY6Xze6eq94U%2Fimage.png?alt=media&amp;token=cf37f74b-3bf0-4368-83fa-00ed6f73ff2d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836951904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGE4hNw0xY77aucnF0eT1%2Fuploads%2FCKLnXrJdUwADW2VTHkNF%2Fimage.png?alt=media&amp;token=8e4efa6b-cb80-4aeb-a2da-249bc076cfaa" alt=""><figcaption></figcaption></figure>