跳轉到

Instagram Channel

當真正要服務的人主要透過 Instagram Direct Message 和品牌互動，而且你希望 Agent 直接在 Instagram DM 裡回覆時，就用 Instagram channel。

對 Codeer 來說，Instagram 上線時真正重要的入口是 Webhook URL。在 Instagram channel 上按 Publish，主要是在控制 Codeer 是否開始處理 Instagram webhook 事件；實際回覆仍然來自目前綁定 Agent 的最新已發布版本。

開始前要先有什麼

  • 一個至少發布過一次的 Agent
  • workspace 的 channel 編輯權限
  • 一個 Instagram Business 或 Creator 帳號
  • 這個 Instagram 帳號已連結到你可以管理的 Facebook Page
  • 一個 Meta app
  • Meta app 內可用的 Instagram messaging 設定
  • 一組可發送 Instagram 訊息的 access token
  • 一個可被外網存取的 HTTPS Codeer 環境

為什麼一定要公開 HTTPS

Meta 只接受可從外網連到的 HTTPS webhook。Codeer 顯示的 Webhook URL 如果不是公開 HTTPS，Meta 在 webhook verify 那一步就不會成功。

你在 Meta 端會準備什麼

  1. 一個 Meta app

  2. 一個 Instagram Business 或 Creator 帳號

  3. 與 Instagram 帳號連結的 Facebook Page

  4. Instagram messaging 相關設定

  5. 一個 webhook 設定，callback URL 指到 Codeer 的 Webhook URL

  6. 訂閱該 Instagram 帳號的訊息事件

  7. 可用來發送 Instagram 訊息的 access token

Instagram Account ID、token、webhook 訂閱要指向同一個帳號

Codeer 會用你填入的 Instagram Account ID 檢查 webhook 事件是不是屬於這個 channel。Account ID、access token 與 webhook 訂閱如果不是同一個 Instagram 帳號，訊息可能會被忽略，或是 Codeer 無法回覆。

完整設定流程

  1. 先在 Codeer 建立 Instagram channel，並複製 Webhook URL

    • 先在 Codeer 的 Editor 發布目標 Agent。
    • 打開 Channels。
    • 按 New Channel。
    • 選擇 Instagram。
    • 為這個 channel 設定穩定的 Name 與 Slug。
    • 在 Instagram channel 的 Configuration 複製 Webhook URL。
    • 這個階段先不要發布 Codeer 的 Instagram channel。先收集 Meta 端需要的資料並儲存到 Codeer，再回到 Meta 設定與驗證 webhook。

  2. 確認 Instagram 帳號狀態

    • 確認目標 Instagram 帳號是 Business 或 Creator 帳號。
    • 確認它已連結到一個 Facebook Page。
    • 確認你登入 Meta 後台的帳號有權限管理這個 Instagram 帳號與對應 Page。

    Instagram messaging 通常會透過連結的 Facebook Page 管理權限

    如果 Meta 後台找不到你要接的 Instagram 帳號，優先檢查 Instagram 帳號是否已轉成專業帳號、是否連到正確 Page，以及你的 Meta Business 權限是否包含該資產。

  3. 在 Meta app 加入 Instagram messaging 設定

    • 打開 Meta for Developers。
    • 進入要用來接 Instagram DM 的 Meta app。
    • 加入 Instagram 相關產品或 messaging use case。
    • 連結要給使用者傳 DM 的 Instagram Business / Creator 帳號。
    • 確認這個 app 有權限接收與發送該 Instagram 帳號的訊息。

    Meta 後台名稱可能會變

    Meta 會不定期調整 App Dashboard 的側邊欄與 use case 名稱。重點不是選單文字，而是要完成三件事：app 連到正確 Instagram 帳號、webhook 能 verify、token 能發送 Instagram 訊息。

  4. 取得 Instagram Account ID

    • 在 Meta App Dashboard、Instagram account settings，或 Graph API tooling 裡找到目標 Instagram Business account ID。
    • 這個 ID 通常看起來像一串數字，例如 17841400000000000。
    • 複製這個 ID，稍後貼到 Codeer 的 Instagram Account ID。

  5. 建立 Webhook Verify Token

    • 自己產生一段不容易猜到的字串，作為這個 channel 專用的 Webhook Verify Token。
    • 先把它保存下來，稍後會同時填在 Meta webhook 設定與 Codeer 表單。

    Verify Token 不是 access token

    Webhook Verify Token 是你自訂給 Meta 驗證 webhook 用的共享字串。Access Token 則是 Codeer 用來發送 Instagram 訊息的 token。兩者用途不同，不要混用。

  6. 複製 Meta App Secret

    • 在 Meta App Dashboard 打開 App Settings > Basic。
    • 找到並複製 App Secret。
    • 稍後貼到 Codeer 的 Meta App Secret。

    Meta App Dashboard 的 Basic settings 頁面，顯示 App Secret 的位置

    Codeer 會用 App Secret 驗證 webhook 簽章

    Instagram webhook 打進 Codeer 時，Codeer 會用 Meta App Secret 檢查 X-Hub-Signature-256。如果 App Secret 不對，事件會被忽略。

  7. 建立或取得可發送 Instagram 訊息的 access token

    • 在 Meta App Dashboard、Graph API Explorer，或你們既有的 Meta token 流程中，取得可發送 Instagram 訊息的 access token。
    • 確認 token 對應的 Instagram 帳號就是你在 Codeer 裡填的 Instagram Account ID。
    • 稍後貼到 Codeer 的 Access Token。

    Instagram 設定頁面，顯示 Instagram 訊息 access token 產生區塊

    正式對外前確認 token 與權限狀態

    如果 app 還在 development mode，或只拿到測試用 token，可能只有 app roles 裡的人能測。若要服務一般使用者，請確認 Meta app、權限、token 有符合你們的正式上線方式。

  8. 回到 Codeer 儲存 Instagram 設定

    • 回到 Codeer 的 Instagram channel。
    • 在 Configuration 填入：
      • Instagram Account ID
      • Webhook Verify Token
      • Meta App Secret
      • Access Token
    • 選擇負責回覆 Instagram DM 的已發布 Agent。
    • 儲存設定。

    一定要先儲存 Verify Token，再到 Meta 驗證 webhook

    Meta verify webhook 時會呼叫 Codeer 的 Webhook URL，並帶上你在 Meta 輸入的 verify token。Codeer 會用已儲存在 channel 裡的 Webhook Verify Token 進行比對，所以這一步必須在 Meta verify / save 之前完成。

    下拉選單只會出現已發布的 Agent

    如果你在這裡找不到 Agent，先回到 Editor 發布它，再回到 Instagram channel 頁面。

  9. 在 Meta 設定 Webhook

    • 在 Meta app 的 Instagram / Webhooks 設定裡新增 callback。
    • Callback URL 貼上 Codeer 的 Webhook URL。
    • Verify Token 填入剛剛建立的 Webhook Verify Token。
    • 按 Meta 後台的 verify / save。
    • verify 成功後，訂閱要接收訊息的 Instagram 帳號。
    • 至少訂閱 Instagram 訊息相關事件，讓 Codeer 能收到使用者傳來的 DM。

    Instagram 設定頁面，顯示 Webhook callback URL 與 verify token 欄位

  10. 發布 Codeer 的 Instagram channel

    • webhook、Instagram Account ID、憑證與 Agent 綁定都完成後，再發布 channel。
    • 如果你想先停止處理新的 Instagram 事件，就用 Unpublish。

第一次 live 測試

正式分享給更多人之前，先用一個真實 Instagram 帳號跑完一次完整流程。

  1. 打開目標 Instagram 帳號的 DM。

  2. 送出一則真實文字訊息。

  3. 確認 Instagram DM 裡有收到 Agent 回覆。

  4. 回到 Codeer 的 Histories，確認對話有被記錄。

  5. 確認回答來自你剛剛綁定的 Agent 最新已發布版本。

Troubleshooting

如果 Instagram 已接上，但回應不對，請依序檢查：

  1. 正確的 Agent 版本是否已發布。

  2. Instagram channel 是否已發布。

  3. Meta webhook 是否 verify 成功。

  4. webhook 是否訂閱了正確的 Instagram 帳號。

  5. Instagram Account ID 是否和 webhook 事件、access token 屬於同一個 Instagram 帳號。

  6. Instagram 帳號是否為 Business 或 Creator 帳號，且已連到正確 Facebook Page。

  7. Webhook Verify Token 是否和 Meta webhook 設定完全一致。

  8. Meta App Secret 是否來自同一個 Meta app。

  9. Access Token 是否仍有效，而且可以發送 Instagram 訊息。

相關指南