> ## 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.

# Widget options

> The data attributes the loader reads, and the matching query parameters for a plain iframe.

The loader reads five data attributes from each `div.ctf-widget`. For a [plain iframe](https://docs.checkthatfield.com/widget/install.md#the-plain-iframe), give the same settings as query parameters on `https://www.checkthatfield.com/embed/fields`, without the `data-` prefix.

**data-key** `string` *required*

Your publishable key, `ctf_pk_live_…`. It works only on the sites it was issued for. Without it, or with a secret key (`ctf_sk_live_…`), the widget says "This widget isn't set up for this site".

**data-postcode** `string`

A postcode in England, such as `HP18 9TH`. Spacing and case don't matter. The widget looks at the fields nearest the postcode's centre. When you give a postcode, `data-lat` and `data-lng` are ignored.

**data-lat** `number`

Latitude in decimal degrees (WGS84), such as `51.7512`. Give it with `data-lng`, for when you know the property's exact position. It must be between 49 and 61.

**data-lng** `number`

Longitude in decimal degrees (WGS84), such as `-1.0731`. Give it with `data-lat`. It must be between −10 and 3.

**data-theme** `string` (default: auto)

`auto`, `light` or `dark`. `auto` follows the reader's light or dark setting. Choose `light` or `dark` to match your page whatever the reader's setting. Anything else is treated as `auto`.

Give either a postcode or both coordinates. Without a place to look, or with a postcode we can't find, the widget says it has no open fields to show there. Coordinates out of range get "This widget needs a postcode or a place to look at". See [What readers see](https://docs.checkthatfield.com/widget/states.md).

## Examples

```html Postcode theme={null}
<div class="ctf-widget" data-key="ctf_pk_live_…" data-postcode="HP18 9TH"></div>
```

```html Coordinates, dark theme={null}
<div class="ctf-widget"
     data-key="ctf_pk_live_…"
     data-lat="51.7512" data-lng="-1.0731"
     data-theme="dark"></div>
```

```html Plain iframe theme={null}
<iframe
  src="https://www.checkthatfield.com/embed/fields?key=ctf_pk_live_…&lat=51.7512&lng=-1.0731&theme=light"
  title="Development likelihood of nearby fields"
  width="100%" height="560" style="border:0" loading="lazy"></iframe>
```

Include the loader script once per page, as shown in [Install the widget](https://docs.checkthatfield.com/widget/install.md).

## What you can't change

The widget always looks at the **5 nearest open fields within 500 m** of the place you give, and always shows the data credits. Its size follows its content when you use the loader; it fills the width of its container. If you need a different radius, more fields or your own design, use the [Partner API](https://docs.checkthatfield.com/api/overview.md), which takes `radius_m` and `limit`.

> [!TIP]
>
> Coordinates are more precise than a postcode, whose centre can be a few hundred metres from a rural house. If your listings have them, use `data-lat` and `data-lng`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.