Install guide
How to add a prayer times widget to any HTML website
Paste one script tag where you want the widget to appear, ideally just before </body>. No build step and no framework required.
Steps
- Set your location and calculation method in the widget builder and copy the generated embed code.
- Open the HTML file, template, or layout for the page you want the widget on.
- Paste the snippet at the exact spot in the markup where the widget should render.
- Save the file and upload or deploy it. For the fastest page loads, place the tag just before </body>.
Good to know. This is plain HTML and vanilla JavaScript with the async attribute set, so it works the same way inside a static site generator (Jekyll, Hugo, Eleventy), a component framework's layout file (Next.js, Astro, Nuxt), or a hand-written .html file. There is no npm package to install.
This is a generic starting point. Open the widget builder to set your own coordinates, timezone, and calculation method, and to build the Hijri date or Ramadan countdown widget instead.
FAQ
Frequently asked questions
Does this work with static site generators like Hugo or Jekyll?
Yes. Paste the snippet into the template or layout file the same way you would any other HTML; it renders once the generated page loads in the browser.
Can I put it inside a React, Vue, or Svelte component?
Yes, though most frameworks want you to render it once rather than on every re-render. The simplest approach is to place the script tag in the page's static HTML shell (for example Next.js's document/layout file) rather than inside component JSX.
Get adhan reminders on your phone
The Niyat app brings calculated prayer times, adhan notifications, a qibla finder, and the full cited dua library with you.
Keep exploring