Skip to main content

Embed Ladder and Fixture Views

This article outlines how to create embeddable views of your Fixtures and Ladders on Clipboard for your Association website.

Overview

Clipboard offers flexible ways to embed fixture and ladder information on your Association website:

  • Direct Linking: Simple URL-based navigation to specific views

  • Basic Embedding: Embedding fixtures or ladders without filter options

  • Filterable Embedding: Embedding with filter controls for users to customise views

Important: Once you copy the link or embed code, all embedded content will display data based on the filters selected when you viewed it. The embedded view will always reflect what's currently visible in Compete.

Direct Linking to Clipboard Views

Direct linking is perfect when you want to direct website visitors to the full Clipboard Compete interface.

  1. Navigate to your Fixtures or Ladders page

  2. Apply the filters you want (Season, Competition, Grade, etc.)

  3. Copy the URL from your browser

  4. Add this link to your Association website as a button or text link

Use cases:

  • When you want users to access all Clipboard functionality

  • When embedding isn't necessary or preferred

  • For simpler website implementations

Video: Embedding Fixtures and Ladders with iFrame

What is iFrame Embedding?

iFrame embedding lets you display Clipboard content on your website. Visitors can interact with Fixtures and Ladders, use filters and view details without being redirected to a separate Clipboard page. This integration maintains your website's branding while providing full Clipboard functionality.

Embedding Non-Filterable Views via an iFrame

Non-filterable embedding shows a specific view of fixtures or ladders, based on what you're currently viewing in Clipboard. This is good for when you already have filters and a page hierarchy built into your Association website.

For Fixtures

  1. Go to the Fixtures page

  2. Set your desired filters (Season, Competition, Grade, etc.)

  3. Click the More dropdown button in the top right

  4. Select Embed from the dropdown menu

  5. Make sure the Filters included option is NOT checked

  6. Customise appearance options:

    • Background and text colours

    • Icon and divider colours

    • Size (responsive or fixed)

  7. Copy the generated code by clicking the Copy button

  8. Provide this code to your website administrator to add to your website

For Ladders

  1. Go to the Ladders page

  2. Apply your preferred filters (Season, Competition, etc.)

  3. Click the Embed button in the top right

  4. Make sure the Filters included option is NOT checked

  5. Customise appearance options

  6. Copy the code by clicking the Copy button

  7. Provide this code to your website administrator to add to your website

Code Examples for Non-Filterable Embeds

Basic Football Fixtures Embed:

<iframe
  frameborder="0"
  src="https://fixtures.clipboard.app/idsca/ladder?associationSeasonId=4275c86c-e1e0-11ef-a07b-419f310192b3&associationActivityGradeIds=%5B%22354b30fa-e1e0-11ef-9f96-b557c382699f%22%5D&organisationIds=%5B3247%2C4782%2C5422%2C5203%2C5377%2C4013%2C5450%2C5435%5D&view=table&competitionGroupId=a3b261f4-1651-4f1b-be55-267387c7dd88&competitionType=competition&background=%23ffffff&primaryText=%2350aa93&secondaryText=%23aa4674&tableDivider=rgba%280%2C+0%2C+0%2C+.12%29&icons=%2350aa93&enableFilters=false"
  width="600"
  height="800"
></iframe>

Use cases:

  • Sport-specific pages where only one view is needed

  • When simplicity is preferred over user customisation

  • For quick, single-purpose embeds

Embedding Filterable Views via an iFrame

Filterable embedding lets website visitors customise their view using filters, similar to how they would in Clipboard.

This is the best option if you have a single "Fixtures" and "Results" page on your website, as it's the "set-and-forget" option which encourages parents, students, and other website visitors to filter to the fixtures themselves.

For Fixtures

  1. Go to the Fixtures page

  2. Click the More dropdown button in the top right

  3. Select Embed from the dropdown menu

  4. Under Filters, check the Filters included option

  5. Customise other appearance settings

  6. Copy the code by clicking the Copy button

  7. Provide this code to your website administrator to add to your website

For Ladders

  1. Go to the Ladders page

  2. Click the Embed button in the top right

  3. Check the Filters included option

  4. Customise other settings

  5. Copy the code by clicking the Copy button

  6. Provide this code to your website administrator to add to your website

Code Examples for Filterable Embeds

Full-Featured Fixtures Page:

<iframe
  frameborder="0"
  src="https://fixtures.clipboard.app/idsca/ladder?associationSeasonId=4275c86c-e1e0-11ef-a07b-419f310192b3&associationActivityGradeIds=%5B%22354b30fa-e1e0-11ef-9f96-b557c382699f%22%5D&organisationIds=%5B3247%2C4782%2C5422%2C5203%2C5377%2C4013%2C5450%2C5435%5D&view=table&competitionGroupId=a3b261f4-1651-4f1b-be55-267387c7dd88&competitionType=competition&background=%23ffffff&primaryText=%2350aa93&secondaryText=%23aa4674&tableDivider=rgba%280%2C+0%2C+0%2C+.12%29&icons=%2350aa93&enableFilters=true"
  width="600"
  height="800"
></iframe>

Use cases:

  • Main results pages where users need to switch between sports

  • Association sites with multiple seasons or competitions

  • When user customisation is important

Customise iFrame Dimensions

You can adjust the iFrame dimensions to fit your website layout:

  • Width: Set to "100%" for responsive design, or specify pixels (e.g., "800")

  • Height: Adjust based on your page layout (recommended minimum: 500px)

Example with custom dimensions:

html
<iframe src="https://fixtures.clipboard.app/idsca/fixtures" width="800" height="700" frameborder="0" title="School Fixtures"> </iframe>

FAQ

Q: Why would I choose filtering vs. non-filtering embeds?
​A: Filtering gives your website visitors the flexibility to view different competitions and seasons. Non-filtering is simpler when you only need to display one specific view.

Q: Why does my embedded content not match expectations?

A: The embedded content will display exactly what you filtered in Clipboard Compete before generating the embed code. If you need different content, return to Clipboard Compete, apply new filters and generate a new embed code.
​

Q: Can I customise the appearance further?
​A: Yes, the embed options allow you to change colours and sizing to match your website design.

Q: Will changes in Clipboard automatically appear in embeds?
​A: Yes, embeds dynamically display the current data from Clipboard, so any updates to scores, fixtures or team information will appear automatically.

Q: Can I embed both fixtures and ladders on the same page?
​A: Yes, you can use multiple embed codes on different sections of your webpage.

Q: Can I share these embedded materials with my schools?
​A: You can! Schools can link directly to the unauthenticated Compete view, or you can provide the embed code if they wish. Note that they don't have access to this themselves.

Q: Do I need special technical knowledge to embed Clipboard content?
​A: Basic embedding requires no technical knowledge, but you'll need to work with your website administrator to add the code to your website. More advanced filtering may require additional technical assistance.
​
​Q: Why is my Website Security Blocking iFrame?

A: Some websites have security policies that block iFrames. Contact your website administrator to ensure iFrame embedding is permitted for Clipboard domains.

Did this answer your question?