# 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](/widgets). 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_`.
1. Open your [account API keys](/account?tab=keys) (Account, then API Keys).
2. Click **New key**, choose **Publishable** and **Live**.
3. Add your site domain to the key's origin allowlist, for example `mysite.com`. Add the `www.` form too if your site answers on both.
4. Copy the key. You will paste it into the gallery next.
**Warning: 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](/pricing). 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
1. Open the [widgets gallery](/widgets).
2. 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.
3. Leave the language on **Match the page** unless you want the widget fixed to one language. See [Languages](#languages) below.
4. 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.
### Hosted embed URL
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_KEY
```
### Iframe
Paste into any HTML block. Works where a raw script tag is not allowed.
```html
```
### Script tag
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.
```html
```
Want the full component bundle and per-tag control instead? Load `roxy-ui.js` and place the component tag with its endpoint:
```html
```
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](/docs/integrations/squarespace), [Wix](/docs/integrations/wix), [Shopify](/docs/integrations/shopify), and [WordPress](/docs/integrations/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](/docs/ui#languages-and-localization).
## 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 says it is not authorized for this site, or you see a 403
The page host is not on the key's origin allowlist. Open the key in your [account](/account?tab=keys) and add the exact host the page is served from, including the `www.` form if you use both.
### 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](#languages) above.
Still stuck? [Contact us](/contact) 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](/docs/ui#theming).