Website Widgets | SidewaysData Docs

總覽

透過在您自己的網站上直接嵌入 SidewaysData 小工具來擴展您的觸及範圍。在觀眾已經造訪的地方顯示您的活動和即時成績—只需一行程式碼。

為何使用小工具？

One line of code - Simply paste a script tag into your website
Always up-to-date - Events and results sync automatically from SidewaysData
No maintenance - We handle all updates and improvements
Professional appearance - Polished, responsive design that works on any device
Free - Included with SidewaysData at no extra cost

可用的小工具

查找活動小工具

顯示可篩選的活動列表。訪客可以依年份、報名狀態、活動類型等瀏覽。非常適合放在活動頁或首頁。

了解更多關於查找活動小工具

即時成績小工具

在活動期間顯示即時賽事成績。包含供觀眾使用的線上聊天，並會根據活動時間自動在 "即時成績" 與 "最終成績" 之間切換。

了解更多關於即時成績小工具

開始使用

找到您的 organizer ID 或 event IDs（請參閱取得您的 ID）
選擇您需要的小工具
複製嵌入程式碼並貼到您的網站
使用可選的設定屬性進行自訂

需求

小工具可在任何支援 JavaScript 的網站上運作。這包括 WordPress、Squarespace、Wix、自訂 HTML 網站以及大多數網站建置平台。您需要能夠在網頁中加入自訂 HTML 或 script 標籤的功能。

取得您的 ID

要設定小工具，您需要主辦單位 ID，並且可選地需要特定的活動 ID。以下說明如何找到它們。

尋找您的主辦單位 ID

當您在 SidewaysData 檢視主辦單位頁面時，主辦單位 ID 會顯示在網址中。

前往 sidewaysdata.com
前往您的主辦單位頁面
查看網址 — 格式如下： sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

例如，如果您的網址是 sidewaysdata.com/organizer/example-motorsports，則您的主辦單位 ID 為 example-motorsports。

尋找活動 ID

活動 ID 會出現在活動網址以及您的主辦單位儀表板中。

從活動網址

前往 SidewaysData 上的任一活動
查看網址 — 在 /events/ 之後會有活動 ID

例如： sidewaysdata.com/events/12345 表示活動 ID 為 12345。

從您的儀表板

登入 SidewaysData
前往您的活動頁面
活動 ID 會顯示在活動清單中或可見於連結中

使用瀏覽器開發者工具

如果您在尋找 ID 時遇到困難：

在您的主辦單位或活動頁面上按右鍵
選擇「檢查」或「檢查元素」
尋找包含 ID 的資料屬性或網址

需要協助？

如果您找不到 ID，請聯絡 SidewaysData 支援，我們會協助您找到它們。

尋找活動總覽

The Find Events 小工具會在您的網站上顯示可篩選的活動清單。訪客可以瀏覽即將舉辦的活動、依各種條件篩選，並點選以在 SidewaysData 上註冊或查看詳細資訊。

顯示內容

活動卡片，包含名稱、日期、地點與註冊狀態
可篩選的下拉選單：年份、活動類型、註冊狀態與志工機會
前往 SidewaysData 上活動頁面的直接連結
回應式版面，會依畫面尺寸自動調整

基本嵌入程式碼

將此 script 標籤加入您希望顯示活動的位置：

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id">
</script>

將 your-organizer-id 替換為您的實際 organizer ID（參見取得您的 ID）。

預設行為

在沒有額外設定的情況下，該小工具會：

顯示來自指定 organizer(s) 的所有活動
顯示年份、活動類型、註冊狀態與志工篩選下拉選單
以日期排序活動（由最舊到最新）
包含所有註冊狀態的活動

運作方式

該小工具會建立一個從 SidewaysData 載入內容的回應式 iframe。iframe 會自動調整高度以配合內容，因此小工具本身不會出現捲動。活動內容會與您的 SidewaysData 帳戶保持同步—您所做的任何變更會自動反映出來。

下一步

使用選用屬性來設定小工具
查看不同使用情境的常見範例

設定選項

使用 script 標籤上的資料屬性自訂 Find Events 小工具。除了指定要顯示哪些活動之外，所有屬性皆為選用。

Specifying Events

您必須至少包含下列其中一個屬性以指定要顯示的活動：

data-organizer-ids

顯示特定主辦單位的所有活動。若要多個主辦單位，請使用逗號分隔。

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="example-motorsports">
</script>

Multiple organizers:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="org-one,org-two,org-three">
</script>

data-event-ids

僅顯示特定 ID 的活動。若要多個活動，請使用逗號分隔。

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-event-ids="12345,67890">
</script>

Filtering Options

data-event-status

依報名狀態篩選活動。可用值：open、closed 或 any。

data-event-status="open"

data-default-reg-status

設定報名狀態下拉選單的預設值。這會預先選取一個篩選選項，但仍允許訪客變更。

data-default-reg-status="open"

data-limit-organizer-event-types

設定為 true 時，只顯示該主辦單位實際使用的活動類型，而非下拉選單中所有可用的活動類型。

data-limit-organizer-event-types="true"

設定為 true 時，隱藏志工機會篩選下拉選單。

data-hide-volunteers-dropdown="true"

Display Options

data-is-results-mode

設定為 true 時，顯示已有結果的活動，而不是即將到來的活動。適用於 "Past Results" 頁面。

data-is-results-mode="true"

data-newest-first

設定為 true 時，將活動以最新在前排序，而非預設的最舊在前。

data-newest-first="true"

Advanced Options

data-origin

使用自訂網域取代預設的 sidewaysdata.com。只有在您已為 SidewaysData 設定自訂網域時才需要。

data-origin="https://events.yourdomain.com"

Complete Example

以下為使用多個設定選項的範例：

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="example-motorsports"
  data-event-status="open"
  data-limit-organizer-event-types="true"
  data-hide-volunteers-dropdown="true"
  data-newest-first="true">
</script>

This displays open-registration events from "example-motorsports", shows only relevant event types in the filter, hides the volunteer dropdown, and sorts newest events first.

範例

常見的 Find Events 小工具設定，用以符合不同的使用情境。

顯示您的所有活動

顯示您組織的所有活動，並提供所有篩選選項：

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id">
</script>

僅顯示開放報名的活動

顯示目前接受報名的活動：

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-event-status="open">
</script>

顯示有成績的活動

建立一個「過去成績」頁面，顯示具有計時成績的活動：

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-is-results-mode="true"
  data-newest-first="true">
</script>

顯示特定活動

僅顯示特定活動，例如錦標賽系列：

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-event-ids="12345,12346,12347,12348">
</script>

顯示多個主辦單位的活動

在區域或系列頁面上顯示來自多個組織的活動：

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="org-one,org-two,org-three">
</script>

簡化視圖（最少篩選）

透過隱藏較少使用的篩選器，以較簡潔的介面顯示活動：

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-limit-organizer-event-types="true"
  data-hide-volunteers-dropdown="true">
</script>

首頁小工具（開放報名活動，依最新排序）

常見的網站首頁設定：

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-event-status="open"
  data-newest-first="true"
  data-limit-organizer-event-types="true"
  data-hide-volunteers-dropdown="true">
</script>

預設為開放報名篩選

顯示所有活動，但將報名篩選預設為 "open"：

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-default-reg-status="open">
</script>

這與 data-event-status="open" 不同，因為訪客仍然可以更改篩選器以查看已關閉的活動。

即時結果總覽

The Live Results 小工具會在您的網站上顯示即時的比賽成績。觀眾可以在活動期間即時跟隨，並在活動結束後查看最終成績——全部無需離開您的網站。

顯示內容

活動中即時計時結果
根據活動時間顯示「Live Results」或「Final Results」指示
內建由 FastComments 提供的即時聊天，供觀眾互動
有新時間記錄時自動更新

基本嵌入程式碼

將此 script 標籤加入網站希望顯示成績的位置：

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="your-organizer-id">
</script>

將 your-organizer-id 替換為您的實際 organizer ID（請參閱取得您的 ID）。

注意： Live Results 小工具需要 data-organizer-id 屬性。沒有它小工具將無法載入。

運作方式

該小工具會建立一個響應式 iframe，連接到 SidewaysData 的即時計時系統。在活動進行中：

當時間被記錄時，成績會即時更新
小工具顯示「Live Results」以表示計時正在進行中
即時聊天讓觀眾能討論活動

在活動結束後：

成績仍然可供查看
小工具會切換為「Final Results」指示
聊天記錄會被保留

使用情境

活動當天 - 在您的首頁嵌入，讓觀眾可以即時跟隨
專屬成績頁面 - 在您的網站上建立永久成績頁面
社群媒體著陸頁 - 在活動期間分享指向成績頁面的連結

下一步

設定小工具並加上可選屬性

設定

Live Results 小工具的設定非常簡單——只需要您的 organizer ID。

必要屬性

data-organizer-id

您的 SidewaysData organizer ID。這是小工具運作所必需的。

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="example-motorsports">
</script>

請參閱取得您的 ID 以協助尋找您的 organizer ID。

可選屬性

data-origin

使用自訂網域代替預設的 sidewaysdata.com。僅在您已在 SidewaysData 設定自訂網域時需要。

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="example-motorsports"
  data-origin="https://events.yourdomain.com">
</script>

完整範例

典型的 Live Results 嵌入範例：

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="example-motorsports">
</script>

錯誤處理

如果缺少 data-organizer-id 屬性，小工具會在瀏覽器主控台記錄錯誤並且不會渲染。確保包含此必要屬性。

放置建議

將小工具放在具有足夠寬度的容器中（建議至少 320px）
小工具會自動調整高度以配合內容
在活動當天，考慮將其放在首屏以獲得最大能見度
適合作為專屬「Live Results」頁面主要內容

小工具樣式

SidewaysData 的元件以 iframe 嵌入，這限制了直接的 CSS 樣式。但你仍可控制元件如何融入你的頁面佈局。

Container Styling

將元件包在容器元素中以控制其位置和最大寬度：

<div style="max-width: 1200px; margin: 0 auto;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

Width Control

元件會自動擴展為容器寬度的 100%。透過為父元素設定樣式來控制寬度：

<div style="width: 100%; max-width: 800px;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

Height Behavior

元件高度會根據內容自動調整。iframe 使用 postMessage 將必要的高度傳達到你的頁面，從而消除元件內的捲軸。

Responsive Design

元件設計為響應式並適用於手機裝置。它們會自動適應較窄的螢幕。為獲得最佳效果：

使用百分比或彈性容器寬度
避免設定固定像素寬度，以免在手機上產生水平捲動
在不同螢幕尺寸上測試

Background Compatibility

元件具有淺色背景，並設計為在淺色頁面上顯示良好。如果你的網站有深色背景，請考慮將元件放在淺色容器中：

<div style="background: #ffffff; padding: 20px; border-radius: 8px;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

Iframe Styling Limitations

因為元件使用 iframe，你無法直接為其內部內容（例如字型、顏色或按鈕樣式）套用樣式。元件內容使用 SidewaysData 的標準樣式以確保一致且專業的外觀。

如果你有特定的品牌需求，請聯絡 SidewaysData 支援以討論可行方案。

Adding Margins and Spacing

在容器上使用標準 CSS 為元件周圍加入間距：

<div style="margin: 40px 0;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

疑難排解

Common issues and solutions when using SidewaysData widgets.

小工具未顯示

檢查腳本 URL

確認腳本的 src 屬性指向正確的 URL：

Find Events: https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js
Live Results: https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js

檢查需要的屬性

Find Events 小工具 需要 data-organizer-ids 或 data-event-ids 其中一個
Live Results 小工具 需要 data-organizer-id

檢查 JavaScript 錯誤

打開瀏覽器的開發者主控台（通常按 F12 或右鍵 → 檢查 → Console）並查看錯誤訊息。若缺少 data-organizer-id，Live Results 小工具會記錄錯誤。

確認您的 ID 是否正確

再次確認 organizer 和 event ID 與 SidewaysData 顯示的一致。請參閱取得您的 ID。

顯示錯誤的活動

檢查 organizer ID 拼寫

Organizer ID 區分大小寫。請確保 ID 與 SidewaysData URL 中顯示的完全相同。

檢查篩選設定

如果您使用 data-event-status="open" 但沒有看到任何活動，可能表示您沒有任何開放報名的活動。嘗試移除該篩選以查看所有活動。

檢查結果模式

如果設定了 data-is-results-mode="true"，小工具會顯示有成績的活動，而非即將到來的活動。移除此屬性以查看即將到來的活動。

小工具高度問題

小工具內容被截斷

小工具應該會自動調整高度。如果內容被截斷：

檢查父元素是否設定了 overflow: hidden
確認沒有 CSS 對 iframe 設定固定高度
驗證瀏覽器是否啟用 JavaScript

過多的空白區域

如果小工具下方有太多空白，通常自動高度調整會處理此問題。如果沒有，可能是小工具已載入但沒有可顯示的活動。

內容未更新

活動未顯示近期變更

小工具在每次頁面載入時都會從 SidewaysData 載入最新內容。如果變更未顯示：

強制重新整理頁面（Ctrl+F5 或 Cmd+Shift+R）
清除瀏覽器快取
等待幾分鐘—有些變更可能需要一些時間才能傳播

實時成績未更新

在實時計時期間，成績應自動更新。如果沒有：

驗證該活動是否在 SidewaysData 上正在進行計時
重新整理頁面
檢查您的網路連線

網站建置平台問題

WordPress

如果使用 WordPress，您可能需要：

使用「Custom HTML」區塊或小工具
暫時停用任何阻擋腳本的外掛
檢查您的主題是否會從內容中移除 script 標籤

Squarespace

使用「Code Block」或「Embed」元素，並直接貼上 script 標籤。

Wix

使用「HTML iframe」或「Custom Element」功能來新增腳本。

跨來源問題

小工具會從 SidewaysData 的伺服器載入內容。如果出現跨來源錯誤：

確認您在腳本 URL 使用 https://（而非 http://）
如果使用 data-origin，驗證該網域是否已正確設定

仍然有問題嗎？

如果您已嘗試上述解決方法但小工具仍無法正確運作，請透過聯絡 SidewaysData 支援提供：

嵌入小工具的頁面 URL
您正在使用的完整 script 標籤
來自瀏覽器主控台的任何錯誤訊息
您的期望與實際發生情況的描述

上一則指南: Notifications 下一則指南: Awards & Stats

語言 🇹🇼 繁體中文

快速上手

尋找活動小工具

即時結果小工具

自訂

總覽

為何使用小工具？

可用的小工具

查找活動小工具

即時成績小工具

開始使用

需求

取得您的 ID

尋找您的主辦單位 ID

尋找活動 ID

從活動網址

從您的儀表板

使用瀏覽器開發者工具

需要協助？

尋找活動總覽

顯示內容

基本嵌入程式碼

預設行為

運作方式

下一步

設定選項

Specifying Events

data-organizer-ids

data-event-ids

Filtering Options

data-event-status

data-default-reg-status

data-limit-organizer-event-types

data-hide-volunteers-dropdown

Display Options

data-is-results-mode

data-newest-first

Advanced Options

data-origin

Complete Example

範例

顯示您的所有活動

僅顯示開放報名的活動

顯示有成績的活動

顯示特定活動

顯示多個主辦單位的活動

簡化視圖（最少篩選）

首頁小工具（開放報名活動，依最新排序）

預設為開放報名篩選

即時結果總覽

顯示內容

基本嵌入程式碼

運作方式

使用情境

下一步

設定

必要屬性

data-organizer-id

可選屬性

data-origin

完整範例

錯誤處理

放置建議

小工具樣式

Container Styling

Width Control

Height Behavior

Responsive Design

Background Compatibility

Iframe Styling Limitations

Adding Margins and Spacing

疑難排解

小工具未顯示

檢查腳本 URL

檢查需要的屬性

檢查 JavaScript 錯誤

確認您的 ID 是否正確

顯示錯誤的活動

檢查 organizer ID 拼寫

檢查篩選設定