Add Marboot to your mosque’s website

For mosque administrators and whoever looks after the website. No coding needed for the first two options.

Everything you publish in Marboot — iqamah times, Jummah, events, announcements — can appear on your mosque’s own website and stay current on its own. Pick the option that fits your site:

1 Website embed — a live card on your page

The embed is a small frame you paste into any page. It shows today’s prayer times with the next prayer highlighted, your Jummah congregations, and optionally your upcoming events and current announcements. It reads Marboot directly, so when an administrator changes a time from their phone the website follows within minutes.

Step 1 — Copy your snippet from the app

In Marboot, open Admin → Settings → Display and find the Website Embed card. Choose what to show — Prayer times, Events, Announcements, or All three stacked — and a theme: Dark, Light, or Auto (follows the visitor’s device). Tap the snippet to select it, or use Share to send it to whoever edits the website.

The snippet looks like this; the long word after /embed/ is your mosque’s ID:

<iframe src="https://marboot.web.app/embed/YOUR_MOSQUE_ID"
        title="Prayer times" width="100%" height="540"
        style="border:0;max-width:420px" loading="lazy"></iframe>

Step 2 — Paste it into your website

Every website builder has a block for custom HTML. Add one where you want the card, paste the snippet, and publish.

Step 3 — Switch on events and announcements (optional)

Prayer times are public by nature and always show. Events and announcements appear on websites only after an administrator switches them on, in the same Website Embed card, under Show on websites. Until then a frame set to show them says so quietly, so you can place the frame first and switch the sections on later.

See it live

The three sections for a mosque that uses Marboot today, in the light theme:

Options

The app writes these into the snippet for you; they are listed here for anyone who wants to adjust the address by hand. Add them after the mosque ID with ?, and join several with &.

Example — everything, light, in a maroon accent:

https://marboot.web.app/embed/YOUR_MOSQUE_ID?layout=board&theme=light&accent=7A1F2B

Sizing

The snippet’s height is a sensible start for each section: 540 for prayer times, 620 for events, 240 for announcements, 1400 for the full board. The card scrolls inside the frame if the content runs longer. Sites that would rather have the frame grow to fit can listen for the height the embed reports — paste this once, anywhere on the page:

<script>
addEventListener('message', (e) => {
  if (e.origin !== 'https://marboot.web.app' || !e.data || e.data.source !== 'marboot-embed') return;
  document.querySelectorAll('iframe[src^="https://marboot.web.app/embed/"]').forEach((f) => {
    if (f.contentWindow === e.source) f.style.height = e.data.height + 'px';
  });
});
</script>

2 A “Prayer times” link

The simplest option: link to your mosque’s wall-display page. On a laptop or TV it opens as the full board — today’s prayers, Jummah, events, announcements; on a phone the same page lays out as a scrolling column. Nothing to install, nothing to sign in to.

marboot.web.app/tv/CODE

The code is short enough to read out or type on a TV remote, and you can work it out yourself: the initials of the mosque’s name followed by its five-digit ZIP. Small words — of, the, and, at, in, for, a, an, on — are skipped, and a one-word name is used whole.

Capitals, hyphens and dots don’t matter (ICM-45040 works). The long form with the full mosque ID keeps working too, and administrators see both under Admin → Settings → Display. Add the link as a menu item or a button on your site, print it as a QR code on flyers and notice boards, or send it in your newsletter. The look — light or dark, Modern or Classic, ticker on or off — follows what you set in the app.

3 For developers — the JSON feed

If your website has its own design and someone who can code, the read-only feed behind the embed and the phone widgets is open to you. No key is needed.

GET https://marboot.web.app/api/widget/mosques/YOUR_MOSQUE_ID
GET https://marboot.web.app/api/widget/mosques/YOUR_MOSQUE_ID/board

• The first returns the mosque (name, logo, timezone), today’s date, and days: fourteen days from the start of this week, each with adhan and iqamah times per prayer, the Hijri date, and a changed list naming the prayers whose iqamah differs from the day before. Times are local to the mosque, as HH:MM.
• /board returns the upcoming events and current announcements — only the sections the administrator has switched on for websites (see step 3 above); switched-off sections come back empty.
• Responses are cached at the edge: prayer times for about fifteen minutes, the board for about two. Please read them as needed on page load rather than polling.
• The shape is versioned (version: 1) and additive: new fields may appear, existing ones won’t change meaning without a new version. If you build on it, tell us so we can warn you ahead of changes.

Good to know

• How current is it? Prayer times on a website update within about fifteen minutes of a change in the app; events and announcements within about two. The wall-display page and the app update live.
• Where is my mosque ID? It is the long word after /embed/ in the snippet the app hands you, under Admin → Settings → Display. The wall-display link uses the short code instead; both name the same mosque.
• Visitors’ privacy. The embed sets no cookies and tracks no one; it loads prayer times and nothing else. Your site’s own privacy policy needs no addition for it.
• Does it work on a phone? Yes — the embed fits the width it is given, and the wall-display link lays out for phones.
• Can I change the wording or fonts? The embed keeps Marboot’s layout so it stays readable everywhere; colour comes from theme and accent. For a fully custom look, use the feed.
• Something not showing? Check the section is switched on under Show on websites, then write to us with your mosque’s name and the page address.