在您的 Webflow 網站上插入 Eventbrite 訂單處理

讓您的網站訪客透過嵌入式 Eventbrite 結帳功能註冊您的活動。
重要的: 本指南利用 Webflow 的整合功能來插入自訂程式碼。任何付費站點計劃以及核心、成長、代理商和自由工作者工作空間計劃都可以使用整合功能。 

在本教程中,您將發現: 

  1. 從 Eventbrite 檢索集成程式碼的方法
  2. 如何在您的 Webflow 網站上整合互動式 Eventbrite 訂單處理

從 Eventbrite 取得您的整合程式碼

開始之前: 如果還沒完成, 建立 Eventbrite 活動。另外,請確保在 Webflow CMS 中產生一個集合,您可以在其中儲存和調整事件 ID。

若要從 Eventbrite 取得您的事件 ID 和整合程式碼: 

  1. 訪問您的 事件 
  2. 選擇您想要為其嵌入訂單處理小部件的事件
  3. 導航至 行銷 選單 > 嵌入式訂單處理
  4. 選擇 訂單處理外觀 您喜歡的網站(例如,在頁面上顯示模式視窗的按鈕,或整合在頁面內容中的按鈕)
  5. 點選 複製程式碼 複製您的整合程式碼

在您的 Webflow 網站上整合互動式 Eventbrite 訂單處理

您可以選擇從 Eventbrite 獲取集成代碼並將其粘貼到網站上任何位置的集成元素中 - 但是,嵌入式訂單處理將保持靜態(即不更改),因此您需要手動更新集成代碼每次您希望嵌入不同事件的訂單處理時。如果您只想為單一事件嵌入 Eventbrite 訂單處理,則此方法可能適合,但如果您處理多個事件則不適合。

在這裡,您將了解如何在您的網站上整合互動式 Eventbrite 訂單處理。透過利用 Webflow CMS 和動態集成,您可以設計訂單處理佈局,該佈局會針對 CMS 集合中的所有事件重複出現。 

這將分為 3 個步驟: 

  1. 為您的事件 ID 建立集合字段 
  2. 設定動態集成 
  3. 將您的活動 ID 新增至 CMS 中的活動中
重要的: 確保您已設定 CMS 集合(例如「活動」、「聚會」等)並為您的活動建立至少 1 個活動集合項目。 CMS 甚至提供了一個事件範本來指導您配置您的集合。

為您的事件 ID 建立集合字段 

首先,您必須建立一個 CMS 集合欄位來保存您的 Eventbrite 事件 ID(即 Eventbrite 整合的獨特標識符): 

  1. 打開 內容管理系統面板
  2. 將滑鼠懸停在您的活動集合上,然後點擊設定“齒輪” 出現的圖標 
  3. 選擇 新增字段
  4. 選擇 純文字
  5. 為您的欄位指派標籤(例如「Eventbrite 事件 ID」) 
  6. 點選 保存欄位

設定動態集成

動態整合僅適用於動態內容,這表示您只能將它們附加到集合頁面或靜態頁面上的集合清單中。由於您正在引用您的事件集合,因此您需要將整合連結到與您的事件集合關聯的集合頁面,或將集合清單連接到您的事件集合。 

要設定動態整合:

  1. 繼續前往 新增面板 > 先進的
  2. 插入一個 一體化 元素到畫布
  3. 將您的 Eventbrite 整合程式碼貼到程式碼編輯器中
  4. 找到 事件ID 在整合代碼中,選擇單引號之間的 ID 號碼(例如 681294671627) 
  5. 複製 ID 號碼並使其突出顯示
  6. 輕按 新增字段
  7. 選擇您為事件 ID 建立的集合欄位(例如「Eventbrite 事件 ID」)
  8. 選擇 儲存並關閉 

Webflow 的 HTML 嵌入程式碼編輯器中的 Eventbrite 自訂程式碼。 eventId 在引號之間反白。 
反白您的事件 ID 以將其替換為動態集合欄位。 
Webflow 的 HTML 嵌入程式碼編輯器中的 Eventbrite 自訂程式碼。 eventId 取代為「Eventbrite 事件 ID」集合欄位。 
當靜態事件 ID 替換為集合欄位時,Eventbrite 整合會針對集合中的每個事件進行更新。 

將您的活動 ID 新增至 CMS 中的活動中 

最後,將您的活動 ID 新增到您的活動中: 

  1. 訪問 內容管理系統面板 > 活動收藏 (或為您的收藏選擇的任何名稱) 
  2. 選擇您的活動收藏項目 
  3. 將整合程式碼中的 ID 號碼(例如 681294671627)貼到您為事件 ID 指定的集合欄位(例如「Eventbrite 事件 ID」)
  4. 點選 節省

對於您希望包含互動式訂單處理的任何事件,您可以按照以下步驟操作 - 從 Eventbrite 整合程式碼複製 ID,並將其新增至每個集合項目中的事件 ID 集合欄位。 

準備好後,發佈您的網站以體驗新整合的 Eventbrite 訂單處理的運作情況。 

專業提示: 您可以在集合頁面和集合清單中套用條件可見性,以隱藏缺少事件 ID 的事件的整合訂單處理。 
重要的: 您的 Eventbrite 訂單處理不會顯示在 Designer 畫布上 - 也就是說,您將無法在 Designer 中預覽處理過程,而是顯示佔位符。發布或匯出您的網站後,處理過程將在您放置的位置可見(即顯示)。如果您需要在自訂網域上啟動網站之前預覽處理流程,您可以將網站發佈到 webflow.io 臨時子網域。 
麥伊凡
Ewan Mak 的最新帖子 (看全部)