SidewaysDataSidewaysData
Menu Icon

语言 🇨🇳 简体中文
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇺🇸 English (US) 🇨🇦 Français (Canada) 🇫🇷 Français (France) 🇩🇪 Deutsch 🇨🇾 Ελληνικά (Κύπρος) 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇺🇦 Русский (Украина) 🇧🇦 Српски (БиХ) 🇷🇸 Srpski (Latinica) 🇲🇪 Српски (Црна Гора) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

入门

概述
获取您的 ID

查找活动小部件

查找活动概述
配置选项
示例

实时结果小部件

实时结果概述
配置

自定义

小部件样式
故障排除

概述 Internal Link

通过将 SidewaysData 小部件直接嵌入到自己的网站上，扩大你的影响范围。在受众已有访问的网站上显示你的赛事和实时结果——只需一行代码。

为什么使用小部件？

  • 一行代码 - 只需将 script 标签粘贴到你的网站
  • 始终保持最新 - 赛事和结果会自动与 SidewaysData 同步
  • 无需维护 - 我们负责所有更新和改进
  • 专业外观 - 精致、响应式的设计，适用于任何设备
  • 免费 - 随 SidewaysData 提供，无需额外费用

可用小部件

查找赛事小部件

显示可筛选的赛事列表。访客可以按年份、报名状态、赛事类型等进行浏览。非常适合你的赛事页面或首页。

了解有关查找赛事小部件的更多信息

实时结果小部件

在赛事期间显示实时比赛结果。包括为观众提供的实时聊天，并根据赛事时间自动在“实时结果”和“最终结果”之间切换。

了解有关实时结果小部件的更多信息

入门

  1. 找到你的组织者 ID 或赛事 ID（参见 获取你的 ID）
  2. 选择你需要的小部件
  3. 复制嵌入代码并粘贴到你的网站
  4. 使用可选配置属性进行自定义

要求

小部件可在任何支持 JavaScript 的网站上使用。这包括 WordPress、Squarespace、Wix、自定义 HTML 站点以及大多数网站构建器。你需要能够向页面添加自定义 HTML 或 script 标签。

获取您的 ID Internal Link

要配置小部件，您需要您的组织者 ID，并且可选择需要特定的活动 ID。以下是查找它们的方法。

查找您的组织者 ID

在 SidewaysData 查看您的组织者页面时，组织者 ID 会出现在 URL 中。

  1. 访问 sidewaysdata.com
  2. 转到您的组织者页面
  3. 查看 URL——格式为： sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

例如，如果您的 URL 是 sidewaysdata.com/organizer/example-motorsports，则您的组织者 ID 为 example-motorsports。

查找活动 ID

活动 ID 会出现在活动的 URL 中以及您的组织者仪表板中。

从活动 URL

  1. 在 SidewaysData 上打开任意一个活动
  2. 查看 URL——在 /events/ 之后会包含活动 ID

例如：sidewaysdata.com/events/12345 表示活动 ID 为 12345。

从您的仪表板

  1. 登录 SidewaysData
  2. 转到您的 活动页面
  3. 活动 ID 会显示在活动列表中或可在链接中看到

使用浏览器开发者工具

如果您无法找到 ID：

  1. 在组织者或活动页面上右键单击
  2. 选择 “Inspect” 或 “Inspect Element”
  3. 查找包含 ID 的数据属性或 URL

需要帮助？

如果您找不到 ID，请联系 SidewaysData support，我们会帮助您查找。

查找活动概述 Internal Link

“查找活动”小部件在您的网站上显示一个可筛选的活动列表。访客可以浏览即将举行的活动、按各种条件筛选，并点击前往 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) 的所有活动
  • 显示用于年份、活动类型、注册状态和志愿者的筛选下拉菜单
  • 按日期排序活动（最早的在前）
  • 包含任何注册状态的活动

工作原理

小部件会创建一个响应式 iframe，从 SidewaysData 加载内容。iframe 会自动调整高度以适应内容，因此小部件内部不会出现滚动条。活动会与您的 SidewaysData 帐户保持同步——您所做的任何更改都会自动反映。

下一步

配置选项 Internal Link

使用脚本标签上的数据属性来自定义 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"

data-hide-volunteers-dropdown

设置为 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

Here's an example using multiple configuration options:

<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.

示例 Internal Link

为 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"，因为访客仍然可以更改筛选以查看已关闭的活动。

实时结果概述 Internal Link

实时结果小部件在您的网站上显示实时比赛成绩。观众可以在活动期间跟随并在赛后查看最终成绩——全部在您网站内完成，无需离开。

它显示的内容

  • 活动期间的实时计时结果
  • 基于赛事时间显示“实时结果”或“最终结果”指示
  • 由 FastComments 提供支持的内置实时聊天，便于观众互动
  • 随着新成绩记录自动更新

基本嵌入代码

将此脚本标签添加到您希望显示结果的网站位置：

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

将 your-organizer-id 替换为您实际的组织者 ID（参见 获取您的 ID）。

注意： 实时结果小部件需要 data-organizer-id 属性。没有它小部件将无法加载。

工作原理

该小部件创建了一个响应式 iframe，连接到 SidewaysData 的实时计时系统。在活动进行中：

  • 成绩在记录时间时实时更新
  • 小部件显示“实时结果”以表明计时正在进行
  • 实时聊天允许观众讨论赛事

活动结束后：

  • 成绩仍然可以查看
  • 小部件切换为“最终结果”指示
  • 聊天记录会被保留

使用场景

  • 活动当天 - 将其嵌入到您的主页，方便观众实时跟随
  • 专用成绩页面 - 在您的网站上创建永久的成绩页面
  • 社交媒体登陆页 - 在活动期间分享成绩页面的链接

后续步骤

配置 Internal Link

实时结果小部件的配置很简单——只需提供您的 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>

完整示例

典型的实时结果嵌入示例：

<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" 页面主要内容时效果良好

小部件样式 Internal Link

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>

故障排除 Internal Link

常见问题与在使用 SidewaysData 小部件 时的解决方案。

小部件 未显示

检查脚本 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

检查必需的属性

  • 查找活动小部件 需要 data-organizer-ids 或 data-event-ids 其中之一
  • 实时结果小部件 需要 data-organizer-id

检查 JavaScript 错误

打开浏览器的开发者控制台（通常按 F12 或 右键 → 检查 → 控制台）并查看错误信息。如果缺少 data-organizer-id，实时结果小部件会记录一个错误。

验证您的 ID 是否正确

仔细核对组织者和活动 ID 是否与 SidewaysData 上显示的一致。请参阅 获取您的 ID。

显示错误的活动

检查组织者 ID 拼写

组织者 ID 区分大小写。确保 ID 与 SidewaysData URL 中显示的完全一致。

检查筛选设置

如果您使用了 data-event-status="open" 但看不到任何活动，可能没有任何活动开放报名。尝试移除此筛选以查看所有活动。

检查结果模式

如果设置了 data-is-results-mode="true"，小部件会显示有成绩的活动，而不是即将到来的活动。移除此属性以查看即将到来的活动。

小部件 高度问题

小部件 显示被截断

小部件应自动调整其高度。如果内容被截断：

  1. 检查父元素是否设置了 overflow: hidden
  2. 确保没有 CSS 为 iframe 设置固定高度
  3. 验证浏览器已启用 JavaScript

过多的空白空间

如果小部件下面有过多空白，自动高度调整应能处理此问题。如果没有，小部件可能已加载但没有要显示的活动。

内容 未更新

活动未显示最近的更改

小部件在每次页面加载时都会从 SidewaysData 加载最新内容。如果更改未出现：

  1. 强制刷新页面 (Ctrl+F5 or Cmd+Shift+R)
  2. 清除浏览器缓存
  3. 等待几分钟——有些更改可能需要一点时间传播

实时结果 未更新

在实时计时期间，结果应自动更新。如果没有：

  1. 验证该活动是否在 SidewaysData 上处于正在计时状态
  2. 刷新页面
  3. 检查您的网络连接

网站构建器 问题

WordPress

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

  • 使用 “自定义 HTML” 块或小部件
  • 暂时禁用任何阻止脚本的插件
  • 检查您的主题是否从内容中剥离了 script 标签

Squarespace

使用 “代码块” 或 “嵌入” 元素，并直接粘贴 script 标签。

Wix

使用 “HTML iframe” 或 “自定义元素” 功能来添加脚本。

跨域 问题

小部件从 SidewaysData 的服务器加载内容。如果您看到跨域错误：

  1. 确保您使用的是 https://（而不是 http://）的脚本 URL
  2. 如果使用了 data-origin，请验证域名已正确配置

仍然有问题？

如果您已尝试这些解决方案但小部件仍未正常工作，请通过以下方式 联系 SidewaysData 支持 并提供：

  • 嵌入小部件的页面 URL
  • 您正在使用的完整脚本标签
  • 浏览器控制台中的任何错误信息
  • 预期行为与实际情况的描述