Build a daily horoscope widget

Ship a 12-sign horoscope page with the drop-in <roxy-horoscope-card> web component. No framework, no markup to maintain, dynamic or fully static. Time to ship: 15 minutes.

This is the fastest end-to-end build in the RoxyAPI catalog. Pick the sign, render the card. Wellness embeds, lifestyle landing-page widgets, daily-check-in features, all built around GET /astrology/horoscope/{sign}/daily.

What you can build

• Standalone daily horoscope pages
• Wellness and meditation app daily-check-in cards
• Landing-page widgets that refresh automatically
• Weekly and monthly variants with the same fetch shape
• Personalized forecasts by layering POST /astrology/transits on top of a saved natal chart

Prerequisites

1. A RoxyAPI key. Get your API key.
2. A text editor and a browser. No build step.

Install

Pick one of three paths:

npm install @roxyapi/sdk

pip install roxy-sdk

composer require roxyapi/sdk

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

Call the endpoint

One GET, one sign, every field you need to render a card. Verified against the live OpenAPI spec (getDailyHoroscope).

curl "https://roxyapi.com/api/v2/astrology/horoscope/aries/daily" \
  -H "X-API-Key: $ROXY_API_KEY"

import { createRoxy } from '@roxyapi/sdk';

const roxy = createRoxy(process.env.ROXY_API_KEY!);

const { data } = await roxy.astrology.getDailyHoroscope({
  path: { sign: 'aries' },
});

console.log(data.overview);        // hero paragraph
console.log(data.love);            // love-specific paragraph
console.log(data.luckyNumber);     // 7
console.log(data.compatibleSigns); // ["Leo", "Sagittarius", "Gemini"]

import os
from roxy_sdk import create_roxy

roxy = create_roxy(os.environ['ROXY_API_KEY'])

horoscope = roxy.astrology.get_daily_horoscope(sign='aries')
print(horoscope['overview'])
print(horoscope['luckyNumber'])

<?php

use function RoxyAPI\Sdk\createRoxy;

$roxy = createRoxy(getenv('ROXY_API_KEY'));

$horoscope = $roxy->astrology->getDailyHoroscope(sign: 'aries');
echo $horoscope['overview'];
echo $horoscope['luckyNumber'];

using RoxyApi;

var roxy = new RoxyClient(Environment.GetEnvironmentVariable("ROXY_API_KEY")!);

var horoscope = await roxy.Astrology.Horoscope["aries"].Daily.GetAsync();

Console.WriteLine(horoscope!.Overview);                                     // hero paragraph
Console.WriteLine(horoscope.Love);                                          // love-specific paragraph
Console.WriteLine(horoscope.LuckyNumber);                                   // 7
Console.WriteLine(string.Join(", ", horoscope.CompatibleSigns ?? new()));  // Leo, Sagittarius, Gemini

claude mcp add-json --scope user roxy-astrology '{"type":"http","url":"https://roxyapi.com/mcp/astrology","headers":{"X-API-Key":"YOUR_KEY"}}'

Response fields exposed by the endpoint: sign, date, column, overview, love, career, health, finance, advice, events[], luckyNumber, luckyColor, compatibleSigns[], moonSign, moonPhase, energyRating (1-10), activeTransits[]. column is the whole reading as one continuous piece of prose, for a layout that wants a single paragraph rather than six labelled ones. events[] lists the dated astronomical events the reading is built on, each with the moment it perfects and the house it falls in for this sign, so a value in the copy can be checked against the sky.

Render the result

Two ways, ordered shortest first.

Option A: drop-in web component (recommended)

<roxy-horoscope-card> is a Lit web component shipped by @roxyapi/ui. Pass the SDK response, the card renders. Works in vanilla HTML, React, Vue, Svelte, WordPress, Wix, Shopify, anything.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Daily Horoscope</title>
  <script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@0/dist/cdn/roxy-ui.js" defer></script>
</head>
<body>
  <select id="sign">
    <option value="aries">Aries</option>
    <option value="taurus">Taurus</option>
    <option value="gemini">Gemini</option>
    <option value="cancer">Cancer</option>
    <option value="leo">Leo</option>
    <option value="virgo">Virgo</option>
    <option value="libra">Libra</option>
    <option value="scorpio">Scorpio</option>
    <option value="sagittarius">Sagittarius</option>
    <option value="capricorn">Capricorn</option>
    <option value="aquarius">Aquarius</option>
    <option value="pisces">Pisces</option>
  </select>

  <roxy-horoscope-card id="card" period="daily"></roxy-horoscope-card>

  <script type="module">
    import { createRoxy } from 'https://cdn.jsdelivr.net/npm/@roxyapi/sdk@latest/dist/factory.js';

    // Browser-side: use a publishable key (pk_live_* / pk_test_*).
    // Until then, proxy the call through a backend route.
    const roxy = createRoxy('YOUR_PUBLISHABLE_KEY');

    async function load(sign) {
      const { data } = await roxy.astrology.getDailyHoroscope({ path: { sign } });
      document.getElementById('card').data = data;
    }

    document.getElementById('sign').addEventListener('change', (e) => load(e.target.value));
    load('aries');
  </script>
</body>
</html>

The card handles layout, lucky-number row, moon phase, compatible signs, and theming via CSS custom properties. Override colors with --roxy-accent, --roxy-surface, --roxy-border. See the UI components page for the full token list.

Option B: no-build, server-rendered (inline JSON)

When the page is served from a static host or a cache and there is no client JavaScript to set .data, fetch on your server with the secret key and inline the unwrapped response into the card as a child <script type="application/json" class="roxy-data">. The component reads it on load. No key in the browser, still the same <roxy-horoscope-card> render. This is Pattern 7 from the UI components page.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Daily Horoscope</title>
  <script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@0/dist/cdn/roxy-ui.js" defer></script>
</head>
<body>
  <roxy-horoscope-card period="daily">
    <script type="application/json" class="roxy-data">
      {
        "sign": "Aries",
        "date": "2026-05-31",
        "overview": "The Full Moon falls in Sagittarius today, with your ninth house of adventure and higher learning taking it...",
        "love": "Venus sits in Cancer. Your fourth house is where that lands, and it governs affection, taste, money spent on pleasure, and the terms people agree to...",
        "career": "Plainly put, Uranus is in Gemini and your third house is the address, and the ground is sudden change, independence, and whatever has quietly stopped fitting...",
        "health": "Neptune stands in Aries. That is your first house of identity and self-expression, where a person is read off how they carry themselves rather than off what they claim...",
        "finance": "Among the things that simply are, Mars in Taurus puts effort, appetite, conflict, and whatever has to be pushed inside your second house of finances and personal values...",
        "advice": "The Full Moon falls in Sagittarius today, at the level of your ninth house of adventure and higher learning...",
        "luckyNumber": 8,
        "luckyColor": "Red",
        "compatibleSigns": ["Leo", "Sagittarius", "Gemini"],
        "moonSign": "Sagittarius",
        "moonPhase": "Full Moon",
        "energyRating": 4
      }
    </script>
  </roxy-horoscope-card>
</body>
</html>

Your server template writes the JSON in. The inlined JSON is a getDailyHoroscope response trimmed to the fields this card reads, which is why column, events and activeTransits are absent here: drop in the whole response and the card ignores what it does not use. It is the same object you would assign to .data. Inline the unwrapped response, never the SDK envelope. Setting the JavaScript .data property later always wins over the inlined JSON, so one card tag covers both server-rendered and dynamic pages with no branching.

Ready-made template

Skip the build entirely with the open-source template at /templates/astrology-starter-app. React Native + Expo + TypeScript, ships horoscopes, natal charts, synastry, and transits. Clone and deploy:

git clone https://github.com/RoxyAPI/astrology-starter-app
cd astrology-starter-app
npm install
echo "EXPO_PUBLIC_ROXY_API_KEY=your_key" > .env.local
npm start

For the web build, the astrology-ai-chatbot template ships horoscopes alongside the full conversational surface, Next.js 16 + Vercel AI SDK + Remote MCP.

Deploy

Two zero-config options.

• Cloudflare Pages. Drag the file into a new project at pages.cloudflare.com. Global CDN, HTTPS, deploys in under a minute.
• Vercel. Drop the file in a folder, run npx vercel.

For production, move the API key to an environment variable and proxy through a serverless function. One file becomes two: the client calls your function, your function calls RoxyAPI with the secret key. Or use a publishable key (pk_live_*) and skip the proxy.

Gotchas

• Sign slugs are lowercase in the URL. aries, not Aries. Server is case-insensitive but the convention is lowercase.
• compatibleSigns returns capitalized names (["Leo", "Sagittarius", "Gemini"]) but the path param stays lowercase. Easy templating trip.
• Weekly and monthly add extra fields. Switch the URL to /weekly or /monthly and the response gains fields like week, luckyDays[], weekByWeek[], keyDates[].
• Do not ship a secret key in browser code for production. Use a publishable key with origin allowlist, or proxy. The demo HTML above is for local prototyping only.
• Positions are read directly from the NASA JPL DE440 ephemeris and verified against NASA JPL Horizons. The engine is Roxy Ephemeris, built in house.

What to build next

• The astrology guide lists every Western endpoint your widget can layer on (transits, moon phase, synastry).
• The dating app tutorial wires two-person compatibility on the same astrology surface.
• The personalized tracker tutorial goes deeper: Human Design bodygraph, daily forecast, Life Path, all on one page for one user.