Thanks to visit codestin.com
Credit goes to roxyapi.com

Skip to content
RoxyAPI
Quick StartPlaygroundSDKMCP SetupFree TemplatesAGENTS.md
  1. Docs
  3. Integrations
  5. Squarespace

Squarespace astrology widget, embed horoscopes

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 has a prefilled snippet on the widgets gallery. Paste your key there once and every snippet on the page fills itself in, so the whole flow is copy from there, paste into a Code Block. The widgets guide covers the same three delivery modes for every platform.

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

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.

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.

  1. Open your account API keys (Account, API Keys).
  2. Click New key. Choose Publishable and Live.
  3. 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.
  4. 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

Start at the widgets gallery: paste your key there once, pick your widget, and copy the snippet. Then, in Squarespace:

  1. Edit the page or post.
  2. Hover over the section, click Add block or +, and click Code.
  3. Click the pencil icon on the block to open the block editor.
  4. Set the Type menu to HTML and leave Display Source off. A block left on JavaScript or CSS prints your code on the page as text instead of running it.
  5. Paste the snippet and save.

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 gallery, 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.

The Embed Block will not take that link

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.

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.

Pick any widget

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:

WidgetOne-tag slugComponent tagEndpointMethod
Natal chartnatal-chart<roxy-natal-chart>astrology/natal-chartPOST
Horoscope cardhoroscope-card<roxy-horoscope-card>astrology/horoscope/{sign}/dailyGET
Moon phasemoon-phase<roxy-moon-phase>astrology/moon-phase/currentGET
Vedic kundlivedic-kundli<roxy-vedic-kundli>vedic-astrology/birth-chartPOST

Every embeddable widget has a ready-to-paste snippet on the widgets gallery, prefilled with your key once you paste it there. 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

Two causes, both easy. Open the block editor and check that Type 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 Type 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.

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

Nothing renders on one specific page

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.

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.

The widget shows an error about the endpoint not being found

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.

It works everywhere except checkout

Squarespace checkout pages do not accept custom code. Put the widget on a normal content page and link to it.

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

FAQ

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 Type 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.