- Docs
- Build With RoxyAPI
- Copy-paste Widgets
Copy-paste astrology widgets for any website
Put a live natal chart, daily horoscope, tarot reading, or Life Path calculator on the site you already have. One snippet, one publishable key, no code, no server.
A widget is a RoxyAPI UI component running on its own. It draws its own form, asks your visitor for their details, fetches the reading, and renders the result inside your page. The same widgets work on Squarespace, Wix, Shopify, WordPress, Notion, Linktree, Stan Store, and any page that accepts an HTML block or a link.
Every embeddable widget is on the widgets gallery. Paste your key there once and every snippet on the page fills itself in.
Get your publishable key
Widgets run in your visitor's browser, so they use a publishable key, which is safe to leave in public page source. It starts with pk_.
- Open your account API keys (Account, then API Keys).
- Click New key, choose Publishable and Live.
- Add your site domain to the key's origin allowlist, for example
mysite.com. Add thewww.form too if your site answers on both. - Copy the key. You will paste it into the gallery next.
Never paste a secret key into a page
A secret key (sk_) belongs on a server, never in page source. A widget refuses one and shows an error instead of a reading. If you only have a secret key, create a publishable one; both live in the same account.
No account yet? Pick a plan. Every plan includes every widget, and a reading a visitor generates counts as one API request against your monthly quota, the same as any other call.
Fill the gallery once
- Open the widgets gallery.
- Paste your key into the Publishable key box at the top. The box follows you to the bottom of the screen while you scroll the gallery, so it is always one tap away.
- Leave the language on Match the page unless you want the widget fixed to one language. See Languages below.
- Find your widget, pick a delivery mode, and press Copy.
Your key stays in your browser. The gallery sends nothing to RoxyAPI; it only rewrites the snippets on the page. If the Copy button says "add your key", the snippet still carries the sample key and you skipped step 2.
Three ways to embed
Same key, same widget. Pick the one your platform accepts.
Paste this as a link into any block that accepts one: a Notion embed, a Linktree link, a Stan Store block, or a Squarespace embed block. RoxyAPI hosts the page, you host nothing. The pk= part must be your own key.
https://roxyapi.com/embed/natal-chart?pk=pk_live_YOUR_KEYPaste into any HTML block. Works where a raw script tag is not allowed.
<iframe src="https://roxyapi.com/embed/natal-chart?pk=pk_live_YOUR_KEY" title="Natal chart widget" style="border:0;width:100%;height:600px" loading="lazy"></iframe>Load the widgets script once, then drop one div per widget. The data-roxy-widget slug picks the widget, and it renders its own form and fetches for the visitor.
<script type="module" src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/widgets.js"></script>
<div data-roxy-widget="natal-chart" data-publishable-key="pk_live_YOUR_KEY"></div>Want the full component bundle and per-tag control instead? Load roxy-ui.js and place the component tag with its endpoint:
<script type="module" src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js"></script>
<roxy-natal-chart data-endpoint="astrology/natal-chart" publishable-key="pk_live_YOUR_KEY"></roxy-natal-chart>GET-based widgets (daily horoscope, moon phase) need method="GET" on the component tag; the one-tag data-roxy-widget form sets it for you. The gallery always shows the exact snippet per widget, so copy from there rather than editing by hand.
Pick your platform
Step-by-step walkthroughs with screenshots of each editor: Squarespace, Wix, Shopify, and WordPress. Notion, Linktree, and Stan Store take the hosted embed URL as a link or an embed block, no walkthrough needed.
Languages
A widget follows the language of the page it sits on. A Spanish site gets a Spanish widget with no setting at all. To fix the language regardless of the page, pick one in the gallery before you copy and the snippet carries it. What is translated, and how the hosted embed handles language, is on the UI components page.
Fix a widget that shows an error
The widget says the API key is invalid, or you see a 401
The snippet still carries the sample key pk_live_YOUR_KEY, or the key was pasted with a typo. Open the gallery, paste your real key into the box at the top, and copy the snippet again. A hosted embed URL must end in your own key, not the sample; an embed opened with the sample key shows a setup notice in place of the widget.
The widget refuses the key
You pasted a secret key. Create a publishable key and use that instead.
Nothing renders at all
Your platform stripped the script tag. Use the iframe or the hosted embed URL, which work in any HTML block, and give the iframe a height.
The reading is in English on a non-English site
Set the language in the gallery before copying, or set lang on the widget. See Languages above.
Still stuck? Contact us with the page URL and the widget name.
Frequently asked questions
Do I need to know how to code?
No. Copy one snippet from the gallery and paste it where the reading should appear. The widget draws its own form and fetches the reading itself.
Is it safe to put the key in my page?
Yes. A publishable key is made for the browser. Lock it to your own domain in the allowlist, and a copied key cannot spend your quota from another site.
Does a widget reading count against my quota?
Each reading a visitor generates is one API request, the same as any other call. Every plan includes every widget.
Can I style the widget to match my site?
Yes. Theme tokens, dark mode, and the practitioner theme are covered under theming on the UI components page.