Quickstart
Display a live BioUI Web widget in under 10 lines of code.
Display a BioUI Web widget in under 10 lines of code. No build step, no framework requirement - the widgets are standard web components served from our CDN.
Prerequisites
Your first widget
Add the CDN script
Include the BioUI Web script and default theme in your HTML <head>:
<script src="https://cdn.anybio.io/biosdk-web/v1/bioui.js"></script>
<link rel="stylesheet" href="https://cdn.anybio.io/biosdk-web/v1/bioui-base.css" />Add the provider and a widget
Wrap your widgets in a <bio-provider> with your credentials, then drop in any widget:
<bio-provider
api-key="org_your_key"
project-key="proj_your_key"
xuser-id="user-123">
<bio-progress-ring></bio-progress-ring>
</bio-provider>The provider authenticates, resolves the user, and every child widget receives the context automatically.
Open the page
Open the file in your browser. Success looks like this: the progress ring renders and animates with the user's data. A new xuser-id starts empty, so a fresh ring at zero is still a working ring - the widget is live and bound to that user.
If your first render fails
| What you see | Likely cause | Fix |
|---|---|---|
| Nothing renders, unstyled text shows | CDN script or CSS didn't load | Check both URLs from step 1 are in <head>; look for 404s in the network tab |
| Widget renders but shows an auth error | Wrong or mistyped key | Keys are prefixed: org_ (API), proj_ (project), sdk_ (SDK). Re-copy from the dashboard |
401 in the browser console | Key doesn't have access to that project, or a stale xuser-token | Confirm key and project-key belong to the same project; in token mode, mint a fresh token |
| Widget stuck in a loading state | <bio-provider> missing or the widget sits outside it | Every widget must be a child of one <bio-provider> |
| Worked locally, fails deployed | Direct mode with an org_ key in public HTML | Switch to token mode - the browser should only ever hold a short-lived token |
Still stuck? The Authentication guide walks through both auth modes end to end.
Full example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>BioUI Web Quickstart</title>
<script src="https://cdn.anybio.io/biosdk-web/v1/bioui.js"></script>
<link rel="stylesheet" href="https://cdn.anybio.io/biosdk-web/v1/bioui-base.css" />
</head>
<body>
<bio-provider
api-key="org_your_key"
project-key="proj_your_key"
xuser-id="user-123">
<h1>Today's Progress</h1>
<bio-progress-ring></bio-progress-ring>
</bio-provider>
</body>
</html>What's next
- Authentication - switch to token mode before going user-facing
- Check-in Integration - build a full PRO check-in workflow
<bio-provider>- provider configuration reference<bio-checkin>- check-in widget reference