Use RoxyAPI with Squarespace

Q: 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.

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 script tag, your publishable key, done.

Squarespace does not run 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 a one-tag script that renders the widget and fetches the data in the visitor browser. Nothing to host, nothing to maintain.

What you can build

Natal chart generator: the visitor enters birth date, time, and place, and the wheel renders
Daily, weekly, or monthly horoscope card bound to a zodiac sign
Tarot reading page with three-card or Celtic Cross spreads
Life Path and numerology calculator from name and birth date
Vedic kundli page with nakshatra, Vimshottari Dasha, and panchang
Human Design bodygraph from a birth moment
Compatibility or synastry page for two charts

Requirement: a plan that runs JavaScript

Core plan or higher

JavaScript embeds need a Squarespace plan that supports them: the Advanced Code Block and Code Injection run JavaScript on Core, Plus, Advanced, or a Commerce plan. The entry plan can add a Code Block but it will render only HTML and CSS, so the widget script will not run. Every code feature works during the free trial, so you can test before you pay. See Squarespace Adding custom code to your site.

Step 1: mint a publishable key

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.

Open your account, then API Keys.
Click New key. Choose Publishable and Live.
Under Allowed origins, add your live site host, for example 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.
Copy the pk_live_... value.

Never paste a secret key

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.

Step 2: paste the embed

In the Squarespace editor, edit the page, add a block, and choose Code. For a widget that appears on every page, use Settings, Advanced, Code Injection instead. Paste one of the snippets below and replace pk_live_... 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_..."></div>

<!-- Daily horoscope for one sign: renders straight away -->
<div data-roxy-widget="horoscope-card" data-publishable-key="pk_live_..." data-sign="aries"></div>

Load the full component bundle and place any component tag. Give it the endpoint and your key. The component renders its own inputs and fetches on submit.

<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js" crossorigin="anonymous" defer></script>

<!-- Natal chart (POST endpoint, no method needed) -->
<roxy-natal-chart data-endpoint="astrology/natal-chart" publishable-key="pk_live_..."></roxy-natal-chart>

<!-- Horoscope (GET endpoint, so set method="GET") -->
<roxy-horoscope-card data-endpoint="astrology/horoscope/{sign}/daily" method="GET" publishable-key="pk_live_..."></roxy-horoscope-card>

Match the site look

Add one stylesheet link to restyle every widget on the page with a warm, editorial preset:

<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 only needs the slug; the full-control path needs the endpoint and, for GET endpoints, method="GET". 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

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.

Gotchas

The code shows up as plain text on the page

You are on the entry plan, which does not run JavaScript in a Code Block. Upgrade to Core or higher, or test on the free trial where all code features work.

Nothing renders, but only while I am logged in

Squarespace hides code-block scripts from you while you are logged in over a secure connection. Open your site in a private or incognito window to see the widget the way visitors do.

I get a 403 origin_not_allowed error

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.

Nothing renders on a very old browser or with JavaScript off

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.

What next

The Western astrology guide and Vedic astrology guide cover which endpoints to call and what the fields mean.
The publishable key reference explains the origin allowlist and browser auth in full.
Outgrowing embeds and want a full app? Fork a starter template or wire the SDK into your own backend.
Browse the API reference for every endpoint across 12 domains.

FAQ

Can I add astrology to Squarespace without a plugin?

Yes. Squarespace has no plugin marketplace for render widgets, so you embed a small script 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?

You need a plan that runs JavaScript in a Code Block or Code Injection, which is Core or higher. The entry plan renders only HTML and CSS, so the widget script will not run. All code features work during the free trial, so you can test the widget before you choose a plan.

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 three things. First, your plan must run JavaScript, so use Core or higher. Second, view the page in an incognito window, because Squarespace hides code-block scripts while you are logged in. Third, if you see a 403 error, add your exact site host to the key allowlist in your account.

Which Squarespace plan do I need for custom code?

The Advanced Code Block and Code Injection, which run JavaScript, require Core, Plus, Advanced, or a Commerce plan. The basic Code Block on the entry plan supports HTML and CSS only. Checkout pages do not accept custom code, so embed on normal content pages.