Embed the Birth Profile Widget (Free)

Drop a small, self-contained birth-profile lookup onto any web page. A reader picks a date and sees their zodiac sign, birthstone and birth flower. It is free, needs no account, and runs entirely in the visitor's browser.

Live preview

Copy the embed code

Paste this HTML wherever you want the widget to appear.

<iframe
  src="https://birthdex.net/widget.html"
  title="Birth profile widget by Birthdex"
  width="360"
  height="320"
  style="border:0;max-width:100%"
  loading="lazy">
</iframe>

Sizing and styling

The widget is responsive up to its natural width. Adjust the width and height attributes to fit your layout; around 360 by 320 pixels suits most sidebars and in-article spots. The max-width:100% style keeps it from overflowing on mobile.

Four optional query parameters let it match the page around it:

Widget URL parameters.
Parameter	Values	Effect
`theme`	`light`	Switches to the light palette. Dark is the default.
`accent`	a hex color	Replaces the gold accent. Remember to encode the hash as %23.
`month`	1 to 12	Which month the widget opens on.
`day`	1 to 31	Which day the widget opens on.

<iframe
  src="https://birthdex.net/widget.html?theme=light&accent=%23336699&month=10&day=31"
  title="Birth profile widget by Birthdex"
  width="360" height="320"
  style="border:0;max-width:100%" loading="lazy">
</iframe>

Without an iframe

Some content management systems strip iframes. If yours does, fetch the data instead and render it however you like: one request to /api/date/06-29.json gives you the sign, stone, flower, ruling planet and cusp status for a date. See the API docs.

<div id="birth-profile"></div>
<script>
  fetch("https://birthdex.net/api/date/06-29.json")
    .then(function (r) { return r.json(); })
    .then(function (d) {
      document.getElementById("birth-profile").innerHTML =
        d.label + ": " + d.signName + ", birthstone " + d.birthstone +
        ", birth flower " + d.birthFlower +
        ' <a href="https://birthdex.net">Data by Birthdex</a>';
    });
</script>

If a visitor has JavaScript switched off

The widget still renders. It shows a worked example for 29 June, plus a line pointing to Birthdex for any other date, so an embed never leaves a blank box on your page.

Terms of use

The widget is free for personal and commercial sites. It includes a small "Powered by Birthdex" link, which we ask you to keep in place. The data is the same traditional reference used across Birthdex, so it is suitable for lifestyle, wedding, gardening, tattoo and astrology content.

Prefer raw data?

If you would rather build your own interface, use the free JSON API instead. It returns the same birthstone, birth flower and zodiac data as plain static files.

Embed the birth profile widget