Widget Documentation - ModernAstro

Quick Start

1

Get your API key

Register with your email and website URL. Your key is generated instantly.

2

Add the script tag

Paste this into your HTML where you want the widget:

<div id="my-widget"></div>
<script src="https://cdn.modernastro.com/widgets/v1/loader.js"
  data-key="YOUR_API_KEY"
  data-widget="panchang"
  data-target="my-widget"
  data-location="28.6139,77.2090"
  async></script>

3

Done!

The widget renders inside Shadow DOM — no CSS conflicts with your site. Customize with data attributes.

Data Attributes

Attribute	Required	Description
data-key	Yes	Your API key (pk_live_...)
data-widget	Yes	Widget type: panchang, choghadiya, nakshatra, kundli, numerology, compatibility
data-target	No	CSS selector or ID of container element
data-theme	No	light (default), dark, or auto
data-accent	No	saffron (default), celestial, emerald, purple
data-lang	No	en (default) or hi
data-size	No	compact, standard (default), or wide
data-location	Auto-load only	Coordinates as lat,lon (e.g., 28.6139,77.2090)
data-location-name	No	Display name for the location

Widget Catalog

Panchang

data-widget="panchang"

Auto-load

Shows today's Tithi, Nakshatra, Yoga, Karana, Sunrise/Sunset, and Rahu Kaal. Requires data-location.

API params: coordinates, date, language, locationName

Choghadiya

data-widget="choghadiya"

Auto-load

Day and night muhurat periods (8 each) with quality indicators. Current period highlighted. Requires data-location.

API params: coordinates, date, language, locationName

Nakshatra Finder

data-widget="nakshatra"

Interactive

User enters birth date, time, and place. Returns nakshatra, pada, lord, moon sign, and lucky syllables.

API params: datetime, coordinates, language

Kundli Summary

data-widget="kundli"

Interactive

User enters birth details. Returns ascendant, sun sign, moon sign, nakshatra, and current Mahadasha/Antardasha.

API params: datetime, coordinates, language

Numerology Calculator

data-widget="numerology"

Interactive

User enters full name and DOB. Returns Life Path, Expression, and Soul Urge numbers with meanings.

API params: name, date

Compatibility Checker

data-widget="compatibility"

Interactive

Two-person form. Returns Guna Milan score (out of 36), verdict, and top 3 matching aspects.

API params: datetimeA, coordinatesA, datetimeB, coordinatesB

Platform Examples

WordPress

Add a Custom HTML block in the Gutenberg editor and paste the embed code.

Works with any theme. No plugin needed.

React / Next.js

Use a useEffect hook to load the script dynamically, or use next/script.

Shadow DOM prevents style conflicts with CSS-in-JS.

Wix / Squarespace

Use the "Embed" or "Custom Code" element to paste the script tag.

Works in both drag-and-drop builders.

Plain HTML

Just paste the embed code anywhere in your HTML file. No build step required.

The async attribute ensures non-blocking load.

Rate Limits

Tier	Daily Limit	Per Minute	Domains
Free	1,000	30	5
Growth	10,000	100	20
Business	100,000	500	50

Need higher limits? Contact us for Growth or Business plans.