Add the widget to your site

Configure the feed below, watch the preview, and copy the snippet. Everything on this page is live: the filter lists come from the platform itself, and the preview is the real widget running in this page, not a picture of one.

1. Build the snippet

Filters

Campaign

Islands

Causes

Activity types

Good for

Cards per page

How many show at first, and how many each Load more adds

Display options

Show search bar

Show filter dropdowns

Let visitors filter by island, cause, activity type, and good-for

Show island tabs

A row of island tabs across the top. Replaces the island dropdown so the same choice is offered once.

Show date picker

Visitors pick when they will be here: this weekend, a month in the next year, or any range on a calendar. Past days are never offered.

Show schedule toggles

Recurring, include open-ended, and one time checkboxes. Starts on recurring and one time, leaving open-ended opportunities out until a visitor asks for them.

Load more in place

A Load more button under the feed. Off shows a link to all opportunities on Kanu instead.

Show the opportunity count

How many opportunities the current filters match in the next 6 months, counting every date a recurring opportunity meets.

One card per date

A card for each day an opportunity meets, soonest first, instead of one card per opportunity.

Open-ended opportunity every

Every Nth card is an ongoing, open-ended opportunity, sprinkled between the dated ones as needs.kanuhawaii.org does. 0 lists them after every dated card.

Live preview

Embed code

Embed host

Where the widget script and card links load from

Paste this into your page where you want the listings to appear.

<!-- Kanu Hawaii Volunteer Widget -->
<div
  data-kanu-widget
  data-supabase-url="https://qshvdtgsntfkeynqfceu.supabase.co"
  data-supabase-key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFzaHZkdGdzbnRma2V5bnFmY2V1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODE3MzU1ODQsImV4cCI6MjA5NzMxMTU4NH0.OcH3FLoqjor5h_jXhP_wasezLEyB98ZOQifSCLwqytg"
  data-base-url="https://needs.kanuhawaii.org"
  data-turnstile-site-key="0x4AAAAAAEma44jMqniqb-Qz"
  data-show-filters="true"
  data-more="load"
></div>
<script src="https://needs.kanuhawaii.org/widget/kanu-widget.js" defer></script>

The key in the snippet is the anon public key. It is designed to be published, it is the same key the public website uses, and it only grants what an anonymous visitor already has. It is not a secret and it does not need hiding.

The widget only loads on approved domains. Embedding on a new domain? Request access .

Signing up through the widget is protected two ways. A Cloudflare Turnstile challenge runs when the snippet carries data-turnstile-site-key, and the platform rate limits guest sign-ups regardless. Nothing is asked of a visitor unless the challenge decides to ask, and an embed without the key keeps working.

2. Paste it into your page

The snippet is a marker <div> and one <script> tag. 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 above 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.

Making it look like your site

Every class the widget renders is listed in the styling reference, along with two worked examples. The short version: everything is scoped under .kanu-widget-root and prefixed kanu-w-, and your own CSS wins if it comes after the widget’s.

Mālama Hawaiʻi is a ready-made example of the whole thing themed to match an existing site.

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 with the Embed host control above, 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.