Skip to main content
1

Ask for a publishable key

Email hello@checkthatfield.com with what you’d like to build, roughly how many widget loads a month you expect, and every site the widget will be on (for example smithandco.co.uk). We send you a key that starts ctf_pk_live_.A site covers its subdomains: smithandco.co.uk also covers www.smithandco.co.uk and lettings.smithandco.co.uk.
2

Add the snippet

Put the div where the widget should appear, and the script once anywhere on the page. Use your key and the property’s postcode.
3

Check it on your site

Open the page on one of the sites named for your key. You should see the nearest fields and their bands. If you see “This widget isn’t set up for this site”, check the key and the site’s domain: see What readers see.

The loader

The loader script finds every div.ctf-widget on the page and replaces its contents with the widget. It:
  • makes each iframe only as it comes within about 300 px of the screen, so widgets further down the page cost nothing until they are needed;
  • sizes each iframe to fit its content, starting at 320 px tall;
  • gives the iframe the title “Development likelihood of nearby fields”, for screen readers;
  • has no dependencies and works with several widgets on one page.
The link inside the div is a fallback. Readers see it if the script can’t run.
The loader looks for widgets once, when the page has loaded. A div.ctf-widget added later, for example by a single-page app after navigation, isn’t picked up. In that case use the plain iframe and set its src yourself.

The plain iframe

Use the iframe when your site doesn’t allow outside scripts, or when you build the page on the server. It has a fixed height, so it won’t resize; 560 px suits most answers. Put the settings in the src as query parameters: key, postcode (URL-encoded, so a space becomes %20), or lat and lng, and theme. See Options.

Strict Content Security Policies

If your site sends a Content Security Policy, allow our origin to be framed:
That is all the plain iframe needs. The loader also needs the script allowed:
The widget learns which site it is on from the Referer header your page sends when it loads the iframe. The loader asks for this with referrerpolicy="strict-origin-when-cross-origin", which sends only your origin, never the page’s path. If your site sets Referrer-Policy: no-referrer, add referrerpolicy="strict-origin-when-cross-origin" to a plain iframe too, or the widget can’t tell it is on your site.

Testing locally

Ask for localhost to be included in your key’s sites, and the widget works on your own machine on any port, over plain http as well as https. Other sites work over http too, for agents whose sites aren’t on https yet.
Each load of the widget counts against your key’s monthly quota, including loads while you test.