Installing the widget

Once you've copied a snippet from Dashboard → your clock → Embed, this page covers putting it on whatever your website is built with.

If you haven't got a snippet yet, start with Prayer times on your website.

Which snippet to use

The Embed tab gives you three. Almost everyone wants the first.

WordPress

1. 1

   Edit the page or post

   Open the page where you want the times. This works in a page, a post, or a widget area.

2. 2

   Add a Custom HTML block

   Press + to add a block and choose Custom HTML. In the classic editor, switch from Visual to Text first.

3. 3

   Paste and publish

   Paste the Script snippet and press Update. Preview the live page rather than the editor — the editor often doesn't run embedded scripts.

Using a page builder instead? Elementor has an HTML widget, Divi has a Code module, and Beaver Builder has an HTML module. All three take the same snippet.

Squarespace

1. 1

   Add a Code block

   Edit the page, click an insertion point, and choose Code.

2. 2

   Paste the snippet

   Make sure the block's mode is HTML, then paste. Leave Display Source off.

3. 3

   Save

   Code blocks don't run in the editor preview — save and view the live page to see the widget.

Code blocks need a Business plan or above. On a Personal plan, use the public API from a page you control, or link people to your public mosque page instead.

Wix

1. 1

   Add an embed

   Add → Embed Code → Embed HTML.

2. 2

   Paste into the Code box

   Click Enter Code, paste, and press Apply.

3. 3

   Size the box by hand

   Drag the embed box to fit the widget, then publish and check on a phone as well as a desktop.

Webflow

1. 1

   Drop in an Embed element

   Drag Embed from the Add panel to where you want the times.

2. 2

   Paste and save

   Paste the Script snippet into the code editor and press Save & Close.

3. 3

   Publish

   Embeds render on the published site, not in the Designer canvas.

Shopify

1. 1

   Pick where it goes

   For a page: Online Store → Pages, open the page, and switch the content editor to HTML view with the <> button. For a section that appears on every page: Customize → Add section → Custom Liquid.

2. 2

   Paste and save

   Paste the Script snippet and save.

Ghost

Add an HTML card (/html in the editor) and paste the snippet. To put it on every page, use Settings → Code injection instead and place the <div> in your theme where you want it.

Google Sites

Use Insert → Embed → Embed code, paste the Plain iframe snippet, and drag the resulting box to size. Google Sites sandboxes embedded content in its own fixed frame, so the self-resizing script won't be able to adjust it.

Notion, Confluence, and other wikis

Paste the Direct link URL into an /embed block. These tools embed a URL rather than running your HTML, so the widget appears but you size the block yourself.

Plain HTML, or anything else

Paste the Script snippet into your page wherever you want the widget. There is nothing to install, no build step, and no key.

<div data-salahclock="your-slug" data-variant="full"></div>
<script src="https://salahclock.app/embed.js" async></script>

The <script> can go anywhere on the page — it finds every <div> with a data-salahclock attribute, including ones added later. One script tag serves any number of widgets on a page.

If your page renders content after load

React, Vue, and similar frameworks may add the placeholder <div> after the script has already looked for it. The widget watches for new placeholders and mounts them automatically, but if your setup renders somewhere it can't see, call this once your content is on the page:

window.SalahClock.refresh();

Email newsletters

Not supported. Email clients block both scripts and iframes, so no live widget can work there. Link to your public mosque page instead, or generate a monthly table from the public API and paste it in as text.

In a mobile or desktop app

The widget is a web page, so the simplest route is a WebView pointed at the Direct link URL from the Embed tab.

If you're building real native screens, use the public API instead and lay the times out yourself. It needs no key and works from any client — turn on the Public API switch in the Embed tab first, since it starts off:

const res = await fetch("https://salahclock.app/api/v1/clocks/your-slug");
const { mosque, today, next } = await res.json();

console.log(`Next: ${next.name} at ${next.adhan_local}`);
for (const p of today.prayers) {
  console.log(p.name, p.adhan_local, "→", p.iqamah_local);
}

Every prayer comes with both an exact UTC instant and an HH:MM string already in the mosque's timezone, so you can schedule a notification off the first and print the second without doing any timezone maths yourself.

Checking it worked

Open the live page — not the editor preview — and confirm:

• The times match your display. If they don't, you may have pasted a snippet for a different clock.
• The box is the right height, with no inner scrollbar and no empty gap.
• It still looks right on a phone. Every layout reflows; the strip wraps onto extra rows rather than shrinking the text.

If something's wrong

Nothing appears at all. Your platform almost certainly stripped the <script>. Use the Plain iframe snippet.

A message saying embedding is turned off. The Embedding & API switch is off for that clock. Turn it back on in the Embed tab; allow about a minute.

A message saying there's no clock with that slug. The snippet points at a slug that no longer exists — renaming a clock can change its slug. Recopy the snippet from the Embed tab.

The box is too tall or too short. The self-sizing behaviour needs the Script snippet and a platform that lets the widget control its own height. On Wix, Google Sites, or any builder with a drag-to-size box, set the height yourself.

It shows yesterday's times. The widget refreshes itself every few minutes; reload the page. If it persists, check the clock's own display shows what you expect — the widget only ever mirrors it.