Configuration
All available options for customizing embed widgets
Configuration
Configure your embed widgets using data attributes on the script tag.
Required Attributes
These attributes are required for all widgets:
| Parameter | Type | Required | Description |
|---|---|---|---|
data-token | string | Yes | Your embed token (starts with emb_). Create tokens in your dashboard. |
data-event | string | Yes | Event slug to display data for |
data-view | string | Yes | Widget type: standings, results, schedule, or register |
Example
<script src="https://rhumby.com/embed.js"
data-token="emb_abc123"
data-event="friday-night-spring-2026"
data-view="standings">
</script>Optional Attributes
Customize widget behavior with these optional attributes:
| Parameter | Type | Required | Description |
|---|---|---|---|
data-theme | string | No | Theme: light, dark, or auto. Default: light |
data-fleet | string | No | Filter by fleet ID or name. Shows all fleets if omitted. |
data-race | string | No | For results view: show specific race number. Shows all races if omitted. |
data-refresh | number | No | Auto-refresh interval in seconds. Default: 60. Set to 0 to disable. |
data-max-results | number | No | Maximum number of results to display. Default: 20 |
data-show-dropped | boolean | No | For standings view: show dropped races. Default: true |
data-show-times | boolean | No | For results view: show finish times. Default: true |
data-compact | boolean | No | Use compact layout (smaller font, tighter spacing). Default: false |
Configuration Examples
Standings with Fleet Filter
Show only PHRF A standings, dark theme:
<script src="https://rhumby.com/embed.js"
data-token="emb_abc123"
data-event="friday-night-spring-2026"
data-view="standings"
data-fleet="PHRF A"
data-theme="dark">
</script>Results for Specific Race
Show results for race 4 only, refresh every 30 seconds:
<script src="https://rhumby.com/embed.js"
data-token="emb_abc123"
data-event="friday-night-spring-2026"
data-view="results"
data-race="4"
data-refresh="30">
</script>Compact Schedule
Display schedule in compact mode with no auto-refresh:
<script src="https://rhumby.com/embed.js"
data-token="emb_abc123"
data-event="friday-night-spring-2026"
data-view="schedule"
data-compact="true"
data-refresh="0">
</script>Registration Form
Simple registration widget with auto theme detection:
<script src="https://rhumby.com/embed.js"
data-token="emb_abc123"
data-event="friday-night-spring-2026"
data-view="register"
data-theme="auto">
</script>Responsive Behavior
Widgets automatically adapt to their container width:
- > 640px: Full layout with all columns
- 480-640px: Medium layout, some columns hidden
- < 480px: Compact mobile layout, stacked rows
You don't need to configure this - it just works.
Performance Tips
Optimize Refresh Rate
Don't refresh faster than you need:
- During racing: 30-60 seconds
- Results posted: 5 minutes
- Historical data: Disable refresh (
data-refresh="0")
Limit Results
For large fleets, limit displayed results:
<script src="https://rhumby.com/embed.js"
data-token="emb_abc123"
data-event="friday-night-spring-2026"
data-view="standings"
data-max-results="10">
</script>Use Fleet Filters
Show only relevant fleets instead of all fleets:
<script src="https://rhumby.com/embed.js"
data-token="emb_abc123"
data-event="friday-night-spring-2026"
data-view="standings"
data-fleet="PHRF A">
</script>Multiple Widgets
You can embed multiple widgets on the same page:
<!-- Standings -->
<div class="standings">
<script src="https://rhumby.com/embed.js"
data-token="emb_abc123"
data-event="friday-night-spring-2026"
data-view="standings">
</script>
</div>
<!-- Schedule -->
<div class="schedule">
<script src="https://rhumby.com/embed.js"
data-token="emb_abc123"
data-event="friday-night-spring-2026"
data-view="schedule">
</script>
</div>Each widget operates independently.
Use the data-theme="auto" option to automatically match your website's light/dark mode preference based on the user's system settings.
Error Handling
If the widget can't load data, it will display an error message. Common issues:
- Invalid token
- Event not found
- Network error
- Token doesn't allow the requested view
Check the browser console for detailed error messages.
Next Steps
- Customize themes to match your brand
- Create embed tokens with specific permissions