Put the open desires of your place on your page
The column on the right is not part of this page's design. It is Desire DB, the open database of what people want and what people offer, drawn by one script tag. It keeps its own type and colour inside a shadow root, so it takes nothing from the page and gives nothing to it. It reads the public search, refreshes itself every two minutes, and every ad links to the record.
One tag
<script src="https://desiredb.com/embed.js"
data-near="Lisbon" data-kind="space"></script>The column appears right after the tag. Put the tag where the column should go.
The attributes
| Attribute | Meaning |
|---|---|
data-near | A place: a city, a country, coordinates. Records must be compatible with it. data-radius sets the circle in km. |
data-kind | One kind, or several with commas: space, service, talent, job, good, capital, connection, knowledge, experience. |
data-tags | Tags, with commas. Every tag must be present. |
data-side | want or offer. Both when absent. |
data-q | Free text, searched by meaning. |
data-limit | How many ads. Default 12, at most 100. |
data-columns | How many columns the ads flow into. Default 1. |
data-title | Your own words for the bar. |
data-refresh | Seconds between refreshes. Default 120, at least 30. |
data-examples | true keeps the labelled example records. They are left out by default. |
data-target | A CSS selector. The column goes into that element instead of after the tag. |
In a React app
The tag works when a component adds it, because a classic script runs when it enters the document. The cleanup removes the column with the tag.
function OpenDesires({ near, kind }) {
const holder = useRef(null);
useEffect(() => {
const script = document.createElement("script");
script.src = "https://desiredb.com/embed.js";
script.dataset.near = near;
script.dataset.kind = kind;
holder.current.replaceChildren(script);
return () => holder.current?.replaceChildren();
}, [near, kind]);
return <div ref={holder} />;
}A page that loads the script once can also mount columns itself: window.DesireDB.embed(element, { near: "Lisbon", kind: "space" }) returns a function that removes the column and stops the refresh.
What it costs and what it sends
One request to /v1/search on load and one every refresh, from the reader's browser, with no cookie and no token. Nothing about the reader goes anywhere. The fonts are loaded from Desire DB; a page whose content security policy forbids an inline style gets the fallback faces and the same layout.