合併 HubSpot 應用程式

連接您的 Webflow 網站和 HubSpot 帳戶。

您可以選擇使用可透過 Webflow Marketplace 存取的經過驗證的 HubSpot 應用程式將 HubSpot 嵌入您的網站。該應用程式可讓您插入和設計 HubSpot 表單,將目前的 Webflow 表單連結到您的 HubSpot 實例,將 HubSpot 元素和聊天機器人引入您的 Webflow 網站,並設定網站監控。

如果您尋求有關企業專用的傳統 HubSpot 表單整合的詳細信息,請參閱我們有關 HubSpot 表單的教程。

在本指南中,您將發現:

  1. 安裝和授權 HubSpot 應用程式的說明
  2. HubSpot 應用程式的特性和功能   
  3. 有關如何卸載 HubSpot 應用程式的指南
  4. 常見問題與故障排除提示

安裝和授權 HubSpot 應用程式的指南

要操作 HubSpot 應用程序,您必須先 建立 HubSpot 設定文件。然後,您可以設定和自訂應用程式:

  1. 參觀 HubSpot 應用程式的詳細資訊頁面
  2. 新增到站點
  3. 選擇您想要連結到 HubSpot 應用程式的 Webflow 站點
  4. 查看請求的權限 
  5. 輕敲 授權應用程式
  6. 選擇您的HubSpot帳戶
  7. 輕敲 選擇帳戶
  8. 輕敲 連接應用程式 —您將被重新導向到您的儀表板

至關重要的: 您無法將 HubSpot 應用程式連接到整個工作區。在安裝和允許應用程式時,請務必選擇您希望與該應用程式整合的特定網站。 

成功安裝應用程式後,您可以在設計器中存取它:

  1. 打開 應用程式面板 
  2. 將滑鼠懸停在 HubSpot 應用程式上
  3. 點選 發射

了解有關在設計器中使用應用程式的更多資訊。

HubSpot 應用程式的特性和功能

HubSpot 應用程式使行銷人員和網站所有者能夠在其 Webflow 網站和 HubSpot 之間建立直接連接,包含五個基本功能:

  1. 在 Webflow 上嵌入並設計 HubSpot 形狀
  2. 將您的 Webflow 表格連結到 HubSpot
  3. 將 HubSpot 元素合併到您的 Webflow 網站中
  4. 處理現場監控
  5. 將 HubSpot 聊天機器人整合到您的 Webflow 站點

在 Webflow 上嵌入和自訂 HubSpot 表單

HubSpot 應用程式可讓您在 Designer 畫布上插入任何受支援的 HubSpot 表單,以根據網站的外觀和風格定製表單。要嵌入表單: 

  1. 啟動 HubSpot 應用程式
  2. 點選 將現有的 HubSpot 表單新增至您的頁面 
  3. 在畫布上選擇要嵌入表單的位置
  4. 選擇要嵌入的所需 HubSpot 表單(如果支援)
  5. 選擇是否採用 HubSpot 的表單樣式或使用無樣式版本
  6. 點選 將表單新增至頁面
  7. (可選)根據您的喜好自訂表單

了解有關管理 HubSpot 表單的更多信息

必不可少的: 由於 HubSpot 開發者平台的限制,目前不支援某些 HubSpot 表單欄位(例如 reCAPTCHA 欄位)。如果應用程式通知您嵌入表單不可行,或者您選擇 iframe 解決方案,則可以貼上 表單的共享 URL (可在 HubSpot 中取得)進入 HubSpot 分享網址 應用程式中的欄位將表單嵌入為 iframe。雖然您將無法透過 iframe 設定嵌入表單的樣式,但它會自動更新以反映 Hubspot 端所做的任何變更。

將 Webflow 表格連接到 HubSpot

您也可以使用 HubSpot 應用程式將現有 Webflow 表格連結到您的 HubSpot 帳戶。建立連線: 

  1. 啟動 HubSpot 應用程式
  2. 點選 將 Webflow 表格對應到 HubSpot 表格 
  3. 在 Webflow 畫布上選擇您想要對應的表單
  4. 確保所選表單包含表單標籤
  5. 將 HubSpot 表單欄位與每個對應的 Webflow 表單欄位進行比對
  6. 點選 節省

以下是 Webflow 和 HubSpot 相容的表單欄位類型的摘要。對於提到的每個 Webflow 表單輸入類型,您會找到相關的 HubSpot 輸入類型,以實現無縫資料對應。使用本指南作為資源來簡化您的表單映射過程:

Webflow野外型對應HubSpot欄位類型
純文字)

  • 單行文字
  • 多行文字
  • 段落
  • 日期(年-月-日)

電子郵件單行文字
電話單行文字
數位

  • 數位
  • 單行文字
  • 多行文字

單選按鈕收音機
檢查kbox單次檢查kbox
上傳文件文件
文字區多行文字
選擇落下
提醒: 該應用程式不方便地對應到 HubSpot 中的密碼欄位。

管理連結表單的技術

您可以透過啟動應用程式選單並選擇來修改連接或從頁面上的任何表單分離映射 連接形式

了解有關管理 HubSpot 表單的更多信息

請注意: 若要使 Webflow 表單顯示在「已連線 Webflow 表單」下,您必須存取包含該表單的頁面。

將 HubSpot 資源包含到您的 Webflow 站點

HubSpot 應用程式可讓您探索 HubSpot 帳戶中的任何資源並將其整合到 Webflow 網站中。開始: 

  1. 開始HubSpot應用程式
  2. 將HubSpot資源整合到您的網站中
  3. 查詢並選擇您想要引入的資源
  4. 在畫布上選擇要包含資源的元件
  5. 包含在頁面上

了解有關管理 HubSpot 資產的更多信息.

筆記: 透過應用程式從 HubSpot 資產引入到 Webflow 站點的資產不會附加到 Webflow 資產部分。

監督網站追蹤

獨特的 HubSpot 追蹤代碼特定於每個 HubSpot 帳戶,使 HubSpot 能夠觀察您的網站流量。要控制網站追蹤:

  1. 開始HubSpot應用程式
  2. 監督網站追蹤
  3. 轉變 啟用 HubSpot 站點追蹤代碼
  4. 節省

為了確保追蹤正常運行,您必須發佈您的網站。

進一步了解 HubSpot 的追蹤代碼.

筆記: 啟動 HubSpot 追蹤代碼後,HubSpot 將自動監控您網站上的所有表單提交(即使表單未連結至 HubSpot),並使用 Webflow 表單 ID 將它們儲存在新表單中。如果您不希望這樣做,您可以 在您的 HubSpot 帳戶設定中關閉此功能.

將 HubSpot 聊天機器人合併到您的 Webflow 站點

該應用程式還提供了使用自訂程式碼將 HubSpot 聊天機器人新增至 Webflow 網站的系統說明。 

筆記: 任何高級網站計劃以及核心、成長、代理和自由工作者工作空間計劃都可以存取自訂程式碼的功能。

開始:

  1. 開始HubSpot應用程式
  2. 將 HubSpot 聊天機器人加入您的網站
  3. 查看HubSpot聊天機器人庫 檢查和修改您的 HubSpot 聊天機器人品種
  4. 確保您的 HubSpot 追蹤代碼已激活
  5. 發布您的網站 

了解有關設置和配置 HubSpot 聊天機器人的更多信息.

如何擦除HubSpot應用程式

有兩種方法可從 Webflow 網站刪除 HubSpot 應用程式:從網站設定或從 Designer。

若要透過網站設定刪除應用程式:

  1. 站點設定 > 應用 &整合 選項卡 > 連結的應用程式
  2. 找到HubSpot
  3. 看詳情 
  4. 擦除應用程式

若要透過設計器卸載:

  1. 打開 應用面板
  2. 按HubSpot
  3. 刪除應用程式 

常見問題和解決提示

HubSpot 應用程式已打開,但沒有資料載入。

使用權 站點設定 > 應用程式和集成 選項卡並確認 HubSpot 應用程式已列為已安裝的應用程式。如果沒有的話, 造訪 HubSpot 應用程式詳細資訊頁面 並在您的站點上重新安裝該應用程式。如果存在 HubSpot,請開啟 應用面板,啟動 HubSpot 應用程序,然後按一下 管理連線 查看連接至 Webflow 站點的所有 HubSpot 帳戶。

我透過應用程式嵌入了 HubSpot 表格,但提交的內容並未準確轉移到 HubSpot。

插入 表單的共享 URL (可在 HubSpot 中訪問)進入 HubSpot 分享網址 應用程式中的欄位將表單嵌入為 iframe 並驗證問題是否仍然存在。如果是的話,請 聯絡 Webflow 的客戶支援團隊 以獲得進一步指導。

我修改了 HubSpot 表單,但是,更新不會自動反映在我的 Webflow 網站上。

修改 HubSpot 表格後,您可以在設計器中啟動應用程序,並用修改後的表格取代現有的 HubSpot 表格。為了即時同步 HubSpot 和 Webflow 之間的更改,我們建議使用表單的共用 URL 嵌入為 iframe。

我使用應用程式將 Webflow 表格連接到 HubSpot,但沒有看到提交內容。

驗證您的 Webflow 表單欄位是否包含欄位名稱。如果包含名稱,請 聯絡 Webflow 的客戶支援團隊 為進一步協助。

如何驗證哪些 HubSpot 帳戶連結到每個 Webflow 網站?

使用權 站點設定 > 應用程式和集成 選項卡並確認 HubSpot 應用程式被識別為已安裝的應用程式。如果缺少的話, 造訪 HubSpot 應用程式詳細資訊頁面 並在您的站點上重新安裝該應用程式。如果包含 HubSpot,請開啟 應用面板,啟動 HubSpot 應用程序,然後按 管理連線 查看連結至 Webflow 網站的所有 HubSpot 帳戶。 

我透過應用程式嵌入了 HubSpot 表單,但某些欄位或邏輯未保留。

我們建議輸入表單的共享 URL 並使用應用程式將其嵌入為 iframe,或將表單嵌入為自訂程式碼嵌入元素。

我將 HubSpot 資源中的資產合併到我的網站中,但該圖像沒有出現在我的 Webflow 資產面板中。

使用應用程式從 HubSpot 資源引入到 Webflow 網站的資產不會自動填入您的 Webflow 資產面板。

如果您在使用 HubSpot 應用程式時仍然遇到挑戰,請 聯絡 Webflow 的客戶支援團隊.

麥伊凡
Ewan Mak 的最新帖子 (看全部)