# 如何透過 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>


---

# 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://help.firstline.cc/feature/chatbot/scenario/example/how-to-use-api.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.
