Put prayer times on your website
Your clock's times can live on your own website as well as on the TV in the hallway — the same times, updating themselves, with nothing to maintain. Change an iqamah offset in SalahClock and the website follows within minutes.
It's free on every plan.
Get your snippet
- 1
Open the Embed tab
Go to Dashboard → your clock → Embed.
- 2
Pick a layout
Four to choose from — the table below says what each is for. The preview beside the controls is the real widget, so what you see is what your visitors get.
- 3
Set your colours
Match your site: accent colour, background, text, corner radius, and whether the widget follows the visitor's light or dark mode.
- 4
Copy and paste
Copy the snippet and paste it into your website wherever you want the times to appear. That's the whole job — there's nothing to install and no key to manage.
Tip
You can paste the same snippet in more than one place, and use different layouts on different pages — a full card on your Prayer Times page, a slim strip under the header everywhere else.
Choosing a layout
| Layout | What it shows | Good for |
|---|---|---|
| Full card | Mosque name, next prayer with a live countdown, and the whole day's table | A homepage, or a dedicated Prayer Times page |
| Times table | The six rows only — Adhan and Iqamah, no heading | A page that already has its own "Prayer Times" heading |
| Next prayer | One prayer and its countdown | A sidebar, a footer column, anywhere narrow |
| Strip | All six prayers in a single horizontal row | Full-width, directly under your site header |
Every layout is responsive: it fills the width you give it and sets its own height. On a phone the strip wraps onto two rows rather than shrinking the text.
Putting it on your site
The snippet is ordinary HTML, so it works anywhere you can add HTML — WordPress, Squarespace, Wix, Webflow, Shopify, Ghost, Google Sites, or a hand-written page.
Installing the widget has step-by-step instructions for each of those, plus what to do when a platform strips scripts or puts your embed in a fixed-size box, and how to use the times in a mobile app.
Keeping it in step with your clock
The widget reads from your clock, so everything you change in SalahClock shows up on your website automatically:
- Iqamah offsets and manual time overrides
- Calculation method and madhab
- Prayer name labels and your chosen language
- Your announcement, on the Full card layout
- Whether Jumu'ah replaces Dhuhr on Fridays
If your clock follows another mosque's clock through Clock sync, the widget shows the synced times too.
There is nothing to re-copy when you change a setting. The only reason to come back to the Embed tab is to change how the widget looks.
Turning it off
The Embed tab has two switches, and they're independent.
Show on my website controls the widget. It starts on. Turn it off and any widget already on a page shows a short notice instead of times. Allow about a minute for it to take effect everywhere — responses are briefly cached, so a page someone loaded moments ago may still show times.
Public API controls whether this clock's times are readable as JSON by anyone. It starts off. You only need it if you're building something yourself; the widget works without it. See the public API reference.
Note
A display passcode protects your /display URL. It does not cover the widget or
the API, which publish times openly by design — that's the point of putting them
on your website. If you don't want the times public, turn this switch off.
The "Powered by SalahClock" line
On the Free plan the widget carries a small credit link at the bottom. Any paid plan removes it — the same setting that removes it from your TV display. See Plans and billing.
Options reference
Every control in the dashboard maps to one attribute in the snippet, so you can also edit the snippet by hand.
| Attribute | Values | Default |
|---|---|---|
data-salahclock | your clock's slug | — (required) |
data-variant | full, table, compact, bar | full |
data-size | sm, md, lg | md |
data-theme | light, dark, auto | auto |
data-font | sans, serif | sans |
data-accent | a hex colour, e.g. #0f2a22 | #0f2a22 |
data-bg | a hex colour, or transparent | follows the theme |
data-fg | a hex colour | follows the theme |
data-radius | 0–32 | 12 |
data-header | 1 / 0 | 1 |
data-iqamah | 1 / 0 | 1 |
data-countdown | 1 / 0 | 1 |
data-hijri | 1 / 0 | 1 |
data-date | 1 / 0 | 1 |
Colours must be hex (#0f2a22 or #abc) or the word transparent. Colour
names like green are ignored and the default is used instead.
Want the raw data instead?
If you'd rather build your own design, or need the times inside an app, use the public API. Same data, as JSON, no key needed.
Something not working? See If something's wrong.