Quickstart
Display a BioUI Web widget in under 10 lines of code.
1. 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" />2. 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>That is it. The provider authenticates, resolves the user, and every child widget receives the context automatically.
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 — Understand api-key, project-key, and xuser-id
- Check-in Integration — Build a full PRO check-in workflow
<bio-provider>— Provider configuration reference<bio-checkin>— Check-in widget reference