Add the widget to your site

1. Build the snippet

Open the embed builder . Choose your filters and which controls visitors get, watch the preview update, and copy the snippet it produces.

The builder is the source of truth for the options, and it is generated from the widget’s own code, so it is always current. That is deliberate: a list of attributes copied into a document goes stale the first time an option is added, and a stale list of options is worse than no list. This page does not repeat it.

2. Paste it into your page

The snippet is a marker <div> and one <script> tag:

<div
  data-kanu-widget
  data-supabase-url="https://<project>.supabase.co"
  data-supabase-key="<anon public key>"
  data-limit="12"
  data-show-search="true"
></div>
<script src="https://needs.kanuhawaii.org/widget/kanu-widget.js" defer></script>

The <div> goes where you want the listings. The <script> can go anywhere on the page, and it finds every marker div on it, so one script tag serves several feeds if you want more than one.

3. Check it on the page

• Does it show anything? An empty feed usually means the filters are narrower than the data. Widen them in the builder and compare.
• Does it fit? The widget renders into your page, so your CSS applies to it. Check it at phone width as well as desktop.
• Does signup work? Sign up for something yourself, then check it arrived. Signing up through the widget makes a real signup on a real opportunity, so use one of your own and withdraw afterwards.

Serving the script yourself

The <script src> defaults to needs.kanuhawaii.org, which means you get fixes without doing anything. A partner who needs the bundle on their own infrastructure can point it elsewhere in the builder, and takes on keeping it current in exchange.

Getting help

Email volunteer@kanuhawaii.org with the URL of the page you are embedding on. Seeing the page in context answers most questions faster than describing it.