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. Cross-origin access is handled app-wide (see below), so the route itself stays plain.

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. Cross-origin access (CORS) is an app-wide setting — “Cross-origin embeds” in the app's dashboard — and it defaults to allowing any origin, so a fresh widget app can fetch its own backend from any host with no per-route setup:

// 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();
The CORS policy applies to every route (API and static) at once — you don't add CORS headers per route. Lock it down by setting “Cross-origin embeds” to a specific list of allowed origins when you don't want the app embeddable everywhere.

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.