For Website Owners

Embed District Detective on Your Website

Let your visitors look up Colorado metro districts without leaving your page. The widget is free, requires no API key, and takes two lines of HTML to install.

Quick Start

Paste these two lines anywhere in your HTML. The widget will appear right where you place the <district-detective> tag.

HTML

<script src="https://districtdetective.org/widget/v1/district-detective.js"></script>
<district-detective></district-detective>

The script tag only needs to appear once per page, even if you have multiple widgets.

Live Examples

Try the widget right here. Each example shows a different configuration so you can see what it looks like before embedding.

Pre-filled AddressAuto-runs a lookup on load — shows a high-concern district.

DefaultNo options — follows the visitor's system theme.

Light ThemeExplicit light color scheme.

Dark ThemeExplicit dark color scheme.

Custom AccentBrand color override with a warm orange accent.

Pre-fill an Address

If you already know the address you want to look up -- for example, on a property listing page -- pass it as an attribute. The widget will run the search automatically when it loads.

HTML

<district-detective address="123 Main St, Aurora, CO 80012"></district-detective>

Customization

You can style the widget to match your site using these optional attributes.

theme"light""dark"

Set the color scheme. Omit to follow the visitor's system preference.

accent"#E65100"any 6-digit hex

Override the default teal accent color to match your brand.

address"123 Main St, Aurora, CO 80012"

Pre-fill an address and trigger an automatic lookup on load.

api-url"https://localhost:3000"

Override the API endpoint. For local development only.

Here is a full example with all options:

HTML

<district-detective
  theme="light"
  accent="#0D7377"
  address="123 Main St, Aurora, CO 80012"
></district-detective>

iframe Method (Fallback)

If your site has a strict Content Security Policy (CSP) that blocks external scripts, or if you use a CMS that strips <script> tags, you can embed the widget with an iframe instead.

HTML

<iframe
  src="https://districtdetective.org/embed/lookup"
  style="width: 100%; border: none; min-height: 300px;"
  title="District Detective Lookup"
></iframe>

The same customization options are available as URL query parameters:

HTML

<iframe
  src="https://districtdetective.org/embed/lookup?address=123+Main+St,+Aurora,+CO+80012&theme=light&accent=%230D7377"
  style="width: 100%; border: none; min-height: 300px;"
  title="District Detective Lookup"
></iframe>

iframe Auto-resize

The widget content can change height after a lookup. To keep the iframe from showing scrollbars, add this small script to your page. It listens for resize messages from the widget and adjusts the iframe height automatically.

HTML

<script>
window.addEventListener('message', function(e) {
  if (e.data && e.data.type === 'dd-widget-resize') {
    document.querySelector('iframe[src*="districtdetective.org"]')
      .style.height = e.data.height + 'px';
  }
});
</script>

Rate Limits

The widget API allows 60 requests per minute per visitor IP address. This is more than enough for normal use. If a visitor exceeds the limit, the widget will display a brief "try again in a moment" message and recover automatically.

Legal and Disclaimers

The widget automatically includes our standard disclaimer. You do not need to add any additional legal text to your page. The disclaimer states that District Detective provides informational data based on public records and does not constitute financial, legal, or real estate advice.

For the full text, see our Methodology page.

Questions?

If you run into trouble embedding the widget, or if you have a use case that isn't covered here, please get in touch. We are happy to help.