Embeddable widgets

Not every app is a full site. Cloudrizz can build an embeddable widget — a chat bubble, a live badge, a share button — that drops onto any website with one <script> tag and talks back to its own backend. It's a starter type, so ask your assistant for an embeddable widget and you get this shape.

What you get

widget.js — a self-mounting script (IIFE). The embedding page only needs this one tag.
index.html — a demo page that mounts the widget in place and shows the copy-paste embed snippet (handy while building).
api/data.js — an example JSON endpoint the widget fetches, with CORS pre-configured so it works from any origin.

Embedding it

A site owner adds one script tag and a target element. Configuration rides on data- attributes — no build step on their end:

<script src="https://<your-slug>.cloudrizz.app/widget.js"
        data-cz-target="#my-widget"
        data-cz-greeting="Hi there"></script>
<div id="my-widget"></div>

The script finds itself in the page, reads its data- attributes, and mounts into the target element (defaulting to #cloudrizz-widget if none is given). It waits for the DOM to be ready, so placement is flexible.

Talking to its backend

Because the widget runs on someone else's page, requests to its API are cross-origin. The starter's api/data.js already returns CORS headers, so the widget can fetch its own backend from any host:

// inside widget.js, running on a third-party page
const res = await fetch("https://<your-slug>.cloudrizz.app/api/data");
const data = await res.json();

Any route can opt into cross-origin access. The starter wires CORS for you on the example endpoint; mirror that pattern (or have your assistant do it) on routes a widget calls from other sites.

Everything else still applies

A widget app is a normal Cloudrizz app — it has the same bindings (database, storage, AI, email), the same build & deploy flow, and can have a custom domain. Only the frontend shape differs.