Grant Map Widget — Partner Embed Demo

Live Preview

Beyond our builds, many homeowners qualify for city-funded grants to repair or improve their existing homes. Use the tool below to see what programs are available in your area — no application required to check.

Embed Instructions

Copy and paste these two lines anywhere in your page's HTML. No configuration needed — the widget handles everything automatically.

      <!-- Step 1: load the widget script (once per page, before </body>) -->
<script src="https://www.thegrantmap.com/widget.js"></script>

<!-- Step 2: place this div wherever you want the widget to appear -->
<div id="grantmap-widget"></div>
    

Plain HTML — no npm, no build step, no framework required. Copied!

Implementation Notes

Zero dependencies. The widget is plain JavaScript — no jQuery, React, or other libraries required.
Isolated styles. All CSS is scoped to #grantmap-widget-root. It will not affect the rest of your page.
Live city list. The dropdown is fetched from the Grant Map API each time the widget loads, so new cities appear automatically.
Opens in a new tab. Residents are sent to thegrantmap.com/city/[slug] without navigating away from your site.
Mobile responsive. On small screens the button stacks below the dropdown for easy tapping.
Accessible. Includes ARIA labels, keyboard navigation, and focus indicators out of the box.

Grant Map Partner Widget

Live Preview

Embed Instructions

Implementation Notes