Embed SDK
Drop two lines into any page — Webflow, Wix, Yardi, Buildium, RealPage, AppFolio, plain HTML. Residents sign in through a popup, then see their houses, today's pickup status, and the driver's proof photos right inside your portal.
01
Paste this anywhere on the page where you want the resident panel to appear. The <script> can live in the <head> and the <div> in the body — order doesn’t matter, the SDK waits for DOMContentLoaded.
<script
src="https://curbherotrash.com/embed/curbhero.js"
data-partner-id="YOUR_PARTNER_ID"
async
></script>
<div id="curbhero-signup"></div>02
Residents authenticate without ever leaving your page. The SDK opens a popup at curbherotrash.com/embed-loginthat runs Firebase Auth on the Curb Hero origin. On successful sign-in, the popup sends the resident’s Firebase ID token back via postMessage and closes itself.
If the popup is blocked, the SDK falls back to a same-tab navigation so the user can still sign in. The opener-page listener stays armed across that journey if the resident returns.
// Posted by the popup at /embed-login → window.opener
{
source: "curbhero-embed",
type: "auth",
idToken: "<Firebase ID token, ~1h validity>",
profile: { uid, fullName, email },
partnerId: "grovewood"
}targetOrigin: "*"because it cannot know its opener’s origin. The SDK strictly checks event.origin === "https://curbherotrash.com" when receiving the message — never trust a postMessage source by content alone.03
The panel has two states. Both render inside the same bordered card, so the partner page’s layout never shifts when the resident signs in or out.
The panel auto-refreshes every 30 seconds while the tab is visible, so a driver uploading a take-out photo at 9:14 PM shows up in the resident’s embed by 9:15 with no page reload. Refresh pauses while the tab is hidden to avoid background work on closed but still-open partner tabs.
04
Configure the embed purely through data-* attributes on the <script> tag — no inline JS needed.
| Attribute | Required | Default | Notes |
|---|---|---|---|
| data-partner-id | required | — | Your partner ID — generate one instantly in the “Get a partner ID” section below. Required for attribution and (optionally) for partner OAuth at signup. |
| data-target | optional | #curbhero-signup | CSS selector for the mount point. The SDK renders inside the first matching element. |
| data-label | optional | Sign in | Text on the signed-out primary CTA. Tune to match your portal's voice ("Sign in to view trash service", "Open Curb Hero", etc.). |
| data-base | optional | https://curbherotrash.com | Override the base URL for login + signup links. Useful only when pointing the embed at staging. |
| data-functions-base | optional | https://us-central1-curbhero-bd084.cloudfunctions.net | Override the backend URL the embed calls for resident data. Same staging-only caveat. |
Tune the sign-in button copy to match your portal's voice.
<script
src="https://curbherotrash.com/embed/curbhero.js"
data-partner-id="grovewood"
data-label="Sign in to view trash service"
async
></script>
<div id="curbhero-signup"></div>If your CMS or portal already has a slot for partner widgets, point data-target at the right selector.
<script
src="https://curbherotrash.com/embed/curbhero.js"
data-partner-id="grovewood"
data-target=".services-grid .curbhero-slot"
async
></script>
<div class="services-grid">
<div class="curbhero-slot"></div>
</div>05
Anything the host page wants to react to (analytics, layout tweaks, telemetry) it can read off of window.postMessage. The embed emits four event types.
// Anything the host page can listen for from the embed
window.addEventListener("message", (event) => {
const msg = event.data;
if (msg?.source !== "curbhero-embed") return;
switch (msg.type) {
case "render": /* SDK mounted into the DOM */ break;
case "auth-success": /* resident signed in; msg.profile available */ break;
case "auth-fail": /* token rejected or expired; msg.reason set */ break;
case "sign-out": /* resident manually signed out */ break;
}
});render
Fires once when the SDK has mounted into the DOM. Use for analytics or to remove a loading placeholder.
auth-success
Fires after the popup handshake completes. The payload includes the resident's profile ({ uid, fullName, email }).
auth-fail
Fires if the stored ID token is rejected by the backend (typically expiry). The payload includes a reason string.
sign-out
Fires when the resident clicks Sign out from inside the embed.
06
If you want to consume Curb Hero data outside the embed (for example, surfacing pickup status inside your own dashboard widgets), the same endpoint works directly. It’s a single authenticated GET with CORS open to any origin.
GET https://us-central1-curbhero-bd084.cloudfunctions.net/getEmbedStatus
Authorization: Bearer <Firebase ID token>
200 OK
{
"user": { "uid": "abc", "fullName": "Priya K.", "email": "p@example.com" },
"households": [
{
"id": "h_1207",
"addressLine1": "1207 Grovewood Ln",
"locationLabel": "Eagle, ID, 83616",
"subscriptionStatus": "active",
"services": [{ "type": "trash", "frequency": "weekly", "dayOfWeek": 2 }],
"todayPickup": {
"status": "taken_out",
"driverFirstName": "Marcus",
"takeOutPhotoUrl": "https://storage.googleapis.com/...?...",
"bringBackPhotoUrl": null
}
}
],
"fetchedAt": "2026-05-19T14:42:30.000Z"
}Authorization: Bearer … header. Tokens are ~1 hour validity; refresh in the popup flow or callauth.currentUser.getIdToken(true) on the Curb Hero origin.07
sessionStorage, scoped by partner ID. The token clears when the tab closes.https://curbherotrash.com, and only consumes the idToken field. Anything else is dropped.window.__curbheroEmbedLoaded.)08
No waiting on us. Enter your organization, an admin email, and the domain you’ll embed on, and we’ll mint your partner ID right here — then hand you the snippet, ready to paste. The ID isn’t a secret (it lives in the embed tag); it just attributes signups to you.
Need partner OAuth (so residents single-sign-on against your identity provider), a vanity ID, or anything else? Email landon@curbherotrash.com or see the live demo.