> 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/she-ding/tong-xun-qu-dao/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="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2F8JkaNlG8oLlkvIW2Qz09%2Fimage.png?alt=media&amp;token=a89d442d-5223-4ee8-9983-86606cc170a9" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FQTny4epUZ56GXvOBxaF7%2Fimage.png?alt=media&amp;token=303668f3-1d1d-4ae3-8ef7-592c24011586" alt=""><figcaption><p>新增內容</p></figcaption></figure>

#### 內容類型

#### 文字

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

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

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2Fy0OCZ9glIRSMfCxWGpgq%2Fimage.png?alt=media&amp;token=074bb181-75a4-43b3-9e7e-516611e3ba1c" alt=""><figcaption></figcaption></figure>

***

#### 媒體&#x20;

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

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

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FY5rIVO4P1ilS78NCxAvP%2Fimage.png?alt=media&amp;token=25a1c1ad-6fea-4e04-991c-cdebb0296a6d" alt=""><figcaption></figcaption></figure>

#### 文字回答

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

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

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FVB0CsBNl0kYVKNVITCfg%2Fimage.png?alt=media&amp;token=ba13fa80-236a-4294-89af-964c8a2b166f" alt=""><figcaption><p>簡答 (Short Answer)</p></figcaption></figure>

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

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2F8gpHAKsM61FEGaPB16VP%2Fimage.png?alt=media&amp;token=948ad2ef-d0fc-42d3-9442-94ff94e36283" alt=""><figcaption><p>段落 (Paragraph)</p></figcaption></figure>

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

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FBQcNChAXX0yTUOV5n1mY%2Fimage.png?alt=media&amp;token=e80fc7a1-1ba8-4c42-aab0-6dcde3b0f688" 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="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2F4sinfChFsJfADnh8MAFc%2Fimage.png?alt=media&amp;token=bb47a67c-f87b-4d88-a7a7-b4a0014ff6ba" 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="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FbZbbb4Hw28wXVihqckE1%2Fimage.png?alt=media&amp;token=2da25440-9bd4-4135-9351-0ff57b858848" alt=""><figcaption><p>下拉選單 (Dropdown)</p></figcaption></figure>

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

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FcDuLjdNOLLw3fLLWhwiD%2Fimage.png?alt=media&amp;token=f8f03042-cf2c-44be-a6c0-e003cb48a294" alt=""><figcaption><p>選擇加入 (Opt-In)</p></figcaption></figure>

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2Fqz7Z2hiiTf959oVeW7WL%2Fimage.png?alt=media&amp;token=78e0fb31-7a40-41c9-bd18-2374af0e0846" 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="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2Ft2mNvxpv0CmAMKImwgnZ%2Fimage.png?alt=media&amp;token=3415e337-cdff-4baa-83ef-02385d0e6247" alt=""><figcaption></figcaption></figure>

* WhatsApp Manager > Flows > Create Flow

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FaY3kckqaBXbXOSSXHCkD%2Fimage.png?alt=media&amp;token=c89e4dd3-a1fa-4df8-a6bf-78033921c54e" alt=""><figcaption></figcaption></figure>

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

<div align="left"><figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FXQTjuppHGjoyv6VuCyDL%2Fimage.png?alt=media&amp;token=5c88f3b3-6db7-40fc-a6cc-aa2a7f8009ed" 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="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FICs7lMsCea3fJ9bAZMog%2Fimage.png?alt=media&amp;token=9b15c6af-d283-46e1-8f76-c3b0dadfba20" alt=""><figcaption></figcaption></figure>

* 貼上流程 JSON

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FhlPe5jWaCK4KqZO2pmQ2%2Fimage.png?alt=media&amp;token=986dedcf-4dfc-448b-8919-63befb80fd7a" alt=""><figcaption></figcaption></figure>

### 步驟 3：格式化 JSON

* 複製已建立的流程 JSON

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FO55XqqdsZ3toKWmo2jI8%2Fimage.png?alt=media&amp;token=0765d9a7-f753-4578-87f0-651e0aac3ff8" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FC834b7ewKWV0j2ChjgkO%2Fimage.png?alt=media&amp;token=a216bf61-8a91-4bf4-b806-f38055c0cde5" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FVkoEwXJuD05S3bRVrwNi%2Fimage.png?alt=media&amp;token=a1c7144c-1fa1-4e6e-a775-73cebf9e1236" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FgwJ18sHjhsz86Pkjl0V2%2Fimage.png?alt=media&amp;token=c8405c99-2d13-4b70-803e-885e0330013b" alt=""><figcaption></figcaption></figure>

* 設定展示

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