How to use

Add the script once anywhere on your page (usually before </body>):

<script src="https://www.ummahapi.com/widget.js"></script>

Then drop a widget tag wherever you want it:

<div data-ummahapi="prayer-times" data-lat="40.71" data-lng="-74.00"></div>

Two ways to embed

Option 1: Script tag (recommended for most sites — lightweight, integrates with your design)

<script src="https://www.ummahapi.com/widget.js"></script>
<div data-ummahapi="prayer-times" data-lat="40.71" data-lng="-74"></div>

Option 2: iframe (sandboxed — better for security-sensitive sites or when you can't run scripts)

<iframe
  src="https://www.ummahapi.com/embed/prayer-times?lat=40.71&lng=-74&theme=dark"
  width="360" height="500" frameborder="0" scrolling="no">
</iframe>

Customize what shows (Prayer Times)

Use data-show to pick exactly which prayers appear:

<!-- Just the 5 obligatory prayers -->
<div data-ummahapi="prayer-times" data-show="fajr,dhuhr,asr,maghrib,isha"></div>

<!-- Just Maghrib (for Iftar countdown sites) -->
<div data-ummahapi="prayer-times" data-show="maghrib"></div>

<!-- All including Imsak and Sunrise (default) -->
<div data-ummahapi="prayer-times"></div>

Available widgets

prayer-times — daily prayer schedule with current/next highlight
hijri-date — today's Islamic date
calendar — month view with Gregorian + Hijri dates
islamic-events — upcoming Islamic events
verse-of-day — Quran verse with translation
dua-of-day — random dua from Quran/Sunnah
name-of-allah — one of the 99 Names with meaning
qibla — visual compass pointing to Kaaba
hadith-of-day — random hadith from major collections
ramadan — Ramadan countdown / Iftar timer

Configuration attributes

data-theme="dark" — themes: dark, light, cream
data-lat="40.71" data-lng="-74.00" — coordinates (or auto-detect from browser)
data-method="MuslimWorldLeague" — calculation method (22 available)
data-madhab="Hanafi" — Hanafi or Shafi
data-compact="true" — smaller version (prayer-times)
data-campaign="false" hides the sponsored LaunchGood row (prayer-times)
data-collection="bukhari" — for hadith widget

Custom colours

Start from a theme and override any colour to match your site. Hex, rgb, rgba and named colours all work.

data-accent="#0d8a5a" — main accent
data-gold="#b8902a" — highlight colour, used for the next prayer
data-bg="#ffffff" data-surface="#fafaf7" — backgrounds
data-text="#1a1a1a" data-text2="#5a5a5a" data-text3="#8a8a8a" — text shades
data-border="#e8e8e0" — borders
data-highlight="rgba(184,144,42,0.08)" — active row background

Manual init (for SPAs / dynamic content)

const el = document.querySelector('[data-ummahapi]');
window.UmmahApiWidget.init(el);
window.UmmahApiWidget.refresh(el); // re-render

Powered by these free APIs

Every widget pulls live data from UmmahAPI's free REST endpoints. Developers can use the same APIs directly to build custom features.

Prayer Times APIPowers prayer-times & ramadan widgets Quran APIPowers verse-of-day widget Hadith APIPowers hadith-of-day widget Duas APIPowers dua-of-day widget 99 Names of Allah APIPowers name-of-allah widget Qibla APIPowers qibla compass widget Hijri Calendar APIPowers hijri-date, calendar & events widgets

Beautiful Islamic widgets for any website