Widgets

The widgets are one small script (about 14 KB gzipped, no dependencies) that draws ready-made astrology panels on your page. They run in the visitor's browser and call the API with a publishable key, so you need no server code. See them working on the live preview.

InstallCopy Anchor Link

1. Create a publishable key under API keys in the dashboard. List your website under Allowed origins (for example www.example.com, or localhost while developing). Leave the capabilities on the full widget list, or tick only what you use (see What each widget needs).
2. Add the script once and a div for each widget:

<script src="https://96astroapi.com/widgets/v1.js" async></script>

<div data-astro96-widget="panchang"
     data-key="pk_live_YOUR_KEY"
     data-place="New Delhi"></div>

The script finds every data-astro96-widget element when the page loads, and also those added later (single-page apps). To mount one by hand, call Astro96Widgets.mount(element); Astro96Widgets.scan(container) mounts everything inside a container.

/widgets/v1.js is the stable address of the 1.x line: it receives fixes and additions that keep your markup working. A breaking change would be published as /widgets/v2.js. Use this address. Browsers and CDNs keep it for 5 minutes and may show the previous copy for a while longer while they fetch the new one, so a fix reaches your visitors within minutes without any change on your site.

If you must freeze the exact bytes (a change-controlled site, a Subresource Integrity hash), the same file is also served as /widgets/v1.<hash>.js, named after its contents and cached for a year (immutable). The current name is in /widgets/manifest.json. A pinned file never changes, so it never receives fixes: re-pin to update.

OptionsCopy Anchor Link

Options are data- attributes on the widget's div.

The widgetsCopy Anchor Link

Panchang. Weekday, tithi, nakshatra, yoga and karana with end times, sunrise, sunset, moonrise, moonset, Rahu Kaal and the day's festivals, for a place and a date.

Horoscope. A daily, weekly or monthly reading for a Moon sign, with its score, lucky number and colour, and remedy when the answer has them. The reading needs a place for the Moon's position that day. Unless you give data-lat, data-lon and data-timezone, the widget uses New Delhi, so every visitor sees the same reading for a sign.

Kundli. The visitor enters date, time and place of birth and gets the key facts (ascendant, Moon sign and nakshatra, Sun sign, avakhada), the birth chart (D1, South Indian style) and a table of every planet. The chart is the API's own drawing (vedic-charts/chart-image-styles, SVG). It is sanitized in the browser before it is shown: only drawing elements are kept, and scripts, foreignObject, event handlers and external references are removed. If the key does not allow that capability, or the drawing fails or takes more than 20 seconds, the widget draws a plain grid chart from the planet positions instead. The place is searched by name; when the search finds several plausible places the visitor picks one from a list, and the widget always says which place it used.

Matching. Two people enter birth details. The widget reads each Moon's nakshatra and pada from the planet positions and shows the Ashtakoot (guna milan) score out of 36, the verdict, the score of each koota, and the Nadi and Bhakoot doshas.

AI chat. A round button that opens a chat panel. The visitor gives birth details once, then asks questions; the last six turns are sent along so follow-ups make sense. Answers stream in word by word when the browser supports it, and otherwise arrive whole. Each answer spends real credits, so the key must have AI chat switched on, and you should use a dedicated key for it with a tight origin list. Without AI chat on the key the visitor sees a "not allowed" message.

What each widget needsCopy Anchor Link

A publishable key may only call the widget capabilities listed in Key restrictions. Each widget uses:

If you restrict a key's capabilities, keep these for the widgets you embed. Calls from widgets count toward your credits (live keys) or the sandbox limits (test keys), and each visitor IP is limited to 30 calls a minute per key.

LanguagesCopy Anchor Link

data-lang sets the language of the widget's own texts and asks the API for translated results (language and labels, see Languages). The interface texts are built in for English, Hindi, Spanish, French and German; these were written with AI tools and have not been reviewed by native speakers. For another language the interface stays English while results come in that language wherever the capability supports it, and fall back to English where it does not. Replace any text with data-messages:

<div data-astro96-widget="panchang" data-key="pk_live_YOUR_KEY" data-place="Pune"
     data-lang="mr" data-messages='{"show":"दाखवा","panchang":"आजचे पंचांग"}'></div>

The message keys are those of the English set (place, date, show, loading, panchang, tithi, nakshatra, sunrise, chat, send, eCredits and so on), listed at the top of packages/widgets/src/core.ts in our repository.

Themes and stylingCopy Anchor Link

Each widget lives in a Shadow DOM: your site's CSS cannot break it and it cannot change your page. Choose data-theme="light", "dark" or "auto". The widget is a block up to 640 px wide; set the width with the div's own CSS. Every widget except the chat bubble ends with a small "Powered by 96Astro API" link to 96astroapi.com.

Errors the visitor can seeCopy Anchor Link

Nothing is thrown at your page; the widget shows a short message in an alert region and keeps working.

AccessibilityCopy Anchor Link

Fields have visible labels; controls are at least 44 px high and keyboard operable with a visible focus ring; results are announced through a polite live region and errors through an alert; the chart has a text alternative (the planet table); when a place search finds several matches the visitor chooses from a labelled list (listbox: arrow keys, Home, End, Enter, Escape, or a click) and the number of matches is announced; the chat panel is a labelled dialog that closes with Escape and returns focus to its button; transitions are skipped for visitors who prefer reduced motion.

Privacy and securityCopy Anchor Link

• A publishable key is visible to anyone who views your page. It works only from your allowed origins, only for the widget capabilities, and is limited per visitor; still, treat a key that spends credits (AI chat) as a cost you accept. Rotate it from the dashboard if it is abused.
• What a visitor types (a place, birth details, a question) is sent from their browser to api.96astroapi.com. Mention this in your own privacy notice. The widgets set no cookies and store nothing in the browser.
• If your site uses a Content Security Policy, allow script-src https://96astroapi.com and connect-src https://api.96astroapi.com.