Course Finder Configurator

Create and customize a disc golf course finder widget for your website

Configure Your Course Finder

The Course Finder Configurator lets you create a custom widget to embed on your website. Set your preferences once, get the embed code, and paste it anywhere.

📍 Geographic Scope GB nations, US states, or worldwide

⛅ Weather Forecasts 0 to 7 days of course weather

🎨 Custom Colours Match your brand or site

🏷️ Course Badges Highlight featured courses

How to Use

Choose your geographic region below
Configure visibility options (weather, pagination, layout)
Customise colours to match your site
Preview changes in real time
Copy the generated embed code
Paste into your website's HTML

New to the Course Finder? See the full documentation for advanced options and deployment guidance.

Interactive Configurator

Configure your course finder widget, preview changes in real time, and copy the embed code to your website.

Geographic Scope

Scope required

Required. Popular choices fill the country and region fields automatically; use custom for another country or region.

Country code optional

Optional for presets. Use an ISO 3166-1 alpha-2 code such as GB or US.

Region or US state code optional

Optional unless using a US state scope. Type the short region code used by DiscGolfAPI: US states use USPS two-letter codes such as OR, CA, TX; GB examples include ENG, WLS, SCT. Leave blank for the whole country.

Locality optional

Optional. Type a town, city, county or local area users would search for, such as Portland, Bristol, Warwickshire or Leamington Spa. It matches course name, town and county text.

Locality mode optional

Optional. Only applies when Locality is set. Use nearby for "start around this place, but let visitors find close courses outside it"; use restrict for "only show this locality."

Display Options

Weather days optional

Optional. Use 0 to hide Weather buttons completely, or choose 1 to 7 forecast days.

Temperature unit optional

Optional. Controls the temperature values in weather panels.

Wind speed unit optional

Optional. Controls wind and gust values in weather panels.

Page size optional

Optional. Use 0 to show all matching courses without pagination.

Appearance

Primary colour optional

Optional. Used for buttons, badge borders and interactive accents. Enter a hex colour code or use the colour picker to choose. The picker includes a dropper tool to sample colours from your screen.

Badge JSON URL optional

Optional. Leave blank to use the bundled badge fallback. Remote JSON must allow browser access with CORS.

Layout

Auto nearby optional

Optional. Requests location automatically; best for pages where nearby courses are the main experience.

Website links only optional

Optional. Useful for tourism or trip-planning pages where every result should have an external link.

Compact layout optional

Optional. Better for sidebars, narrow columns and dense pages.

Embed HTML

Custom CSS (Brand Override)

About this CSS: This file overrides only the primary colour. It's optional and only needed if you want to customise the colour scheme.

The main course finder styling (table layout, weather cards, buttons, pagination) is in course-finder.css, which you download from GitHub. Both files work together: course-finder.css provides the structure, and this custom CSS overrides the brand colour.

JavaScript Download from GitHub

Download course-finder.js from the GitHub Releases page.

Include it in your HTML after the embed code:

<script src="./course-finder.js"></script>

Update the src path to match where you upload the file.

Live Preview Updates as you change options. Live course data may take a moment to load. Auto nearby is disabled in preview.

How to use this embed code:

Download course-finder.css and course-finder.js from GitHub Releases
Upload both files to your web server (in any location you choose)
Copy the generated HTML below to your website
Update the file paths in the HTML to match where you uploaded the CSS and JS files

The embed code includes placeholder paths (./course-finder.css and ./course-finder.js) — replace these with the actual URLs where you host the files. Maintain visible attribution to DiscGolfAPI.