> For the complete documentation index, see [llms.txt](https://docs.omnichat.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.omnichat.ai/features/marketing/new-chatbot/whatsapp-flow-ka-pian-whatsapp-only/whatsapp-flow.md).

# WhatsApp Flow

{% hint style="info" %}
WhatsApp Flow 是由 Meta 開發的一款表單工具。企業可以透過 Omnichat 將 Flow 整合至其行銷工具中並發送給客戶。Flow 是一款高度靈活的互動式表單，允許您設計多步驟流程與各種欄位（例如下拉式選單和文字框），以提升使用者體驗。<br>

此外，Omnichat 支援 Webhook 整合，能將使用者提交的資料即時傳輸至後端進行處理。它還支援使用自訂屬性來儲存資料，並可結合旅程設定來自動化後續的工作流程，實現更全面的營運整合與個人化互動。
{% endhint %}

## 關鍵功能與設定步驟

### 步驟 1：前往 WhatsApp Flow 建立工具以設定您的 Flow [![](https://static.xx.fbcdn.net/rsrc.php/y5/r/m4nf26cLQxS.ico)Developer Platform](https://developers.facebook.com/documentation/business-messaging/whatsapp/flows/playground)

#### 螢幕 (Screens)

* 使用者可以查看每個 Flow Screen 的標題，以了解該表單的用途。
* 一個 Flow 最多可包含 8 個 Screen

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

#### 編輯內容 (Edit content)

* 每個 Screen 最多可包含 8 個內容項目

<figure><img src="/files/98f1Zg6qNLdCP4ceueWr" alt=""><figcaption><p>新增內容</p></figcaption></figure>

#### 內容類型

{% hint style="info" %}
文字 — 適用於標題、表單說明等。
{% endhint %}

* **大標題 (Large Heading)**
  * 最多 80 個字元
* **小標題 (Small Heading)**&#x20;
  * 最多 80 個字元
* **正文 (Body)**
  * 最多 4096 個字元
* **說明文字 (Caption)**
  * 最多 4096 個字元

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

***

#### 媒體&#x20;

{% hint style="info" %}
適合用於表單圖示說明與公司商標。
{% endhint %}

* **圖片 (Image)**&#x20;
  * 最大檔案大小：300 KB
  * 可接受的檔案類型：JPEG、PNG

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

#### 文字回答

{% hint style="info" %}
表單設計中的重要元素，用於收集顧客對問題的回覆。
{% endhint %}

* 簡答 (Short Answer)
  * 您能控制希望客戶輸入的內容類型。選項如下：
    * 文字
    * 密碼
    * 電子郵件
    * 數字
    * 驗證碼
    * 電話
  * 標籤 (Label)
    * 最多 20 個字元
    * 作為欄位標題使用；此欄位將由 Omnichat 回傳
  * 說明 (Instruction)
    * 選填
    * 最多 80 個字元
  * 必填開關 (Required toggle)
    * 預設：必填

<figure><img src="/files/I4D3dABRJADoZYnP2qMR" alt=""><figcaption><p>簡答 (Short Answer)</p></figcaption></figure>

* 段落 (Paragraph)
  * 標籤 (Label)
    * 最多 20 個字元
    * 作為欄位標題使用；此欄位將由 Omnichat 回傳
  * 說明 (Instruction)
    * 選填
    * 最多 80 個字元
  * 必填開關 (Required toggle)
    * 預設：必填
  * 顧客最多可輸入 600 個字元

<figure><img src="/files/P5YU92a9zgl9O21oZVMw" alt=""><figcaption><p>段落 (Paragraph)</p></figcaption></figure>

* 日期選擇器 (Date Picker)
  * 標籤 (Label)
    * 最多 20 個字元
    * 作為欄位標題使用；此欄位將由 Omnichat 回傳
  * 說明 (Instruction)
    * 選填
    * 最多 80 個字元
  * 必填開關 (Required toggle)
    * 預設：必填
  * 無法設定範圍

<figure><img src="/files/fRfHqpCF7vAeheGKhvd1" alt=""><figcaption><p>日期選擇器 (Date Picker)</p></figcaption></figure>

***

#### 選項

{% hint style="info" %}
表單設計中的重要元素，用於收集顧客對問題的回覆。
{% endhint %}

* 單選 (Single Choice)
  * 標籤 (Label)
    * 最多 30 個字元
    * 作為欄位標題使用；此欄位將由 Omnichat 回傳
  * 選項 (Options)
    * 每個選項最多 30 個字元
    * 最多 10 個選項
    * 提供給顧客選擇的項目（單選）
  * 必填開關 (Required toggle)
    * 預設：必填

<figure><img src="/files/YIr2iU6BfgnAFKmNR7oX" alt=""><figcaption><p>單選 (Single Choice)</p></figcaption></figure>

* 複選 (Multiple Choice)
  * 標籤 (Label)
    * 最多 30 個字元
    * 作為欄位標題使用；此欄位將由 Omnichat 回傳
  * 選項 (Options)
    * 每個選項最多 30 個字元
    * 最多 10 個選項
    * 提供給顧客選擇的項目（單選）
  * 必填開關 (Required toggle)
    * 預設：必填
* 下拉選單 (Dropdown)
  * 標籤 (Label)
    * 最多 30 個字元
    * 作為欄位標題使用；此欄位將由 Omnichat 回傳
  * 選項 (Options)
    * 每個選項最多 30 個字元
    * 最多 10 個選項
    * 提供給顧客選擇的項目（單選）
  * 必填開關 (Required toggle)
    * 預設：必填

<figure><img src="/files/uYduOEvwSfmAZdntWfCM" alt=""><figcaption><p>下拉選單 (Dropdown)</p></figcaption></figure>

* 選擇加入 (Opt-In)
  * 標籤 (Label)
    * 最多 300 個字元
    * 作為欄位標題使用；此欄位將由 Omnichat 回傳
  * 「閱讀更多」連結 (Read more link)
    * 用於管理公司的服務條款與隱私權政策
    * 選填
    * 您可新增以下格式：
      * 大標題&#x20;
      * 小標題
      * 正文
      * 說明文字
      * 圖片

<figure><img src="/files/SgKe8z2rFU5W7Snqv0bQ" alt=""><figcaption><p>選擇加入 (Opt-In)</p></figcaption></figure>

<figure><img src="/files/h0d0JbGUaSlZoq3mdmlN" alt=""><figcaption><p>閱讀更多 (Read more)</p></figcaption></figure>

* 必填開關 (Required toggle)
  * 預設：必填

***

#### 按鈕

{% hint style="info" %}
流程按鈕 — 用於觸發互動式流程，引導使用者填寫資訊或完成特定動作。
{% endhint %}

* 按鈕 (Button)
  * 最多 30 個字元

### 步驟 2：複製 JSON 至 [WhatsApp Manager](https://business.facebook.com/wa/manage/)&#x20;

#### 設定路徑

* Meta Business Suite > Settings > WhatsApp Accounts > WhatsApp Manager

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

* WhatsApp Manager > Flows > Create Flow

<figure><img src="/files/7o0HOf1nVsntouCKzLJe" alt=""><figcaption></figcaption></figure>

* 輸入以下流程詳細資訊並新增:
  * 名稱 (Name)
  * 類別 (Categories)
    * 支援以下類別選項，並將同步至 Omnichat 進行更新

<div align="left"><figure><img src="/files/0EW4GMpo1FLISxV8xrk6" alt="" width="150"><figcaption></figcaption></figure></div>

* 選項
  * 註冊 (sign up)
  * 登入 (log in)
  * 預約 (appointment booking)
  * 潛在客戶開發 (lead generation)
  * 購物 (shopping)
  * 聯絡我們 (contact us)
  * 客戶服務 (customer support)
  * 問卷調查 (survey)
  * 其他 (other)
* 無終端節點 (Without Endpoint)
  * 預設為此選項
  * 只需將類別設定為「預設」
  * 此類別的資料將不會同步至 Omnichat
* 有終端節點 (With Endpoint)
  * 不支援此項目

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

* 貼上流程 JSON

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

### 步驟 3：格式化 JSON

* 複製已建立的流程 JSON

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

* 首先，格式化複製的 JSON，並貼入 WhatsApp 管理員的 Flow Builder。您可以使用 AI 或[線上工具](https://jsonformatter.org/)來格式化 JSON，否則將難以進行整理與閱讀。

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

* 元件`name`必須與 `Footer > on-click-action > payload` 中的鍵值 (key) 一致

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

* 元件的 `data-source > id` 必須與標題`title`一致

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

* 設定展示

{% embed url="<https://drive.google.com/file/d/103kj1n6Lc89dCkyxj5Au0q8Y-CfX81sB/view?usp=sharing>" %}