Partner Widgets

Inline 300 × 150

Best overall default - works in most ad placements and sidebar positions.

Leaderboard 728 × 90

Most common header placement - horizontal banner format.

Sidebar 326 × 467

Most common premium sidebar - tall format with sport imagery.

Integration Code

Basic Example

<!-- Add the widget container -->
<div id="courtsapp-widget"></div>

<!-- Load the widget script -->
<script src="https://courtsapp.com/widget.js"></script>

<!-- Initialize the widget -->
<script>
  CourtsAppWidget.init({
    baseUrl: 'https://courtsapp.com',
    widgets: [
      {
        /**
         * The selector for the widget container
         * where it will be mounted (required).
         */
        selector: '#your-element',

        /**
         * The size of the widget (required).
         * Options:
         *   'inline' (300x150)
         *   'banner' (728x90)
         *   'sidebar' (326x467)
         */
        size: 'inline',

        /**
         * The sport (optional).
         * Options:
         *   'tennis'
         *   'pickleball'
         *   'padel'
         */
        sport: 'tennis', // Optional

        /**
         * Show widget only on specific
         * screens, by default shows on all
         * screen sizes (optional).
         * Options:
         *   'desktop' - Only show on screens >= 768px
         *   'mobile' - Only show on screens < 768px
         */
        breakpoint: 'desktop' // Optional
      }
    ]
  });
</script>

Responsive Example

<!-- Add widget containers -->
<div id="widget-desktop"></div>
<div id="widget-mobile"></div>

<!-- Load the widget script -->
<script src="https://courtsapp.com/widget.js"></script>

<!-- Initialize responsive widgets -->
<script>
  CourtsAppWidget.init({
    baseUrl: 'https://courtsapp.com',
    widgets: [
      {
        selector: '#widget-desktop',
        size: 'banner',
        sport: 'tennis',
        breakpoint: 'desktop'
      },
      {
        selector: '#widget-mobile',
        size: 'inline',
        sport: 'tennis',
        breakpoint: 'mobile'
      }
    ]
  });
</script>

Integration Code

Basic Example

<!-- Add the widget container -->
<div id="courtsapp-widget"></div>

<!-- Load the widget script -->
<script src="https://courtsapp.com/widget.js"></script>

<!-- Initialize the widget -->
<script>
  CourtsAppWidget.init({
    baseUrl: 'https://courtsapp.com',
    widgets: [
      {
        selector: '#courtsapp-widget',
        // size: 'inline' | 'banner' | 'sidebar'
        size: 'inline',
        // sport: 'tennis' | 'pickleball' | 'padel'
        sport: 'tennis',
        // breakpoint: 'desktop' | 'mobile' (optional)
        breakpoint: 'desktop' // Optional
      }
    ]
  });
</script>

Responsive Example

<!-- Add widget containers -->
<div id="widget-desktop"></div>
<div id="widget-mobile"></div>

<!-- Load the widget script -->
<script src="https://courtsapp.com/widget.js"></script>

<!-- Initialize responsive widgets -->
<script>
  CourtsAppWidget.init({
    baseUrl: 'https://courtsapp.com',
    widgets: [
      {
        selector: '#widget-desktop',
        size: 'banner',
        sport: 'tennis',
        breakpoint: 'desktop'
      },
      {
        selector: '#widget-mobile',
        size: 'inline',
        sport: 'tennis',
        breakpoint: 'mobile'
      }
    ]
  });
</script>