Embed the Pledge
The Pledge to Our Keiki was written by students from schools across Hawaiʻi. People read it, sign their name at the bottom in their own hand, and get an image of that signature over a Hawaiʻi photograph to share. That share is the whole distribution mechanism.
Like the volunteer widget, these render into your page rather than into an iframe, so they inherit your fonts and sit inside your layout.
The four widgets
They are separate on purpose. A partner page is not one block: it opens with a headline over a photograph, says something in the partner’s own voice, and only then asks for a signature. Splitting them means your own content goes between them, in your own design, instead of being pushed above and below a single sealed box.
| Widget | data-kanu-pledge | What it renders |
|---|---|---|
| Header | header | The opening headline over a photograph, with the running signature count |
| Video | video | One video: the shared appeal, or your own |
| The pledge | pledge | The five tenets, as written by the students |
| Sign | sign | The call to action, and the signing flow it opens |
Use as many or as few as you like. sign is the only one that is not optional — it is the thing the
page is for.
One <script> serves every widget on the page:
<script src="https://pledge.kanuhawaii.org/widget/kanu-pledge.js" defer></script>Header
Opens the page. The headline over a photograph, with the count of people who have already signed.
| Attribute | What it does |
|---|---|
data-headline | The opening line. Defaults to the wording above. |
data-subhead | The line under it. Optional. |
data-image | A full-bleed background photograph. Optional; without one the header is set on Kanu’s brand ground. |
data-show-count | false to leave the counter out. |
The count is deliberately imprecise — it reads “over 10,000” rather than an exact figure. The number carried over from the old site cannot be reconciled to a defensible total, so a precise figure would be a claim nobody can stand behind. See the pledge text for the same principle applied to the words.
Video
Two videos, chosen by name rather than pasted as a YouTube id. Ten of the twelve partner campaigns on the old site had no video of their own, and these are the two that matter: a free-text id field invites a page carrying Kanuʻs pledge to point at anything on YouTube, and a wrong id fails as a dead player rather than as an error.
| Attribute | What it does |
|---|---|
data-video | rock (default) for Dwayne Johnson’s appeal, or why for “Why the Pledge matters”. |
It renders a click-to-play facade rather than an embedded player, so a page carrying one does not load YouTube’s scripts for every visitor who never presses play.
The pledge
The five tenets. This is the content the page exists to put in front of somebody.
| Attribute | What it does |
|---|---|
data-show-gloss | false to drop the line explaining that keiki means child. |
data-show-preamble | false for the tenets alone, without the three paragraphs that introduce them. |
The words are not yours to edit
There is no attribute for the text, and that is deliberate rather than an omission. The pledge was written by students, and a clearer verb is somebody else’s words changed without asking. A revision arrives as a whole replacement with a note saying who approved it.
If you would rather set the words in your own type, they are served as JSON so that there is exactly one copy of them:
GET https://pledge.kanuhawaii.org/api/pledge-textThe running total is available the same way, for a counter in your own design:
GET https://pledge.kanuhawaii.org/api/countBoth are public, cacheable, and open to any origin.
Sign
The call to action, and the whole signing experience behind it.
| Attribute | What it does |
|---|---|
data-campaign | Your campaign slug, so pledges signed on your page are counted as yours. Ask Kanu for one. |
data-label | The button’s label. Defaults to “I agree to these tenets”. |
data-variant | button (default) opens the flow over your page. inline renders it in place, with no button. |
data-backgrounds | Comma-separated background keys, if you would rather not offer all of Kanu’s photographs. |
data-accent | A CSS colour for the buttons and highlights, so the flow matches your brand. |
data-mailing-opt-in | false to have the mailing-list checkbox start unticked. |
What a visitor does
Signs
By drawing with a finger or a mouse, or by choosing a style for their typed name. Both produce a real signature. The typed route exists because a fingertip signature on a phone is why people abandon this, and because a drawing canvas cannot be used with a keyboard or a screen reader.
Chooses a picture
Their own photograph, or one of Kanu’s. Their own is offered first, because that is what makes the result worth posting.
Places the signature and gets their image
They position it on the photograph, and the finished image comes back for them to save or share straight into Instagram, TikTok or Messages.
Every container needs data-supabase-url and data-supabase-key, the same way the volunteer
widget does. They are left out of the per-widget examples above only because they are identical on
every one; the full snippet at the end of this page has them.
The key is the anon public key. It is designed to be published, and it grants only what an anonymous visitor already has: the photographs, the school list and the running count. It cannot read a pledge. No grant exists for one and no function returns one, so a key sitting in your page source cannot reach anybody’s signature.
What it does not do is write. Signing goes to the pledge service instead, because the composited image needs work a browser cannot do, and because the rate limiting and the spam checks need a secret your page must not have.
A whole partner page
The four together, with your own content in between, which is the point of them being four:
<div
data-kanu-pledge="header"
data-supabase-url="https://<project>.supabase.co"
data-supabase-key="<anon public key>"
data-headline="Future generations are counting on us."
data-subhead="Will you pledge to protect their Hawaiʻi?"
data-image="/img/our-shoreline.jpg"
></div>
<!-- Your own copy, in your own design -->
<section class="our-commitment">
<img src="/img/logo.svg" alt="Your organization">
<p>
We are committed to protecting the place we call home. By signing the Pledge
below, you join us in caring for it.
</p>
</section>
<div
data-kanu-pledge="video"
data-supabase-url="https://<project>.supabase.co"
data-supabase-key="<anon public key>"
data-video="why"
></div>
<div
data-kanu-pledge="pledge"
data-supabase-url="https://<project>.supabase.co"
data-supabase-key="<anon public key>"
></div>
<div
data-kanu-pledge="sign"
data-supabase-url="https://<project>.supabase.co"
data-supabase-key="<anon public key>"
data-campaign="your-campaign"
></div>
<section id="mahalo" hidden>
<h2>Mahalo for your pledge!</h2>
<p>Now find something to do about it.</p>
</section>
<script src="https://pledge.kanuhawaii.org/widget/kanu-pledge.js" defer></script>Knowing when somebody signs
The sign container fires a DOM event once a pledge is in, so your page can reveal a thank-you
section or send an analytics event. That is what the hidden #mahalo section above is for:
document.querySelector('[data-kanu-pledge="sign"]')
.addEventListener('kanu-pledge:signed', () => {
document.querySelector('#mahalo').hidden = false
})The event carries no personal data — not a name, not an email, not the image. A pledge is a private record between the signer and Kanu Hawaiʻi, and the signed image is handed to the person who made it and to nobody else. Your page is told that a pledge happened, which is all it needs in order to say thank you.
Single-page apps
The bundle initialises itself on load. If your site navigates without a page load, call
window.KanuPledge.init() once the containers are in the DOM. It is safe to call repeatedly:
containers it has already claimed are skipped.
On kanuhawaii.org
Kanu’s own partner pages are built in the CMS from the same four pieces as page-builder blocks, which staff stack alongside the ordinary blocks and style per partner. If you are Kanu staff building a partner page, use those rather than these snippets.
Getting a campaign slug
Email info@kanuhawaii.org with the page you want to embed on. A campaign slug is what makes the pledges from your page countable as yours.