Add PitchFinder to your website

If you need any help installing this widget, please contact us at pitchfinder@footballfoundation.org.uk or on 0845 345 4555 Ext 4233.

Standard widget

To add this widget to your page, copy in the following code.

<!-- Start Pitchfinder widget -->
<script src="https://www.pitchfinder.org.uk/static/widget/pitchfinder-widget.js"></script>
<script>new PFWidget('standard').render()</script>
<!-- End Pitchfinder widget -->

Small widget

To add the small widget, specify small instead of standard:

<!-- Start Pitchfinder widget -->
<script src="https://www.pitchfinder.org.uk/static/widget/pitchfinder-widget.js"></script>
<script>new PFWidget('small').render()</script>
<!-- End Pitchfinder widget -->

Specifying a default search term

Use search_term('some location') before render(). You can specify a place name or postcode.

<!-- Start Pitchfinder widget -->
<script src="https://www.pitchfinder.org.uk/static/widget/pitchfinder-widget.js"></script>
<script>new PFWidget('standard').search_term('Oxford').render()</script>
<!-- End Pitchfinder widget -->

Integration notes

Multiple widgets on the same page

<!-- Start Pitchfinder widget -->
<!-- Only use the next line ONCE -->
<script src="https://www.pitchfinder.org.uk/static/widget/pitchfinder-widget.js"></script>

<!-- Then create as many widgets as you like -->
<script>new PFWidget('standard').render()</script>
<script>new PFWidget('small').render()</script>
<!-- End Pitchfinder widget -->

CSS and styling

The widget will be rendered as a div on your page. You may need to specify additional styling for this div in your site's CSS. For example, if you place it next to an element with a float applied you may want to specify a clear value for the widget. To do this, apply styling to the pitchfinder-widget class.

For example, it might look like this:

.pitchfinder-widget { clear: both; }

If you need any help installing this widget, please contact us at pitchfinder@footballfoundation.org.uk or on 0845 345 4555 Ext 4233.