How to Add Prayer Times to Your Website in 5 Minutes

If your site needs to show prayer times, you do not need a backend, a plugin, or a developer. Two lines of HTML and the visitor sees today's Fajr, Dhuhr, Asr, Maghrib, and Isha. Here is the simplest way to do it.

The 5 minute version

Paste these two lines anywhere in your HTML.

<!-- 1. Add the script (once per page) -->
<script src="https://ummahapi.com/widget.js"></script>

<!-- 2. Drop the widget where you want it -->
<div data-ummahapi="prayer-times"></div>

That is it. The widget asks the browser for the visitor's location, fetches today's prayer times, and renders them. No build step, no key, no backend.

Set a fixed location

Most websites want a fixed city, not the visitor's location. Pass coordinates with data-lat and data-lng.

<div data-ummahapi="prayer-times"
     data-lat="40.7128"
     data-lng="-74.0060"></div>

Find your coordinates on Google Maps: right click your city and copy the lat / lng pair.

Pick a calculation method

There are 22 prayer time calculation methods. Most apps default to the Muslim World League. To match your local mosque, pass the method explicitly.

<div data-ummahapi="prayer-times"
     data-lat="40.7128" data-lng="-74.006"
     data-method="NorthAmerica"
     data-madhab="Hanafi"></div>

Common methods: NorthAmerica (ISNA), MuslimWorldLeague, Egyptian, Karachi, UmmAlQura, MoonsightingCommittee. Madhab is either Hanafi or Shafi.

Match your site theme

Three themes ship with the widget.

<div data-ummahapi="prayer-times" data-theme="dark"></div>
<div data-ummahapi="prayer-times" data-theme="light"></div>
<div data-ummahapi="prayer-times" data-theme="cream"></div>

Show only the prayers you want

For an Iftar countdown site, you may only want Maghrib. Use data-show.

<div data-ummahapi="prayer-times"
     data-show="maghrib,isha"></div>

WordPress, Wix, Squarespace

Same code, different paste location.

• WordPress: add a Custom HTML block (Gutenberg) and paste both lines.
• Wix: use the Embed HTML element and paste the code.
• Squarespace: add a Code block and paste the code.
• Plain HTML: paste anywhere inside the body tag.

If you want to call the API directly

Skip the widget and hit the JSON endpoint.

const r = await fetch(
  'https://ummahapi.com/api/prayer-times?lat=40.71&lng=-74.00'
);
const { times } = await r.json();
console.log(times.fajr, times.dhuhr, times.asr, times.maghrib, times.isha);

FAQ

Is the prayer times widget really free?

Yes. UmmahAPI is free forever, no signup needed.

Does it slow down my page?

The script is small (around 18 KB gzipped) and loads asynchronously. It does not block page render.

Will the times be correct for my city?

Yes if you set the right calculation method. Check what your local mosque uses and pass the matching data-method.

Can I use it on a commercial website?

Yes. No license fee, no signup, no attribution required.