Customizing the Widget

The DoesItHaveIt? widget is designed to integrate visually with your site. You can control the color theme, override specific colors with CSS custom properties, choose which data cards to display, and configure the layout mode.

Theme options

Set the theme using the data-theme attribute on the script tag:

<script
  src="https://doesithaveit.com/embed/v1/widget.js"
  data-token="YOUR_TOKEN"
  data-theme="light"
  async
></script>

Value	Behavior
light	White background, dark text — default
dark	Dark background, light text
auto	Follows the visitor's OS/browser preference (prefers-color-scheme)

Color overrides with CSS custom properties

The widget is styled using CSS custom properties (variables) that you can override in your site's stylesheet. Add these to your CSS after the widget script loads:

:root {
  --dihi-color-primary: #1a56db;        /* Main accent color (score badges, links) */
  --dihi-color-primary-light: #e8f0fe;  /* Light tint for score backgrounds */
  --dihi-color-text: #111827;           /* Main text color */
  --dihi-color-text-muted: #6b7280;     /* Secondary/label text */
  --dihi-color-bg: #ffffff;             /* Widget panel background */
  --dihi-color-bg-card: #f9fafb;        /* Individual card backgrounds */
  --dihi-color-border: #e5e7eb;         /* Card and panel borders */
  --dihi-font-family: inherit;          /* Font family — defaults to your page font */
  --dihi-border-radius: 8px;            /* Card corner radius */
}

Setting --dihi-font-family: inherit causes the widget to use your page's font stack, which usually produces the most seamless integration. To override with a specific font:

:root {
  --dihi-font-family: 'Inter', 'Helvetica Neue', sans-serif;
}

Selecting which cards to display

By default, all data cards available on your plan are shown. Use data-cards to limit the display to specific categories:

<script
  src="https://doesithaveit.com/embed/v1/widget.js"
  data-token="YOUR_TOKEN"
  data-cards="internet,transit,grocery,air-quality"
  async
></script>

Available card identifiers:

Identifier	Card name	Plan required
internet	Internet & Broadband	All
transit	Transit	All
grocery	Grocery & Food Access	All
demographics	Demographics	All
air-quality	Air Quality	All
cell	Cell Coverage	All
road-conditions	Road Conditions	All
outdoors	Outdoor Recreation	All
permits	Building Permits	Upgrade+
events	Events	Premium+

Cards listed in data-cards that your plan doesn't include are silently ignored.

Width and height configuration

The widget adapts to the width of its container element (#dihi-widget). Set the width on the container using CSS:

#dihi-widget {
  width: 100%;          /* Full-width — recommended for most layouts */
  max-width: 720px;     /* Cap the maximum width */
}

The height is determined automatically based on how many cards are displayed and whether they are expanded or collapsed. You can set a maximum height with overflow scrolling:

#dihi-widget {
  max-height: 600px;
  overflow-y: auto;
}

Compact vs. full mode

<script
  src="https://doesithaveit.com/embed/v1/widget.js"
  data-token="YOUR_TOKEN"
  data-mode="compact"
  async
></script>

Mode	Behavior
full (default)	Shows score, summary text, and expandable detail sections for each card
compact	Shows score and a single line of summary text per card; no expandable details

Compact mode is suited for sidebars or narrow layouts where vertical space is limited. Full mode is recommended for dedicated neighborhood information sections.

Address search bar

When no data-address is set, the widget shows an address search bar. You can hide the search bar if you always pass the address programmatically:

<script
  src="https://doesithaveit.com/embed/v1/widget.js"
  data-token="YOUR_TOKEN"
  data-address="1234 Main St, Denver, CO 80202"
  data-show-search="false"
  async
></script>

Setting data-show-search="false" hides the search bar entirely. If no address is provided and the search bar is hidden, the widget shows a placeholder until an address is set programmatically via the widget's JavaScript API.

Attribution

The "Powered by DoesItHaveIt?" attribution is required and cannot be hidden or styled to be invisible. It is rendered as a small footer link within the widget panel and links to doesithaveit.com. This is a condition of use for all widget deployments and is enforced in the Terms of Service.

You may change the color of the attribution text using --dihi-color-text-muted to ensure it's visible against your background, but you may not hide it with display: none, opacity: 0, visibility: hidden, or any other technique that makes it invisible to users.