SidewaysData 위젯을 귀하의 웹사이트에 직접 삽입하여 도달 범위를 확장하세요. 단 한 줄의 코드로 청중이 이미 방문하는 곳에 이벤트와 라이브 결과를 표시하세요.

Why Use Widgets?

• One line of code - 단순히 웹사이트에 스크립트 태그를 붙여넣기만 하면 됩니다
• Always up-to-date - 이벤트와 결과가 SidewaysData에서 자동으로 동기화됩니다
• No maintenance - 모든 업데이트와 개선 사항을 저희가 처리합니다
• Professional appearance - 어떤 기기에서도 작동하는 깔끔하고 반응형 디자인
• Free - 추가 비용 없이 SidewaysData에 포함되어 있습니다

Available Widgets

Find Events Widget

필터 가능한 이벤트 목록을 표시합니다. 방문자는 연도, 등록 상태, 이벤트 유형 등으로 찾아볼 수 있습니다. 이벤트 페이지나 홈페이지에 적합합니다.

Learn more about the Find Events widget

Live Results Widget

이벤트 중 실시간 경기 결과를 표시합니다. 관중을 위한 라이브 채팅이 포함되며 이벤트 시간에 따라 "라이브 결과"와 "최종 결과"를 자동으로 전환합니다.

Learn more about the Live Results widget

Getting Started

1. 주최자 ID 또는 이벤트 ID를 찾으세요 (자세한 내용은 Getting Your IDs 참조)
2. 필요한 위젯을 선택하세요
3. 임베드 코드를 복사하여 웹사이트에 붙여넣으세요
4. 선택적 구성 속성으로 사용자 지정하세요

Requirements

위젯은 JavaScript를 지원하는 모든 웹사이트에서 작동합니다. 여기에는 WordPress, Squarespace, Wix, 맞춤 HTML 사이트 및 대부분의 웹사이트 빌더가 포함됩니다. 페이지에 사용자 지정 HTML 또는 스크립트 태그를 추가할 수 있어야 합니다.

위젯을 구성하려면 오거나이저 ID와 선택적으로 특정 이벤트 ID가 필요합니다. 다음은 이를 찾는 방법입니다.

오거나이저 ID 찾기

SidewaysData에서 오거나이저 페이지를 볼 때 URL에 오거나이저 ID가 표시됩니다.

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 지원에 문의해 주시면 찾는 것을 도와드리겠습니다.

Find Events 위젯은 귀하의 웹사이트에 필터 가능한 이벤트 목록을 표시합니다. 방문자는 다가오는 이벤트를 탐색하고, 다양한 기준으로 필터링하며, SidewaysData에서 등록하거나 세부 정보를 보기 위해 클릭할 수 있습니다.

What It Displays

• 이름, 날짜, 장소 및 등록 상태가 포함된 이벤트 카드
• 연도, 이벤트 유형, 등록 상태 및 자원봉사 기회에 대한 필터 드롭다운
• SidewaysData의 이벤트 페이지로 직접 연결
• 모든 화면 크기에 맞게 조정되는 반응형 레이아웃

Basic Embed Code

이 스크립트 태그를 이벤트를 표시하려는 웹사이트 위치에 추가하세요:

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

실제 organizer ID로 your-organizer-id를 교체하세요 (자세한 내용은 ID 가져오기를 참조하세요).

Default Behavior

• 지정된 organizer(s)의 모든 이벤트 표시
• 연도, 이벤트 유형, 등록 상태 및 자원봉사에 대한 필터 드롭다운 표시
• 날짜별로 이벤트 정렬(오래된 순)
• 모든 등록 상태의 이벤트 포함

How It Works

이 위젯은 SidewaysData에서 콘텐츠를 로드하는 반응형 iframe을 생성합니다. iframe은 콘텐츠에 맞춰 자동으로 높이를 조정하므로 위젯 내부에서 스크롤이 발생하지 않습니다. 이벤트는 귀하의 SidewaysData 계정과 동기화되어, 사용자가 변경한 내용이 자동으로 반영됩니다.

Next Steps

• 선택적 속성으로 위젯 구성
• 다양한 사용 사례에 대한 일반적인 예제를 참조하세요

Find Events 위젯을 script 태그의 데이터 속성으로 사용자화하세요. 표시할 이벤트를 지정하는 것을 제외하면 모든 속성은 선택 사항입니다.

Specifying Events

어떤 이벤트를 표시할지 지정하려면 반드시 다음 속성 중 하나 이상을 포함해야 합니다:

data-organizer-ids

특정 주최자의 모든 이벤트를 표시합니다. 여러 주최자는 쉼표로 구분된 값으로 지정하세요.

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

여러 주최자:

<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

다음은 여러 구성 옵션을 사용하는 예제입니다:

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

이 설정은 "example-motorsports"의 등록이 열린 이벤트를 표시하고, 필터에는 관련된 이벤트 유형만 보여주며, 자원봉사 드롭다운을 숨기고 최신 이벤트를 먼저 정렬합니다.

다양한 사용 사례에 맞춘 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>

결과가 있는 이벤트 표시

타이밍 결과가 있는 이벤트를 표시하는 "Past Results" 페이지를 만듭니다:

<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"으로 설정

모든 이벤트를 표시하되 등록 필터의 기본값을 "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 위젯은 귀하의 웹사이트에 실시간 레이스 결과를 표시합니다. 관람객은 이벤트 동안 실시간으로 따라가고 이후 최종 결과를 확인할 수 있으며—모두 사이트를 떠나지 않고도 가능합니다.

What It Displays

• 이벤트 중 실시간 타이밍 결과
• 이벤트 시점에 따라 "Live Results" 또는 "Final Results" 표시
• 관중 상호작용을 위한 FastComments 기반의 내장 라이브 채팅
• 새로운 기록이 등록될 때 자동으로 업데이트

Basic Embed Code

결과를 표시할 위치에 다음 스크립트 태그를 웹사이트에 추가하세요:

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

실제 organizer ID로 your-organizer-id를 교체하세요 (자세한 내용은 ID 가져오기 참조).

참고: Live Results 위젯은 data-organizer-id 속성이 필요합니다. 해당 속성이 없으면 위젯이 로드되지 않습니다.

How It Works

위젯은 SidewaysData의 실시간 타이밍 시스템에 연결되는 반응형 iframe을 생성합니다. 이벤트가 활성화된 동안:

• 기록이 등록될 때 결과가 실시간으로 업데이트됩니다
• 타이밍이 진행 중임을 표시하기 위해 "Live Results"를 표시합니다
• 라이브 채팅을 통해 관중이 이벤트를 토론할 수 있습니다

이벤트가 종료된 후:

• 결과는 계속해서 조회할 수 있습니다
• 위젯은 "Final Results" 표시로 전환됩니다
• 채팅 기록이 보존됩니다

Use Cases

• Event day - 홈페이지에 임베드하여 관람객이 실시간으로 따라볼 수 있게 합니다
• Dedicated results page - 웹사이트에 영구적인 결과 페이지를 만드세요
• Social media landing page - 이벤트 동안 결과 페이지 링크를 공유하세요

Next Steps

• 위젯 구성 (선택적 속성 포함)

Live Results 위젯은 최소한의 설정만 필요합니다—organizer ID만 있으면 됩니다.

Required Attribute

data-organizer-id

Your SidewaysData organizer ID. 이 속성은 위젯이 작동하려면 필요합니다.

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

See Getting Your IDs for help finding your organizer ID.

Optional Attribute

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>

Complete Example

A typical Live Results embed:

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

Error Handling

If the data-organizer-id attribute is missing, the widget will log an error to the browser console and not render. 이 필수 속성을 반드시 포함하세요.

Placement Tips

• Place the widget in a container with adequate width (at least 320px recommended)
• The widget automatically adjusts its height to fit the content
• Consider placing above the fold on event days for maximum visibility
• Works well as the main content of a dedicated "Live Results" page

SidewaysData 위젯은 iframe으로 임베드되므로 직접적인 CSS 스타일링이 제한됩니다. 그러나 위젯이 페이지 레이아웃에 어떻게 맞춰지는지는 제어할 수 있습니다.

컨테이너 스타일링

위젯을 컨테이너 요소로 감싸서 배치와 최대 너비를 제어하세요:

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

너비 제어

위젯은 자동으로 컨테이너 너비의 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>

높이 동작

위젯 높이는 콘텐츠에 따라 자동으로 조정됩니다. iframe은 필요한 높이를 페이지에 전달하기 위해 postMessage를 사용하므로 위젯 내부에 스크롤바가 생기지 않습니다.

반응형 디자인

위젯은 반응형으로 설계되어 모바일 기기에서도 잘 작동합니다. 좁은 화면에 자동으로 적응합니다. 최상의 결과를 위해:

• 퍼센트 기반 또는 유연한 컨테이너 너비를 사용하세요
• 모바일에서 가로 스크롤을 유발할 수 있는 고정 픽셀 너비 설정을 피하세요
• 다양한 화면 크기에서 테스트하세요

배경 호환성

위젯은 밝은 배경을 사용하며 밝은 색 페이지에서 잘 동작하도록 설계되었습니다. 사이트가 어두운 배경이라면 위젯을 밝은 색 컨테이너에 배치하는 것을 고려하세요:

<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 스타일링 제한

위젯은 iframe을 사용하므로 내부 콘텐츠(예: 글꼴, 색상, 버튼 스타일)를 직접 스타일링할 수 없습니다. 위젯 콘텐츠는 일관되고 전문적인 외형을 보장하기 위해 SidewaysData의 표준 스타일을 사용합니다.

특정 브랜딩 요구사항이 있는 경우, 옵션을 논의하기 위해 SidewaysData 지원에 문의하세요.

여백 및 간격 추가

컨테이너에 표준 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>

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

필수 속성 확인

• Find Events widget는 data-organizer-ids 또는 data-event-ids 중 하나가 필요합니다
• Live Results widget는 data-organizer-id가 필요합니다

JavaScript 오류 확인

브라우저의 개발자 콘솔(보통 F12 또는 우클릭 → 검사 → Console)을 열고 오류 메시지를 확인하세요. data-organizer-id가 없으면 Live Results widget이 오류를 기록합니다.

ID가 올바른지 확인

주최자(organizer) 및 이벤트 ID가 SidewaysData에 표시된 것과 일치하는지 다시 확인하세요. 자세한 내용은 ID 가져오기를 참조하세요.

잘못된 이벤트가 표시될 때

주최자 ID 철자 확인

주최자 ID는 대/소문자를 구분합니다. ID가 SidewaysData URL에 나타나는 것과 정확히 일치하는지 확인하세요.

필터 설정 확인

만약 data-event-status="open"을 사용 중인데 이벤트가 보이지 않는다면, 현재 등록이 열린 이벤트가 없을 수 있습니다. 이 필터를 제거하여 모든 이벤트를 표시해 보세요.

결과 모드 확인

만약 data-is-results-mode="true"가 설정되어 있으면, 위젯은 다가오는 이벤트가 아니라 결과가 있는 이벤트를 표시합니다. 다가오는 이벤트를 보려면 이 속성을 제거하세요.

위젯 높이 문제

위젯이 잘려 보일 때

위젯은 자동으로 높이를 조절해야 합니다. 내용이 잘려 보이면:

1. 상위 요소에 overflow: hidden이 설정되어 있지 않은지 확인하세요
2. iframe에 고정 높이를 설정하는 CSS가 없는지 확인하세요
3. 브라우저에서 JavaScript가 활성화되어 있는지 확인하세요

과도한 빈 공간

위젯 아래에 너무 많은 빈 공간이 있다면 자동 높이 조정이 이를 처리해야 합니다. 그렇지 않다면 위젯은 로드되었지만 표시할 이벤트가 없을 수 있습니다.

콘텐츠가 업데이트되지 않을 때

이벤트가 최근 변경 사항을 반영하지 않을 때

위젯은 페이지 로드마다 SidewaysData로부터 최신 콘텐츠를 불러옵니다. 변경 사항이 반영되지 않는다면:

1. 페이지를 강력 새로고침하세요 (Ctrl+F5 또는 Cmd+Shift+R)
2. 브라우저 캐시를 지우세요
3. 몇 분 기다리세요—일부 변경 사항은 전파되는 데 시간이 걸릴 수 있습니다

라이브 결과가 업데이트되지 않을 때

라이브 타이밍 중에는 결과가 자동으로 업데이트되어야 합니다. 업데이트되지 않는다면:

1. 해당 이벤트가 SidewaysData에서 실제로 타이밍되고 있는지 확인하세요
2. 페이지를 새로고침하세요
3. 인터넷 연결을 확인하세요

사이트 빌더 관련 문제

WordPress

WordPress를 사용하는 경우 다음이 필요할 수 있습니다:

• "Custom HTML" 블록 또는 위젯을 사용하세요
• 스크립트 차단 플러그인을 일시적으로 비활성화하세요
• 테마가 콘텐츠에서 script 태그를 제거하는지 확인하세요

Squarespace

"Code Block" 또는 "Embed" 요소를 사용하고 스크립트 태그를 직접 붙여넣으세요.

Wix

스크립트를 추가하려면 "HTML iframe" 또는 "Custom Element" 기능을 사용하세요

교차 출처 문제

위젯은 SidewaysData의 서버에서 콘텐츠를 로드합니다. 교차 출처 오류가 보이면:

1. 스크립트 URL에 http://가 아닌 https://를 사용하고 있는지 확인하세요
2. data-origin을 사용하는 경우 도메인이 올바르게 구성되어 있는지 확인하세요

여전히 문제가 있나요?

이러한 해결책을 시도했음에도 위젯이 여전히 제대로 작동하지 않는다면, SidewaysData 지원에 다음을 제공하여 문의하세요:

• 위젯을 삽입한 페이지의 URL
• 사용 중인 전체 스크립트 태그
• 브라우저 콘솔의 오류 메시지
• 기대하는 동작과 실제 발생하는 문제에 대한 설명