Embeddable task widget

There are two supported ways to show a user's current tasks in a minimal UI using an OAuth access token.

Option A: Server-hosted HTML widget (API origin)

Your backend serves a standalone page at:
GET https://YOUR_API_BASE/widget/embed?token=ACCESS_TOKEN
  • YOUR_API_BASE must match the TalonTodo API (same host that serves /api/v1).
  • The token must include scopes tasks:read and tasks:complete (for the Done button).
Embed with an iframe:
<iframe
  title="TalonTodo tasks"
  src="https://api.example.com/widget/embed?token=ACCESS_TOKEN"
  width="400"
  height="360"
  style="border: 1px solid #ccc; border-radius: 8px;"
></iframe>
Set BACKEND_URL on the API server so the widget loads the correct API base when generating the page.

Security

Putting access tokens in a URL can expose them to browser history, logs, and the Referer header. Prefer:
  • Short-lived access tokens
  • HTTPS everywhere
  • Tokens scoped only to tasks:read and tasks:complete
For high-security pages, implement your own UI and call /api/v1/tasks from your backend using a token stored server-side.

Option B: TalonTodo web app page

If you use the main TalonTodo frontend (for example https://app.talontodo.com), you can iframe:
https://app.talontodo.com/widget/tasks?token=ACCESS_TOKEN
This page uses the same REST API and CSS variables as the app. Requirements for the token are the same as Option A.

Getting a token for the widget

End users must complete the OAuth flow (see the OAuth guide). Your server exchanges the authorization code and stores or passes the access token only to trusted contexts.

API used by the widget

  • GET /api/v1/tasks?completed=false — list open tasks
  • POST /api/v1/tasks/:id/complete — mark a task done
Both require Authorization: Bearer ... with appropriate scopes.