Add a natal chart, a daily horoscope, a tarot reading, or a Life Path calculator to any Squarespace page in about 10 minutes. No plugin, no backend, no build step. One snippet, your publishable key, done.
Squarespace runs no server-side code and has no plugin marketplace for render widgets, so the fit is a browser embed: a publishable key (pk_) that is safe to put in a Code Block, plus one snippet that renders the widget and fetches the data in the visitor browser. Nothing to host, nothing to maintain.
Every embeddable widget is in the widget builder: pick one, style it, add your key, and copy the code from the Squarespace tab into a Code Block. The widgets guide covers the same three delivery modes for every platform.
On every plan a Code Block renders plain text, HTML, Markdown, and CSS inside <style> tags. JavaScript and iframes in a Code Block need Core, Plus, Advanced, Business, Commerce Basic, or Commerce Advanced. Code Injection needs Core, Plus, Advanced, or a legacy billing plan. Both widget snippets below are JavaScript, and so is the iframe fallback, so the entry plan cannot run either. See Squarespace Code blocks and Add custom code to your site.
A publishable key (pk_) is built for the browser. It cannot read your account, and you lock it to your own domain so no one else can spend your quota with it.
yourdomain.com. If you are testing on the built-in preview URL first, add that exact host too, for example your-site.squarespace.com. Origins are matched by exact host with no wildcards, so list every host you publish on.pk_live_... value.Only a publishable pk_ key belongs in a Code Block, because the block is public HTML that anyone can view. A secret sk_ key is refused in the browser and will simply not work. Keep secret keys on a server only.
Start at the widget builder: pick your widget, add your key under Your website, and copy the code. Then, in Squarespace:
For a widget that should appear on every page, use the Code Injection panel instead and put the snippet in the Header field, which is injected into the <head> tag site-wide. JavaScript there has to sit inside <script></script> tags.
The snippets below show what you are pasting. If you copy from here instead of the widget builder, replace pk_live_YOUR_KEY with your key.
Load the widgets script once, then drop one div per widget. With the required data present it fetches on load, otherwise it renders its own form for the visitor to fill.
<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/widgets.js" defer></script>
<!-- Natal chart: renders a birth-data form, then the wheel -->
<div data-roxy-widget="natal-chart" data-publishable-key="pk_live_YOUR_KEY"></div>
<!-- Daily horoscope for one sign: renders straight away -->
<div data-roxy-widget="horoscope-card" data-publishable-key="pk_live_YOUR_KEY" data-sign="aries"></div>Any data- attribute on the div is passed to the endpoint, which is why data-sign="aries" fills the sign and the card fetches on load instead of asking. Add data-period="weekly" for the weekly card, and data-lang="es" to fix a widget to one language.
Load the full component bundle and place any component tag with your key. The component renders its own inputs and fetches on submit, or opens straight on a list when the request needs nothing.
<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js" defer></script>
<!-- Natal chart -->
<roxy-natal-chart publishable-key="pk_live_YOUR_KEY"></roxy-natal-chart>
<!-- Daily horoscope; period picks weekly, monthly or yearly -->
<roxy-horoscope-card period="daily" publishable-key="pk_live_YOUR_KEY"></roxy-horoscope-card>No script tag at all. We host the page, you paste one line. Give it a height, because an iframe has none of its own.
<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>Squarespace Embed Blocks accept only oEmbed sources, so pasting roxyapi.com/embed/... as a plain link there renders nothing. Use the iframe above in a Code Block.
Add one stylesheet link to restyle every widget on the page with the warm, editorial Rosewater preset (swap the file for eucalyptus.css, kiln.css, moonlit.css, or celeste.css for the other looks):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/styles/themes/practitioner.css">Or set your own brand color with :root { --roxy-accent: #914955; } in the Custom CSS editor. Every chart and card follows it.
The one-tag path takes the slug and the full-control path takes the component tag. Each opens on the endpoint listed below with no extra attribute. A few common ones:
| Widget | One-tag slug | Component tag | Endpoint | Method |
|---|---|---|---|---|
| Natal chart | natal-chart | <roxy-natal-chart> | astrology/natal-chart | POST |
| Horoscope card | horoscope-card | <roxy-horoscope-card> | astrology/horoscope/{sign}/daily | GET |
| Moon phase | moon-phase | <roxy-moon-phase> | astrology/moon-phase/current | GET |
| Vedic kundli | vedic-kundli | <roxy-vedic-kundli> | vedic-astrology/birth-chart | POST |
Every embeddable widget is in the widget builder, its code filled with your key once you add it. Browse every component, live, with its exact tag and endpoint on the component gallery. The full machine-readable list is the components catalog, and every parameter is in the API reference.
Two causes, both easy. Open the block editor and check that Mode is set to HTML, not JavaScript or CSS, and that Display Source is off; a block on either of those settings prints the code by design. If Mode is already HTML, you are on the entry plan, which does not run JavaScript in a Code Block at all. Core or higher fixes it.
Squarespace hides code-block scripts from you while you are logged in over a secure connection. Click Preview in Safe Mode to view the embedded item, or open your site in a private window to see it the way visitors do.
Two Squarespace behaviors do this. Code may not render on a page that sits inside an Index, so remove the page from the Index in the Pages panel and test again logged out. And Ajax loading can conflict with embedded custom code, so try disabling Ajax in your site styles.
The page host is not on your key allowlist. In your account, open the key and add the exact host, both your live domain and the your-site.squarespace.com preview host if you are testing there. Hosts are matched exactly, with no wildcards.
A GET endpoint (horoscope, moon phase) needs method="GET" in the full-control snippet. POST endpoints (natal chart and most others) need no method attribute. The one-tag widgets snippet sets the method for you, so use that if you are unsure.
Squarespace checkout pages do not accept custom code. Put the widget on a normal content page and link to it.
The widget needs JavaScript, and Squarespace has no server to fall back to. Modern browsers are fine. Add a short line of plain text near the widget for the rare visitor with scripts disabled.
Can I add astrology to Squarespace without a plugin?
Yes. Squarespace has no plugin marketplace for render widgets, so you embed a small snippet instead. Paste one script tag and one widget tag into a Code Block, add your publishable key, and the widget renders and fetches data in the visitor browser. No backend and no build step are needed.
Do I need a paid Squarespace plan to embed a widget?
Yes. JavaScript and iframes in a Code Block are available on Core, Plus, Advanced, Business, Commerce Basic, and Commerce Advanced. On the entry plan a Code Block renders only plain text, HTML, Markdown, and CSS, so the widget snippet will not run.
Is my API key safe in a Squarespace Code Block?
Yes, if you use a publishable key. A publishable pk_ key is built for the browser, cannot read your account, and is locked to the domains you list on its allowlist, so a copied key cannot spend your quota from another site. Never paste a secret sk_ key, because a Code Block is public HTML; secret keys are refused in the browser anyway.
Why is my RoxyAPI widget not showing on Squarespace?
Check four things. Open the block editor and set Mode to HTML, because a block left on JavaScript prints the code as text. Confirm your plan runs JavaScript, so Core or higher. Use Preview in Safe Mode or a private window, because Squarespace hides code-block scripts while you are logged in. And if you see a 403, add your exact site host to the key allowlist in your account.
Which Squarespace plan do I need for custom code?
Code Blocks are on every plan for plain text, HTML, Markdown, and CSS. Running JavaScript or an iframe inside one needs Core, Plus, Advanced, Business, Commerce Basic, or Commerce Advanced. Code Injection needs Core, Plus, Advanced, or a legacy billing plan. Checkout pages do not accept custom code, so embed on normal content pages.
Hi, I am Rosie, your guide to the RoxyAPI insight tools.
Ask me to read your birth chart, pull a card, or map your numbers, and I will interpret what it means for you. Unlike most AIs, I never make the numbers up: every reading runs on real, verified calculations. Curious about the API, pricing, or docs instead? Ask me that too.