Add Curling IO features to your club website
Add your club's public calendar, results, current games, rental availability, or a sponsor to a website you manage outside Curling IO. Each embed reads current public information from your club's Curling IO site.
If Curling IO hosts your website
Use Website Studio to place current-game and sponsor blocks on your pages. You can ask the Studio assistant to add them. Your hosted site also has a public Calendar page that you can link from its navigation.
Sponsor blocks and hosted current-game blocks require Premium. You don't need the external-site snippets below for those hosted features.
Add an embed to another website
- Find your club's Curling IO address, such as
yourclub.curling.io. - Copy the snippet for the feature you want.
- Replace
yourclub.curling.iowith your club's address. - Add the snippet to your website's HTML where you want the feature to appear.
- Preview the published page and test its controls.
Your website editor must allow HTML and JavaScript. If it has a custom HTML block, put the snippet there. Load each feature's script once per page, even if you place that feature more than once.
Keep the element names exactly as shown. The calendar and current-games embeds use different names.
Rental booking
Show available rental times and let visitors select Book to continue to your Curling IO cart. See Add rental booking to your website for the snippet, filters, hosted placement and checkout handoff.
Calendar
Your public Calendar must be enabled in Website Studio. The calendar embed shows your public schedule, including games, available rentals, and other public calendar entries. Visitors can change dates and views.
<curling-io-calendar styling="curling-io" view="day"></curling-io-calendar>
<script src="https://yourclub.curling.io/widgets/calendar.js" defer></script>
Start with Day view when placing the calendar in a narrow column. Give Week or Month views more room.
You can add these attributes to the calendar element:
| Attribute | Example | Purpose |
|---|---|---|
view | view="list" | Start in day, week, month, or list view. |
date | date="2026-11-01" | Start on a particular date. |
categories | categories="games,other" | Select from games, rentals, and other. |
hide-category-filter | hide-category-filter | Hide the category controls. |
products | products="1,2" | Limit entries to the listed product IDs. |
resources | resources="1,2" | Limit entries to the listed resource IDs. |
language | language="fr" | Request French labels. |
Product and resource IDs are the numbers in their administration-page URLs. Only public calendar information is shown. See Calendar for managing what appears.
Current games
Show games in progress, upcoming games, and recent games, with their scores and status. Games must be public and their results must be published. The embed shows No current games. when none qualify.
<cio-current-games styling="curling-io"></cio-current-games>
<script src="https://yourclub.curling.io/widgets/current-games.js" defer></script>
Add language="fr" to request French labels. Add color-mode="dark" if you
want the embed's dark presentation.
Live end-by-end scoring requires Premium. Use Results to manage publication and scoring.
Results
Use the Results embed to show an event's published schedule, standings, teams and game scores on another website. Its game links open the detailed result, including saved ends when end scoring is enabled.
Sponsor
The sponsor embed requires Premium. It shows an enabled sponsor's name, with a logo and website link when valid values are configured. Leave the sponsor choice to Curling IO, or select a particular sponsor by its ID.
<cio-sponsor styling="curling-io"></cio-sponsor>
<script src="https://yourclub.curling.io/widgets/sponsor.js" defer></script>
For a particular sponsor, add sponsor-id="123" to the element, using the
number in that sponsor's administration-page URL. Add language="fr" to
request French labels. If no enabled sponsor is available, the embed stays
empty.
See Sponsors for adding logos and links.
Styling and older widgets
The snippets use styling="curling-io" to give each embed its own Curling IO
presentation. Preview it inside your actual page, especially if you use narrow
columns.
If your website already uses older Curling IO widgets, keep their instructions with that integration. The legacy widget API documents those older embeds.