Extend your reach by embedding SidewaysData widgets directly on your own website. Display your events and live results where your audience already visits—with just a single line of code.

Why Use Widgets?

• 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

Available Widgets

Find Events Widget

Display a filterable list of your events. Visitors can browse by year, registration status, event type, and more. Perfect for your events page or homepage.

Learn more about the Find Events widget

Live Results Widget

Show real-time race results during your events. Includes live chat for spectators and automatically switches between "Live Results" and "Final Results" based on event timing.

Learn more about the Live Results widget

Getting Started

1. Find your organizer ID or event IDs (see Getting Your IDs)
2. Choose which widget you need
3. Copy the embed code and paste it into your website
4. Customize with optional configuration attributes

Requirements

Widgets work on any website that supports JavaScript. This includes WordPress, Squarespace, Wix, custom HTML sites, and most website builders. You'll need the ability to add custom HTML or script tags to your pages.

To configure widgets, you'll need your organizer ID and optionally specific event IDs. Here's how to find them.

Finding Your Organizer ID

Your organizer ID appears in the URL when viewing your organizer page on SidewaysData.

1. Go to sidewaysdata.com
2. Navigate to your organizer page
3. Look at the URL—it will be in the format: sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

For example, if your URL is sidewaysdata.com/organizer/example-motorsports, your organizer ID is example-motorsports.

Finding Event IDs

Event IDs appear in event URLs and in your organizer dashboard.

From the Event URL

1. Navigate to any of your events on SidewaysData
2. Look at the URL—it will contain the event ID after /events/

For example: sidewaysdata.com/events/12345 means the event ID is 12345.

From Your Dashboard

1. Log in to SidewaysData
2. Go to your Events page
3. The event ID is displayed in the event list or visible in links

Using Browser Developer Tools

If you're having trouble finding IDs:

1. Right-click on your organizer or event page
2. Select "Inspect" or "Inspect Element"
3. Look for data attributes or URLs containing the ID

Need Help?

If you can't locate your IDs, contact SidewaysData support and we'll help you find them.

The Find Events widget displays a filterable list of events on your website. Visitors can browse upcoming events, filter by various criteria, and click through to register or view details on SidewaysData.

What It Displays

• Event cards with name, date, location, and registration status
• Filter dropdowns for year, event type, registration status, and volunteer opportunities
• Direct links to event pages on SidewaysData
• Responsive layout that adapts to any screen size

Basic Embed Code

Add this script tag to your website where you want the events to appear:

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

Replace your-organizer-id with your actual organizer ID (see Getting Your IDs).

Default Behavior

Without additional configuration, the widget will:

• Show all events from the specified organizer(s)
• Display filter dropdowns for year, event type, registration status, and volunteers
• Sort events by date (oldest first)
• Include events with any registration status

How It Works

The widget creates a responsive iframe that loads content from SidewaysData. The iframe automatically adjusts its height to fit the content, so there's no scrolling within the widget itself. Events stay synchronized with your SidewaysData account—any changes you make are reflected automatically.

Next Steps

• Configure the widget with optional attributes
• See common examples for different use cases

Customize the Find Events widget using data attributes on the script tag. All attributes are optional except for specifying which events to show.

Specifying Events

You must include at least one of these attributes to specify which events to display:

data-organizer-ids

Show all events from specific organizers. Use comma-separated values for multiple organizers.

<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

Show only specific events by their IDs. Use comma-separated values for multiple events.

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

Filtering Options

data-event-status

Filter events by registration status. Values: open, closed, or any.

data-event-status="open"

data-default-reg-status

Set the default value for the registration status dropdown. This pre-selects a filter option but still allows visitors to change it.

data-default-reg-status="open"

data-limit-organizer-event-types

When set to true, only show event types that the organizer actually uses, rather than all available event types in the dropdown.

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

data-hide-volunteers-dropdown

When set to true, hide the volunteer opportunities filter dropdown.

data-hide-volunteers-dropdown="true"

Display Options

data-is-results-mode

When set to true, show events that have results available instead of upcoming events. Useful for a "Past Results" page.

data-is-results-mode="true"

data-newest-first

When set to true, sort events with newest first instead of the default oldest-first ordering.

data-newest-first="true"

Advanced Options

data-origin

Use a custom domain instead of the default sidewaysdata.com. Only needed if you have a custom domain configured with 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.

Common configurations for the Find Events widget to match different use cases.

Show All Your Events

Display all events from your organization with all filter options available:

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

Show Only Open Registration

Display events that are currently accepting registrations:

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

Show Events with Results

Create a "Past Results" page showing events that have timing 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>

Show Specific Events

Display only particular events, such as a championship series:

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

Show Events from Multiple Organizers

Display events from several organizations on a regional or series page:

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

Simplified View (Minimal Filters)

Show events with a cleaner interface by hiding less-used filters:

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

Homepage Widget (Open Events, Newest First)

A common configuration for your website homepage:

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

Default to Open Registration Filter

Show all events but have the registration filter default to "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>

This differs from data-event-status="open" because visitors can still change the filter to see closed events.

The Live Results widget displays real-time race results on your website. Spectators can follow along during events and view final results afterward—all without leaving your site.

What It Displays

• Real-time timing results during live events
• "Live Results" or "Final Results" indicator based on event timing
• Built-in live chat powered by FastComments for spectator interaction
• Automatic updates as new times are recorded

Basic Embed Code

Add this script tag to your website where you want results to appear:

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

Replace your-organizer-id with your actual organizer ID (see Getting Your IDs).

Note: The Live Results widget requires the data-organizer-id attribute. The widget will not load without it.

How It Works

The widget creates a responsive iframe that connects to SidewaysData's live timing system. During an active event:

• Results update in real-time as times are recorded
• The widget shows "Live Results" to indicate timing is in progress
• Live chat allows spectators to discuss the event

After the event ends:

• Results remain available for viewing
• The widget switches to "Final Results" indicator
• Chat history is preserved

Use Cases

• Event day - Embed on your homepage so spectators can follow along live
• Dedicated results page - Create a permanent results page on your website
• Social media landing page - Share a link to your results page during events

Next Steps

• Configure the widget with optional attributes

The Live Results widget has minimal configuration—just your organizer ID is required.

Required Attribute

data-organizer-id

Your SidewaysData organizer ID. This is required for the widget to function.

<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

Use a custom domain instead of the default sidewaysdata.com. Only needed if you have a custom domain configured with 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. Make sure to include this required attribute.

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 widgets are embedded as iframes, which limits direct CSS styling. However, you can control how widgets fit into your page layout.

Container Styling

Wrap the widget in a container element to control its placement and maximum width:

<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

Widgets automatically expand to 100% of their container width. Control the width by styling the parent element:

<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

Widget height adjusts automatically based on content. The iframe uses postMessage to communicate its required height to your page, eliminating scrollbars within the widget.

Responsive Design

Widgets are designed to be responsive and work well on mobile devices. They automatically adapt to narrower screens. For best results:

• Use percentage-based or flexible container widths
• Avoid setting fixed pixel widths that might cause horizontal scrolling on mobile
• Test on various screen sizes

Background Compatibility

Widgets have a light background and are designed to work well on light-colored pages. If your site has a dark background, consider placing the widget in a light-colored container:

<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

Because widgets use iframes, you cannot directly style the content inside them (such as fonts, colors, or button styles). The widget content uses SidewaysData's standard styling to ensure a consistent, professional appearance.

If you have specific branding requirements, contact SidewaysData support to discuss options.

Adding Margins and Spacing

Add spacing around the widget using standard CSS on the container:

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

Widget Not Appearing

Check the script URL

Ensure the script src attribute points to the correct 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

Check required attributes

• Find Events widget requires either data-organizer-ids or data-event-ids
• Live Results widget requires data-organizer-id

Check for JavaScript errors

Open your browser's developer console (usually F12 or right-click → Inspect → Console) and look for error messages. The Live Results widget logs an error if data-organizer-id is missing.

Verify your IDs are correct

Double-check that organizer and event IDs match what's shown on SidewaysData. See Getting Your IDs.

Wrong Events Showing

Check organizer ID spelling

Organizer IDs are case-sensitive. Ensure the ID exactly matches what appears in the SidewaysData URL.

Check filter settings

If you're using data-event-status="open" but see no events, you may not have any events with open registration. Try removing this filter to see all events.

Check results mode

If data-is-results-mode="true" is set, the widget shows events with results, not upcoming events. Remove this attribute to see upcoming events.

Widget Height Issues

Widget appears cut off

The widget should automatically adjust its height. If content appears cut off:

1. Check that no parent element has overflow: hidden set
2. Ensure no CSS is setting a fixed height on the iframe
3. Verify JavaScript is enabled in your browser

Excessive empty space

If there's too much empty space below the widget, the automatic height adjustment should handle this. If not, the widget may be loading but has no events to display.

Content Not Updating

Events not showing recent changes

Widgets load fresh content from SidewaysData on each page load. If changes aren't appearing:

1. Hard refresh the page (Ctrl+F5 or Cmd+Shift+R)
2. Clear your browser cache
3. Wait a few minutes—some changes may take a moment to propagate

Live results not updating

During live timing, results should update automatically. If they're not:

1. Verify the event is actively being timed on SidewaysData
2. Refresh the page
3. Check your internet connection

Website Builder Issues

WordPress

If using WordPress, you may need to:

• Use a "Custom HTML" block or widget
• Disable any script-blocking plugins temporarily
• Check if your theme strips script tags from content

Squarespace

Use a "Code Block" or "Embed" element, and paste the script tag directly.

Wix

Use the "HTML iframe" or "Custom Element" feature to add the script.

Cross-Origin Issues

Widgets load content from SidewaysData's servers. If you see cross-origin errors:

1. Ensure you're using https:// (not http://) for the script URL
2. If using data-origin, verify the domain is correctly configured

Still Having Issues?

If you've tried these solutions and the widget still isn't working correctly, contact SidewaysData support with:

• The URL of the page where you're embedding the widget
• The complete script tag you're using
• Any error messages from the browser console
• A description of what you expect vs. what's happening