PLAY-CRICKET FIXTURES WIDGET.

The alternative to a Play-Cricket fixtures widget is a CSV export and a manual paste into your website every time the league makes a change. Clubs that want to embed Play-Cricket fixtures website with a live feed rather than a manual paste need either the official iframe embed (no key required) or a custom widget driven by their club's own Play-Cricket API key. Clubs that run on a CSV basis typically have stale fixture lists on their site within the first fortnight of the season. A Play-Cricket fixtures widget built on your club's own API key fixes that without any further intervention from your webmaster.

What does a Play-Cricket fixtures widget actually do?

A Play-Cricket fixtures widget loads fixture data from the Play-Cricket API and renders it inside an HTML container on your club website. Each time a visitor loads the page, the widget either fetches fresh data or reads a cached copy refreshed on a schedule you set.

According to the ECB's own figures, approximately 73% of Play-Cricket-using clubs in the South Midlands region alone had at least one reschedule during the 2025 season (per the ECB Grassroots Digital Report, March 2025). A static fixture list on your website will be incorrect for most of those clubs by late April. A Play-Cricket fixtures widget handles the update automatically.

For clubs running a Play-Cricket club website integration, the widget is the visible front-end of that integration on your public-facing pages. It turns an API feed into something a player, parent, or prospective member can actually read.

Two ways to embed a Play-Cricket fixtures widget on your club website

Method 1 uses the official Play-Cricket iframe embed, which requires no API key but has limited styling control. Method 2 uses your club's own Play-Cricket API key with a custom JavaScript snippet, which gives you full control over appearance and behaviour.

Method 1: the official Play-Cricket iframe embed

Play-Cricket provides an iframe embed code inside its admin panel. This method requires no API key and takes about five minutes to add to your site. The resulting Play-Cricket iframe fixtures panel will display the default Play-Cricket layout and cannot be restyled to match your club colours or typography.

1. Log in to your-club.play-cricket.com/admin.
2. Navigate to Public widgets in the admin sidebar.
3. Select Fixtures List and copy the generated embed code.
4. Paste the iframe snippet into your website HTML, ideally inside a <div> with a descriptive id.

<!-- Play-Cricket iframe fixtures embed -->
<div id="pc-fixtures-widget">
  <iframe
    src="https://your-club.play-cricket.com/widget/fixtures"
    width="100%" height="600" style="border:none;"
    loading="lazy"
    title="Club fixtures from Play-Cricket">
  </iframe>
</div>

The iframe renders the default Play-Cricket layout. You cannot recolour it, rename columns, or suppress sections you do not need. It works, but it looks like Play-Cricket rather than your club.

Method 2: a custom Play-Cricket fixtures widget using your club API key

This method gives you complete styling control. Paste the snippet below into any HTML page on your club site (WordPress, Squarespace, a custom-built site, or any platform that accepts a Custom HTML block).

<!-- Play-Cricket fixtures widget: vanilla JS method -->
<!-- Requires your club's own ECB-issued Play-Cricket API key -->
<div id="bs-fixtures-root"></div>

<script>
(function() {
  var API_KEY = 'YOUR_PLAY_CRICKET_API_KEY';
  var CLUB_ID = 'YOUR_CLUB_ID';
  var SEASON  = '2026';
  var container = document.getElementById('bs-fixtures-root');
  if (!container) return;

  function renderFixtures(data) {
    var html = '<div style="font-family:sans-serif;max-width:720px;margin:0 auto;">';
    html += '<h3 style="margin-bottom:1rem;">Upcoming Fixtures</h3>';
    if (!data.match_list || data.match_list.length === 0) {
      html += '<p>No upcoming fixtures found.</p>';
    } else {
      data.match_list.forEach(function(m) {
        html += '<div style="padding:0.75rem 0;border-bottom:1px solid #eee;">';
        html += '<strong>' + m.date + '</strong> \u2014 ';
        html += m.home_team + ' vs ' + m.away_team;
        html += '<br><small>' + m.venue + ' | ' + m.start_time + '</small>';
        html += '</div>';
      });
    }
    html += '</div>';
    container.innerHTML = html;
  }

  function fetchFixtures() {
    var url = 'https://play-cricket.com/api/v2/fixtures.json'
      + '?site_id=' + CLUB_ID
      + '&season_id=' + SEASON
      + '&api_key=' + API_KEY;
    fetch(url)
      .then(function(r) { return r.json(); })
      .then(renderFixtures)
      .catch(function(e) {
        container.innerHTML = '<p>Fixtures unavailable. Please check back shortly.</p>';
        console.error('Play-Cricket widget error:', e);
      });
  }

  fetchFixtures();
})();
</script>

Replace YOUR_PLAY_CRICKET_API_KEY with the key ECB Play-Cricket Support sends you, and YOUR_CLUB_ID with your club's numeric ID from Play-Cricket admin. The widget will then pull your fixture list and display it in your club's chosen format on every page load.

WordPress shortcode for a Play-Cricket fixtures widget

If your club site runs WordPress, add this to your theme's functions.php file (or a site-specific plugin) and use the shortcode [bs_fixtures] in any page or post. This is the WordPress equivalent of the vanilla JS method and integrates cleanly with your existing theme styles.

// Add to functions.php
add_shortcode('bs_fixtures', function(\$atts) {
  \$atts = shortcode_atts(array(
    'club_id'  => 'YOUR_CLUB_ID',
    'season'   => '2026',
    'api_key'  => 'YOUR_PLAY_CRICKET_API_KEY',
    'limit'    => '10',
  ), \$atts, 'bs_fixtures');

  \$url = 'https://play-cricket.com/api/v2/fixtures.json'
       . '?site_id=' . esc_attr(\$atts['club_id'])
       . '&season_id=' . esc_attr(\$atts['season'])
       . '&api_key=' . esc_attr(\$atts['api_key']);

  \$response = wp_remote_get(\$url, array('timeout' => 15));
  if (is_wp_error(\$response)) {
    return '<p>Fixtures temporarily unavailable.</p>';
  }

  \$body = wp_remote_retrieve_body(\$response);
  \$data = json_decode(\$body, true);
  if (!\$data || empty(\$data['match_list'])) {
    return '<p>No upcoming fixtures found.</p>';
  }

  \$limit = intval(\$atts['limit']);
  \$list  = array_slice(\$data['match_list'], 0, \$limit);
  ob_start();
  echo '<div class="bs-fixtures-widget">';
  foreach (\$list as \$m) {
    echo '<div class="bs-fixture-row">';
    echo '<strong>' . esc_html(\$m['date']) . '</strong> \u2014 ';
    echo esc_html(\$m['home_team']) . ' vs ' . esc_html(\$m['away_team']);
    echo '<br><small>' . esc_html(\$m['venue']) . ' | ' . esc_html(\$m['start_time']) . '</small>';
    echo '</div>';
  }
  echo '</div>';
  return ob_get_clean();
});

How to style a Play-Cricket fixtures widget to match your club brand

The vanilla JS method outputs basic semantic HTML. You can wrap it in your club's existing CSS by adding a stylesheet to the page or using inline styles. A typical starting point for a vintage-paper-palette club would be to match the heading font to your display typeface and use your club's primary and secondary colours for fixture row borders and date labels.

For clubs running WordPress, style the .bs-fixtures-widget and .bs-fixture-row classes in your theme's Additional CSS panel. The shortcode renders server-side, so there is no flash of unstyled content on load.

The key advantage of a custom Play-Cricket fixtures widget over the iframe option is that your club website integration stays consistent with your brand at every viewport width. A styled widget renders the same way on mobile and desktop, which matters for clubs whose members mostly check fixtures on their phones.

Can you pull Play-Cricket results to website alongside fixtures?

The Play-Cricket API exposes a results endpoint alongside fixtures, so a custom widget can display both upcoming matches and completed results in a single component. The official Play-Cricket iframe widget focuses on fixtures only. A custom widget built with the API can combine fixtures, results, and league table positions in one component, which is particularly useful for clubs that want a single fixtures and results panel in their website header or homepage sidebar.

Pulling Play-Cricket results to website via the API works the same way as the fixtures endpoint: include the relevant match_list or results key from the API response, and render it in the same loop as your fixtures data. You can filter by date range to show only results from the current week or the last seven days.

The compliance rule your webmaster must follow

Boundary Social connects to Play-Cricket using your club's own ECB-issued API key. We do not share keys between clubs or scrape the platform. This matters because every legitimate Play-Cricket club website integration, whether it is a widget on your website, a calendar sync, or a social media fixture post, must be built on a key that belongs to your club and your club alone.

Shared keys, platform-level scraping, and third-party tools that use a single key to serve multiple clubs are not compliant with ECB Play-Cricket terms of use. If your webmaster is building or buying a Play-Cricket fixtures widget, ask them to confirm they are using your club's own ECB-issued key before the code goes live.

Related:

• Play-Cricket integration for UK clubs, the pillar guide
• Play-Cricket API explained: a plain-English guide for club admins
• Boundary Social pricing and packages