Add I Want To to your site

Paste this before the closing body tag. Replace the project ID with yours (Widget & install in the console).

<script src="https://iwanto.org/widget/widget.js" charset="utf-8" async
  onload="window.iwanto = new IWantTo({ projectId: 'YOUR_PROJECT_ID' })"></script>

charset="utf-8" is required: it keeps non-English texts from being garbled on pages that do not declare their encoding.

Strict CSP

Under a policy without 'unsafe-inline' the inline onload is blocked. Load the file with defer, then construct from your own script.

<script src="https://iwanto.org/widget/widget.js" charset="utf-8" defer></script>
<script src="/js/iwanto-init.js" defer></script>

// /js/iwanto-init.js — deferred scripts run in order, after widget.js
window.iwanto = new IWantTo({ projectId: 'YOUR_PROJECT_ID' });

script-src  https://iwanto.org
connect-src https://iwanto.org
# with attachments also:
connect-src https://<your-bucket-origin>
img-src     blob:

Load widget.js once, in your HTML, not from a component. Create the widget once and destroy it when its part of the app unmounts. A second instance replaces the first, with a console warning.

React

import { useEffect } from 'react';

export function IWantToWidget({ projectId }: { projectId: string }) {
  useEffect(() => {
    const iwanto = new window.IWantTo({ projectId });
    return () => iwanto.destroy();
  }, [projectId]);
  return null;
}

Vue 3

import { onMounted, onBeforeUnmount } from 'vue';
let iwanto;
onMounted(() => { iwanto = new window.IWantTo({ projectId: 'YOUR_PROJECT_ID' }); });
onBeforeUnmount(() => iwanto?.destroy());

Next.js (app router)

'use client';
import Script from 'next/script';
import { useEffect, useRef } from 'react';

export function IWantToWidget({ projectId }: { projectId: string }) {
  const instance = useRef<IWantTo | null>(null);
  useEffect(() => () => instance.current?.destroy(), []);
  return (
    <Script
      src="https://iwanto.org/widget/widget.js"
      strategy="afterInteractive"
      onReady={() => { instance.current ??= new window.IWantTo({ projectId }); }}
    />
  );
}

The console writes the project ID, side and tab label into the snippet. The accent colour is saved with the project and used by the widget and the public board; passing accentColor in code overrides it for the widget only. Everything else is set in code. A value of the wrong type falls back to its default; an unknown key is ignored with a console warning.

The widget does nothing until you construct it. Events carry plain data only: no DOM nodes, no tokens.

const iwanto = new IWantTo({ projectId: 'YOUR_PROJECT_ID' });

iwanto.open();          // open the panel
iwanto.close();         // close it
iwanto.toggle();
iwanto.isOpen;          // boolean

iwanto.update({ position: 'left', theme: 'dark' });   // applies live
iwanto.update({ locale: 'uk' });                      // projectId, apiBase and locale re-create the widget

const off = iwanto.on('submit', ({ id }) => console.log('created', id));
off();                                                   // or iwanto.off('submit', handler)

iwanto.destroy();       // removes the widget, its listeners and timers; later calls do nothing

Events: open, close, signin, submit, vote and comment. Each is also available as a callback option: onOpen, onClose, onSignIn, onSubmit, onVote, onComment.

Before send

onBeforeSend is an option, not an event. It is awaited right before every new item is sent, may be async, and lets you add data at that moment. It cannot be subscribed to with on(), and it is not called for votes or comments.

new IWantTo({
  projectId: 'YOUR_PROJECT_ID',
  onBeforeSend: async ({ type, title, body, categoryId, rating, meta }) => {
    return { meta: { plan: 'pro' } };   // or return nothing
  },
});

It receives a copy of the item as plain data: { type, title, body?, categoryId?, rating?, meta }, where meta is the current value of the meta option.

Your own launcher button

new IWantTo({ projectId: 'YOUR_PROJECT_ID', hideTab: true, trigger: '[data-iwanto]' });
// <button data-iwanto>Send feedback</button>  — or call iwanto.open() yourself

A signed-in user of your app

This only prefills the form. They still confirm their email with a code.

new IWantTo({
  projectId: 'YOUR_PROJECT_ID',
  user: { email: me.email, name: me.name },
  meta: { plan: me.plan }
});

Add data right before sending

new IWantTo({
  projectId: 'YOUR_PROJECT_ID',
  meta: { auth: 'google' },
  onBeforeSend: async ({ type, meta }) => {
    const me = await fetch('/api/me').then((r) => r.json());
    return { meta: { plan: me.plan, license: me.licenseId, seats: me.seats } };
  },
});

The team sees auth, plan, license and seats next to the item in the console.

Attach the browser console log to a problem report

const logs = [];
['log', 'warn', 'error'].forEach((k) => {
  const orig = console[k];
  console[k] = (...a) => { logs.push('[' + k + '] ' + a.join(' ')); orig(...a); };
});

new IWantTo({
  projectId: 'YOUR_PROJECT_ID',
  onBeforeSend: async ({ type }) => {
    if (type !== 'problem') return;
    const file = new File([logs.join('\n')], 'console.txt', { type: 'text/plain' });
    return { files: [file] };
  },
});

The file is private to your team and appears in the item’s attachments as auto-collected. Only attach logs you have checked for personal data.

Analytics

const iwanto = new IWantTo({ projectId: 'YOUR_PROJECT_ID' });
iwanto.on('submit', ({ id }) => analytics.track('item_created', { id }));
iwanto.on('vote', ({ id, value }) => analytics.track(value === 1 ? 'agreed' : 'unagreed', { id }));

Android apps can show the same feedback panel with a small library: download one file, add it to Gradle and call one function. Other platforms are not supported yet.

• The app needs only the project ID. It uses the shared origin https://mobile.iwanto.org, so there is nothing to register.
• The Android app is off by default: turn it on per project in the console (Widget & install › Mobile app).

Build your own client against the same API the widget uses. Every operation, request and response is described in an OpenAPI file.

• Reading needs no sign-in; writing needs a bearer token from the email-code sign-in.
• Every request must come from a site registered in the console (Widget & install). Native apps: see the Android guide below.
• Every operation can answer 429 with a Retry-After header.