> For the complete documentation index, see [llms.txt](https://help.firstline.cc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.firstline.cc/feature/chatbot/scenario/example/how-to-use-api.md).

# 如何透過 API 溝通

## 新增 Webhook 腳本

本篇文章將利用免費電影資料庫 [Open Movie Database (OMDb) ](https://www.omdbapi.com/) 所提供的 API 作為範例，建立顧客透過關鍵字查詢電影的情境。

首先，我們需至系統的「Webhook 腳本」功能進行新增，透過此功能來進行外部 API 呼叫。

### 基礎設定

而設定的範例資料如下：

* 腳本名稱：關鍵字查詢電影。
* 呼叫網址：此為當執行此腳本時，所需要呼叫的外部 API 網址，這邊輸入 <https://www.omdbapi.com/> 。
* 請求方法：這邊依照 OMDB 文件說明，方法為 `GET`

![](/files/-MZp-gqGSx1OSQa64_2b)

### 參數設定

接著位於參數 Params 區塊，依照 OMDB 文件，API 參數需傳遞以下資訊：

```javascript
http://www.omdbapi.com/?apikey=[yourkey]&s=[MovieTitle]
```

所以我們於此欄位輸入資料如下：

```javascript
{
  "apikey":  "f4*******4db",
  "s":  "{{ name }}",
  "type":  "movie"
}
```

### Callback 回呼設定

當透過 API 請求成功後，我們需將 API 回傳的所需資料進行儲存，以便在對話腳本中的流程使用，所以接著，於「Webhook 腳本」中進行新增 Callback 的設定。

![](/files/-MZp2JoQnKNNbRbznI3y)

按下新增按鈕後，我們於編輯視窗中輸入以下資訊。

* 執行動作：因用於對話腳本功能上，所以選擇「更新記憶變數」
* 參數：這邊將指定回傳的 JSON 資料要儲存到指定的變數鍵值(Key)上，而我們輸入而下，以下的代碼代表為\
  \
  **1. 將回傳的 totalResults 欄位存入 total 變數。**\
  **2. 將回傳的 Search 存入 movies 變數，並告知系統以陣列形式表示，故輸入 this\_is\_array。**

```javascript
{
  "total": "{{ totalResults }}",
  "movies": "{{ Search | this_is_array }}"
}

```

![將回傳的資料存到當前對話腳本](/files/-MZp32gG3jsuKPKTDgJQ)

到此，呼叫 API 的功能已設定完成，接著將繼續新增對話腳本。

## 新增對話腳本

依據使用情境，這邊將新增簡單的對話流程，幫讓顧客透過關鍵字查詢相關電影，我們將設定的流程區塊依序如下

<div align="center"><img src="/files/-MZp9IWbWc3_BKnPp6NG" alt=""></div>

1. **事件**：選擇「客戶訊息符合」，輸入 `*` 作為任何訊息判斷。
2. **動作**：選擇「發送訊息」，告知顧客能透過關鍵字查詢電影。
3. **事件**：選擇「客戶訊息符合」，輸入 `*` 作為任何訊息判斷，並設定「將客戶訊息存為記憶變數」欄位為 `name`，代表顧客的回話將儲存為 name 變數，將連同 API 參數送出。
4. **動作**：選擇「Webhook 腳本」，並選擇上一步驟新增的「關鍵字查詢電影」腳本。
5. **動作**：選擇「訊息發送」，接著於「訊息」欄位中，我們需透過模板語法讓變數顯示為訊息，所以需要輸入以下文字

```javascript

您所查詢的關鍵字為 {{ name }}

{% for movie in movies %}
    {{ loop.index }}. {{ movie.Title }} ({{ movie. Year }})
    
{% else %}
    No movies have been found.
{% endfor %}


共 {{ total ?? 0 }} 筆電影。
```

而更多模板語法的相關細節，請參考以下網址。

{% content-ref url="/pages/-MZGr-3PLNncuAnUmz43" %}
[模板語法](/feature/other/template-syntax.md)
{% endcontent-ref %}

## 結果確認

設定完成後，當顧客發送訊息時，將觸發查詢電影的流程。

<div align="center"><img src="/files/-MZp9tSYNyC5ICjgsRoT" alt="enjoy it!"></div>
