# 串接SaleSmartly客服對話視窗

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

## 網站右下角對話框

<figure><img src="/files/2naSRy4OzmdWs8h92kcr" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/yrO9swoZpQTYDcWti31h" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

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

<figure><img src="/files/dCNJ5itmlCGXVAD00qHA" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/46elMG2zrXD7KLVNoeq7" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

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

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

<figure><img src="/files/yNUABvp13BByT37dwURh" alt=""><figcaption><p>*此處以 Simple Custom CSS and JS 為例</p></figcaption></figure>
{% endstep %}
{% endstepper %}

## 串接官方Line

<figure><img src="/files/s3d882NVGE4gtfjgk6mO" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ACLF14zjtMc3vOm2Cwqd" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/CCNLpGMy79IryFuFMtT9" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/R4RVt0Nn4mkoN5QTMFAA" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/PFkePGCMIuD28kh1eOil" alt=""><figcaption><p>Channel資訊位置</p></figcaption></figure>

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

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

<figure><img src="/files/oFdE0fdtFxm0WQwJXbrj" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/wiyFHTyNLiblTcQq07Yl" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/PBv6qeguliXDSZM2alMa" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/fRQAMMUpPdSRpDKouCwJ" alt=""><figcaption></figcaption></figure>

### 4# 在網站上顯示

<figure><img src="/files/WrL81E36TypnPzsLGh16" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Ogv87riH7GXE84jDKnOp" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/MaHyQK3zAKmp1FI8VTOI" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/8u7Vzdcxakc5Ua78egqw" alt=""><figcaption></figcaption></figure>

### 5# 建立LINE Login

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

<figure><img src="/files/CM1mVOfPP40RwTD9UQeS" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/26nWpX2MWQcHSNy3WTHN" 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="/files/93NLN6ysaVYSXMT1QQIG" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/LhJJnIA2dvpgs8sPBXgN" alt=""><figcaption></figcaption></figure>

### 6# 創建LIFF app

<figure><img src="/files/ZiilMOMgzxEWwkba1CyJ" 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="/files/sN2TrhgklJt0aySKulce" alt="" width="538"><figcaption></figcaption></figure></div>

<figure><img src="/files/cJPw7qHrFmBoyhcUMObj" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/UQ76rS0AjCViV5r4dPlt" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Kuszbbdgs4gWYdReECpd" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wpsite.pro/wp/jin-jie-yan-shen-gong-neng/chuan-jie-salesmartly-ke-fu-dui-hua-shi-chuang.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.