JavaScript / IFrame Embed — Aijatak Developer Docs

🧩 JavaScript / IFrame Embed

Drop-in JavaScript embed for any website. Auto-discovers widgets, programmatic API, postMessage auto-resize. No WordPress required.

Any Website No Dependencies 2KB Script Free

Quick Start

Add this to any HTML page — that's it:

<div class="aijatak-widget" data-widget="panchang" data-lang="hi"></div>
<script src="https://www.aijatak.com/static/embed.js" async></script>

The script auto-discovers .aijatak-widget elements and renders responsive iframes.

Auto-Discovery Mode

Add class="aijatak-widget" to any <div> and configure with data-* attributes:

<!-- Today's Panchang in Hindi -->
<div class="aijatak-widget" data-widget="panchang" data-lang="hi"></div>

<!-- Daily Horoscope (dark theme) -->
<div class="aijatak-widget" data-widget="horoscope" data-theme="dark"></div>

<!-- Rahu Kaal for Mumbai -->
<div class="aijatak-widget" data-widget="rahukaal" data-city="Mumbai"></div>

<!-- Numerology Calculator -->
<div class="aijatak-widget" data-widget="numerology"></div>

<!-- Baby Names in Kannada -->
<div class="aijatak-widget" data-widget="babynames" data-lang="kn"></div>

<!-- Birth Chart Calculator -->
<div class="aijatak-widget" data-widget="chart"></div>

<!-- Load SDK once at bottom -->
<script src="https://www.aijatak.com/static/embed.js" async></script>

Programmatic API

For more control, use Aijatak.embed():

<div id="my-panchang"></div>
<div id="my-horoscope"></div>

<script src="https://www.aijatak.com/static/embed.js"></script>
<script>
  // Embed panchang in Tamil (dark theme)
  Aijatak.embed('#my-panchang', {
    widget: 'panchang',
    lang: 'ta',
    theme: 'dark',
    city: 'Chennai'
  });

  // Embed Aries horoscope in Hindi
  Aijatak.embed('#my-horoscope', {
    widget: 'horoscope',
    sign: 'aries',
    lang: 'hi'
  });
</script>

`Aijatak.embed(selector, options)`

Parameter	Type	Description
`selector`	`string` \| `HTMLElement`	CSS selector or DOM element
`options.widget`	`string`	Widget type
`options.lang`	`string`	Language code
`options.theme`	`string`	`light` or `dark`
`options.city`	`string`	Pre-fill city (Panchang/Rahu Kaal)
`options.sign`	`string`	Zodiac sign (Horoscope)
`options.ref`	`string`	Referral tracking ID
`options.width`	`string`	CSS width (default: `100%`)
`options.height`	`number`	Height in pixels

`Aijatak.refresh()`

Re-runs auto-discovery. Call after dynamically adding .aijatak-widget elements (e.g., in a SPA):

var div = document.createElement('div');
div.className = 'aijatak-widget';
div.setAttribute('data-widget', 'numerology');
document.body.appendChild(div);

Aijatak.refresh();

`Aijatak.buildUrl(options)`

Returns the embed URL without creating an iframe:

var url = Aijatak.buildUrl({widget: 'panchang', lang: 'hi', theme: 'dark'});
// → "https://www.aijatak.com/embed/panchang?lang=hi&theme=dark"

Data Attributes

Attribute	Values	Default
`data-widget`	`chart`, `panchang`, `horoscope`, `rahukaal`, `numerology`, `babynames`	`chart`
`data-lang`	28 language codes	`en`
`data-theme`	`light`, `dark`	`light`
`data-city`	City name	(none)
`data-sign`	Zodiac sign slug	(none)
`data-ref`	Referral tracking ID	(none)
`data-width`	CSS width value	`100%`
`data-height`	Height in pixels (number)	Per-widget default

Default Heights

Widget	Default Height
`chart`	700px
`panchang`	600px
`horoscope`	500px
`rahukaal`	450px
`numerology`	550px
`babynames`	500px

Auto-Resize

Embedded iframes automatically report their content height to the parent page via postMessage. The SDK handles this — no configuration needed.

postMessage Protocol

Embed pages send this message on load, DOM mutations, and window resize:

// Sent by embed → received by parent
{
  type: 'aijatak-resize',
  height: 842  // content height in pixels
}

Custom listener (if not using SDK)

window.addEventListener('message', function(e) {
  if (e.data && e.data.type === 'aijatak-resize') {
    var iframe = document.querySelector('iframe');
    if (iframe && iframe.contentWindow === e.source) {
      iframe.style.height = e.data.height + 'px';
    }
  }
});

Raw IFrame (No SDK)

If you prefer not to use the SDK, embed directly with an <iframe>:

<iframe
  src="https://www.aijatak.com/embed/panchang?lang=hi&theme=dark&city=Mumbai"
  width="100%"
  height="600"
  frameborder="0"
  style="border:none;border-radius:12px"
  loading="lazy"
></iframe>

You can add the postMessage listener above for auto-resize.

Embed API Endpoints

Lightweight HTML pages served by aijatak.com for iframe embedding:

Endpoint	Widget
`GET /embed/chart`	Birth Chart Calculator
`GET /embed/panchang`	Today's Panchang
`GET /embed/horoscope`	Daily Horoscope
`GET /embed/rahukaal`	Rahu Kaal Calculator
`GET /embed/numerology`	Numerology Calculator
`GET /embed/babynames`	Baby Names by Nakshatra

Query Parameters (all endpoints)

Parameter	Type	Default	Description
`lang`	string	`en`	Language code
`theme`	string	`light`	`light` or `dark`
`city`	string	—	Pre-fill city (panchang, rahukaal)
`sign`	string	—	Pre-select zodiac sign (horoscope)
`ref`	string	—	Referral tracking ID

Example URLs

https://www.aijatak.com/embed/panchang?lang=hi&theme=dark&city=Mumbai
https://www.aijatak.com/embed/horoscope?sign=aries&lang=ta
https://www.aijatak.com/embed/numerology?theme=dark
https://www.aijatak.com/embed/babynames?lang=kn
https://www.aijatak.com/embed/rahukaal?city=Bangalore
https://www.aijatak.com/embed/chart?lang=fr&theme=dark

Response

Status: 200 OK
Content-Type: text/html; charset=utf-8
X-Frame-Options: ALLOWALL
CSP: frame-ancestors *
No topbar, no navigation, no footer — just the widget + "Powered by Aijatak" link
Self-contained CSS (no external frameworks)
<meta name="robots" content="noindex"> prevents search engine indexing

Rate Limits

API Endpoint	Rate Limit
All `/api/*` endpoints	30 requests/min per IP

CSP & Security

If your site has a strict Content Security Policy, add these directives:

frame-src https://www.aijatak.com;
script-src https://www.aijatak.com;

Embed pages set X-Frame-Options: ALLOWALL and frame-ancestors *
No cookies set by embed pages
No user data collected — all computation is stateless
All inputs are client-side only (city search uses Nominatim, API calls go to /api/*)

Full Page Example

<!DOCTYPE html>
<html>
<head>
  <title>My Astrology Page</title>
</head>
<body>
  <h1>Today's Panchang</h1>
  <div class="aijatak-widget"
       data-widget="panchang"
       data-lang="hi"
       data-theme="dark"
       data-city="Mumbai">
  </div>

  <h1>Daily Horoscope</h1>
  <div class="aijatak-widget"
       data-widget="horoscope"
       data-lang="hi">
  </div>

  <script src="https://www.aijatak.com/static/embed.js" async></script>
</body>
</html>