Add a Quran Verse of the Day to Any Website

This post shows you how to build a Quran verse of the day widget using the UmmahAPI. You get Arabic text, an English translation, and the surah reference, all in a single self-contained script that drops into any webpage.

What the widget does

The widget fetches a verse from the UmmahAPI Quran endpoint, shows the Arabic text, the English translation, and the surah name with ayah number. It picks a new verse every day, and every visitor on the same day sees the same verse. No server needed. No build step. Just a <div> and a <script> tag.

Here is what the final output looks like in plain HTML before you add any styling:

<!-- The widget renders this structure -->
<div class="vtd-widget">
  <div class="vtd-arabic">...Arabic text...</div>
  <div class="vtd-translation">...English...</div>
  <div class="vtd-ref">Surah Al-Baqarah, 2:255</div>
</div>

The API endpoint you need

UmmahAPI has a /api/quran/random endpoint that returns a random ayah. The response includes Arabic text, an English translation, and metadata like surah name and ayah number.

Try it in your browser or with curl:

# Get a random ayah with English translation
curl https://ummahapi.com/api/quran/random?translations=en

# Use Uthmani script for cleaner Arabic rendering
curl https://ummahapi.com/api/quran/random?translations=en&script=uthmani

A response looks like this:

{
  "surah_number": 36,
  "ayah_number": 82,
  "surah_name": "Ya-Sin",
  "arabic": "إِنَّمَا أَمْرُهُۥٓ إِذَآ أَرَادَ شَيْـًٔا أَن يَقُولَ لَهُۥ كُن فَيَكُونُ",
  "translations": {
    "en": "His command is only when He intends a thing that He says to it, 'Be,' and it is."
  }
}

You can read the full response shape in the API docs.

Picking the same verse every day

The /api/quran/random endpoint returns a different verse on every request. For a "verse of the day" you want all visitors on the same date to see the same verse. The trick is to use the date as a seed to pick a fixed ayah number, then fetch that specific ayah instead.

There are 6,236 ayahs in the Quran. You can turn today's date into a number between 1 and 6,236, then use the /api/quran/surah/:s/ayah/:a endpoint. But mapping a linear index to surah and ayah numbers takes a lookup table. The simpler approach is to use the date seed with the random endpoint on the server side. For a pure client-side widget, there is an easier way: use a known mapping of date-to-ayah stored locally.

Below is the cleanest client-side approach. It converts today's date into a day-of-year number (1 to 365), then uses that to pick one of 365 pre-selected ayah references. For this post, we keep it simple and just use the day-of-year modulo the total ayah count to build the surah and ayah lookup dynamically.

function getDailyAyahRef() {
  const now = new Date();
  const start = new Date(now.getFullYear(), 0, 0);
  const diff = now - start;
  const oneDay = 1000 * 60 * 60 * 24;
  const dayOfYear = Math.floor(diff / oneDay); // 1 - 365

  // Surah lengths (114 surahs). We cycle through them.
  // For simplicity, pick surah = (dayOfYear % 114) + 1
  // and ayah = 1. You can make this more varied.
  const surah = (dayOfYear % 114) + 1;
  return { surah, ayah: 1 };
}

The full widget script

Here is the complete, self-contained widget. Paste the <div> where you want the verse to appear, then paste the <script> anywhere on the page. It fetches the verse, builds the HTML, and injects it. No dependencies.

<!-- 1. Place this div where you want the widget -->
<div id="vtd-widget"></div>

<!-- 2. Paste this script anywhere on the page -->
<script>
(async function() {
  // Work out today's day-of-year
  const now = new Date();
  const start = new Date(now.getFullYear(), 0, 0);
  const dayOfYear = Math.floor((now - start) / (1000 * 60 * 60 * 24));

  // Pick a surah (1-114) based on the day
  const surah = (dayOfYear % 114) + 1;
  const ayah = 1;

  const url =
    `https://ummahapi.com/api/quran/surah/${surah}/ayah/${ayah}?translations=en&script=uthmani`;

  const container = document.getElementById('vtd-widget');
  if (!container) return;

  container.innerHTML = '<p style="opacity:.5">Loading verse...</p>';

  const res = await fetch(url);
  if (!res.ok) {
    container.innerHTML = '<p>Could not load verse.</p>';
    return;
  }

  const data = await res.json();
  const arabic = data.arabic || '';
  const translation = (data.translations && data.translations.en) || '';
  const ref = `Surah ${data.surah_name} (${data.surah_number}:${data.ayah_number})`;

  container.innerHTML = `
    <div class="vtd-arabic">${arabic}</div>
    <div class="vtd-translation">"${translation}"</div>
    <div class="vtd-ref">${ref}</div>
  `;
})();
</script>

Styling the widget

The widget uses three CSS classes: .vtd-arabic, .vtd-translation, and .vtd-ref. Add this CSS to your stylesheet, or drop it in a <style> tag on the page.

#vtd-widget {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background: #f9f6f0;
  border-left: 4px solid #2e7d32;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
}

.vtd-arabic {
  font-family: 'Amiri', serif;
  font-size: 1.6rem;
  line-height: 2;
  text-align: right;
  direction: rtl;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

.vtd-translation {
  font-size: 1.05rem;
  color: #333;
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.vtd-ref {
  font-size: 0.85rem;
  color: #777;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

The Amiri font from Google Fonts renders Arabic beautifully. It is already loaded on UmmahAPI pages, but if you are adding this to another site you may want to add the Google Fonts import for Amiri.

Adding an API key

Without a key, UmmahAPI allows 5,000 requests per 15 minutes per IP. For a small site that is plenty. If you expect high traffic, or you want to make sure your widget never hits a rate limit, register for a free API key. Then add it as a query parameter:

const API_KEY = 'your_key_here';
const url =
  `https://ummahapi.com/api/quran/surah/${surah}/ayah/${ayah}` +
  `?translations=en&script=uthmani&key=${API_KEY}`;

Using the random endpoint instead

If you do not need the same verse for all visitors on the same day, you can use /api/quran/random. This is useful for a "refresh" button that shows a new verse each time someone clicks it.

async function loadRandomVerse() {
  const res = await fetch(
    'https://ummahapi.com/api/quran/random?translations=en&script=uthmani'
  );
  const data = await res.json();

  document.querySelector('.vtd-arabic').textContent = data.arabic;
  document.querySelector('.vtd-translation').textContent =
    `"${data.translations.en}"`;
  document.querySelector('.vtd-ref').textContent =
    `Surah ${data.surah_name} (${data.surah_number}:${data.ayah_number})`;
}

// Wire up a refresh button
document.getElementById('vtd-refresh')
  .addEventListener('click', loadRandomVerse);

Add a button next to the widget container:

<button id="vtd-refresh">New Verse</button>

Using the widget on WordPress, Squarespace, or Webflow

Any platform that lets you add custom HTML can run this widget. Here is how to add it on the most common platforms.

WordPress: Add a Custom HTML block in the block editor. Paste the <div> and <script> together into it. Publish.

Squarespace: Add a Code block in the page editor. Paste the HTML and script. Make sure "Display Source" is off.

Webflow: Add an Embed element to your canvas. Paste the code. The script runs on publish.

For the CSS, each platform has a place for custom CSS. In WordPress it is Appearance > Customize > Additional CSS. In Webflow it is Project Settings > Custom Code > Head Code, wrapped in a <style> tag.

If you would rather skip building the widget yourself, UmmahAPI also has a pre-built embeddable version on the Widgets page.

Showing multiple translations

You can request more than one translation at once. Pass a comma-separated list to the translations query parameter. For example, to get English and Urdu together:

const url =
  `https://ummahapi.com/api/quran/surah/${surah}/ayah/${ayah}` +
  '?translations=en,ur&script=uthmani';

// In the response, data.translations.en and data.translations.ur
// are both populated.
const english = data.translations.en;
const urdu = data.translations.ur;

Supported translation codes include en, ur, and fr. Check the API docs for the full list. You can render both translations in the widget by adding a second line in the injected HTML.

FAQ

Does the Quran verse of the day widget require a backend?

No. The widget is pure JavaScript and calls the UmmahAPI directly from the browser. You only need to add a script tag to your HTML page. There is no server-side code involved.

How does the widget show a new verse each day without a server?

The widget uses the current date to calculate a day-of-year number, then uses that number to pick a specific surah and ayah. Every visitor who loads the page on the same day runs the same calculation and gets the same verse. The verse changes automatically when the date changes.

Is the UmmahAPI Quran endpoint free to use?

Yes. You can make up to 5,000 requests every 15 minutes without an API key. For most websites that is more than enough. If you need more, register for a free key at UmmahAPI to remove the limit.

Can I show the Arabic text alongside the English translation?

Yes. The endpoint returns Arabic text by default. Add ?script=uthmani to get the Uthmani script, which is the standard print version used in most Quran publications. You can display it next to any translation by rendering both fields from the response.