Skip to main content

Setting Up the Widget

This guide walks through integrating the DoesItHaveIt? widget into your website from start to finish. The process takes about 10 minutes.

Prerequisites​

  • An active Premium Plus subscription
  • Ability to edit your website's HTML (or access to a CMS that allows HTML embeds)
  • The domain(s) where you'll embed the widget (you'll add these to the allowed list)

Step 1: Confirm your plan​

Go to Dashboard → Billing and confirm your plan shows Premium Plus. The widget is only available on Premium Plus. If you're on a lower plan, upgrade first — all paid plans include a 14-day trial, so you can test the integration before committing.

Step 2: Go to Dashboard → Widget​

In the dashboard sidebar, click Widget. This section shows your current widget configuration, API tokens, usage stats, and customization settings.

Step 3: Generate an API token​

  1. Click New token (or go to Widget → Tokens → Generate token)
  2. Give the token a descriptive name (e.g., "Production - listings.mysite.com")
  3. Add your allowed domains — the domains where this token may be used (e.g., listings.mysite.com, www.myrealty.com). Add one domain per line.
  4. Click Generate
  5. Copy the token immediately — it is only shown in full once. If you lose it, you'll need to revoke and regenerate.

Tokens are domain-restricted by default. API calls from domains not on your allowed list are rejected, even with a valid token. This prevents your token from being used on other sites if it's ever exposed.

Step 4: Copy the embed snippet​

After generating your token, the dashboard displays a pre-configured embed snippet with your token filled in. Copy it. It looks like this:

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

Step 5: Add the snippet to your site​

Paste the snippet into your page's HTML before the closing </body> tag. The widget loads asynchronously and will not block page rendering.

For a pre-populated address (common on listing pages where you know the address), add the data-address attribute:

<div id="dihi-widget"></div>
<script
  src="https://doesithaveit.com/embed/v1/widget.js"
  data-token="YOUR_API_TOKEN_HERE"
  data-address="1234 Main St, Denver, CO 80202"
  data-theme="light"
  async
></script>

When data-address is set, the widget automatically runs the lookup for that address on page load. If not set, the widget displays an address search bar for the user to enter an address manually.

For dark mode or auto-detected theme:

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

Use data-theme="auto" to follow the visitor's system preference (prefers-color-scheme).

Step 6: Verify the integration​

Open a page with the widget embed in a browser. The widget should appear and either show the address search bar or automatically load results for your pre-configured address.

Open your browser's developer tools → Network tab and look for requests to api.doesithaveit.com — you should see a successful API call. Check Dashboard → Billing → Widget Credits to confirm usage is being tracked.

Domain restrictions​

Setting allowed domains is strongly recommended and enabled by default. Without domain restrictions, anyone who obtains your token can embed the widget on their site and consume your widget credits.

To manage allowed domains for a token: Dashboard → Widget → Tokens → [token name] → Edit domains.

Wildcards are supported for subdomains: *.myrealty.com allows listings.myrealty.com, www.myrealty.com, and any other subdomain. Use wildcards carefully — they're permissive.

tip

Create separate tokens for development and production environments. Name them clearly (e.g., "Dev - localhost:3000" and "Prod - listings.myrealty.com"). This way, you can revoke the dev token without affecting production, and you get separate usage stats for each environment.

Testing locally​

For local development, add localhost (with your port) to the allowed domains of a development token. Requests from localhost:3000 or localhost:8080 will be accepted by the widget API when explicitly listed.

Next steps​