> ## Documentation Index
> Fetch the complete documentation index at: https://docs.checkthatfield.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Install the widget
> Add the widget to a page with the loader script, or as a plain iframe for sites with a strict Content Security Policy.
**1. Ask for a publishable key**
Email [hello@checkthatfield.com](mailto:hello@checkthatfield.com?subject=An%20API%20key%20for%20Check%20That%20Field) 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.
```html Loader (recommended) theme={null}
```
```html Plain iframe theme={null}
```
**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](https://docs.checkthatfield.com/widget/states.md).
## 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.
> [!WARNING]
>
> 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](https://docs.checkthatfield.com/widget/options.md).
### Strict Content Security Policies
If your site sends a Content Security Policy, allow our origin to be framed:
```text theme={null}
frame-src https://www.checkthatfield.com
```
That is all the plain iframe needs. The loader also needs the script allowed:
```text theme={null}
script-src https://www.checkthatfield.com
```
> [!NOTE]
>
> 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.
> [!TIP]
>
> Each load of the widget counts against your key's monthly quota, including loads while you test.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.