Display the Quranpedia content linked to an ayah inside your site — tafsir, word meanings, reflective notes, i'rab, qira'at, and more — without copying the data or managing it yourself.
The easiest way: add a div tag, then include the embed.js script; it creates the iframe and adjusts its height automatically whenever the content changes.
<div data-quranpedia-embed data-surah="2" data-ayah="255"></div> <script src="https://quranpedia.net/embed.js" defer></script>
To open a specific section directly (reflective notes, for example) with the dark theme:
<div data-quranpedia-embed data-surah="2" data-ayah="255"
data-type="notes" data-theme="dark"></div>
<script src="https://quranpedia.net/embed.js" defer></script>
Link a word in your article to a specific ayah; when the reader clicks the link, an in-page dialog opens showing the ayah's content, so the reader never leaves your article. One script covers both modes: the same embed.js handles embedded iframes and dynamic links — include it once.
<a href="https://quranpedia.net/embed?surah=2&ayah=255" data-quranpedia-link data-surah="2" data-ayah="255" target="_blank" rel="noopener">آية الكرسي</a> <script src="https://quranpedia.net/embed.js" defer></script>
Make the element an a tag with an href pointing to the embed page as in the example; if the reader's JavaScript is disabled, the link opens the page in a separate tab. If JavaScript is enabled, the script prevents navigation and opens the dialog instead.
The link accepts all the parameters listed in the table below in the same format, so the dialog opens on a specific section with the look you choose:
<a href="https://quranpedia.net/embed?surah=2&ayah=255&type=notes&theme=dark" data-quranpedia-link data-surah="2" data-ayah="255" data-type="notes" data-theme="dark">وقفات تدبرية</a>
Esc key, a click outside it, or the "×" close button; focus then returns to the link itself.data-quranpedia-link can also go on a span or button tag, but an a tag is preferred for the fallback when JavaScript is disabled.Try it yourself — click either link:
Allah revealed in Ayat al-Kursi the greatest ayah in the Book of Allah, and mushafs open with the Basmala in dark mode.
If you prefer full control, embed the URL directly; note that the iframe height will not adjust automatically unless you listen yourself for the postMessage events coming from the page.
<iframe src="https://quranpedia.net/embed?surah=2&ayah=255&type=tafsir"
width="100%" height="600" style="border:0;border-radius:12px"
loading="lazy"></iframe>surah requiredayah required1-7 (max 20 ayahs).type optionaltafsir, meanings, notes, e3rab, qiraat, similar, topics, fatwa, asbab, nasekh, translations, attachments. If omitted, the grid of sections available for the ayah is shown.theme optionallight (default), dark for dark mode, or sepia for a warm paper look.primary optionalprimary=7c3aed; the full shade palette is derived from it to match your brand.bg optionalbg=transparent for a transparent background that blends with your page.size optionalsize=115.radius optionalnone to disable it, or sm for a subtler radius; the default is rounded corners.options optionaloptions=tafsir,meanings.lock optionallock=1 with type pins the embed to the chosen section and hides the back-to-grid button.book optionalbooks optionalbooks=1949,2005.image optionalimage=1 with a selected book shows the scanned page images of the book inside the frame.category optionaltype=notes) to a specific category.lang optionaltranslations section.ayah_text optionalayah_text=0 hides the verse-text card at the top of the embed and on all inner pages; the default shows it.tab optionalword (default), compare, or learn; for similarities: similar, beginning, ending, identical, phrases, scholarly.Note: the grid shows only the sections available for the requested ayah, and every section works inside the same frame. Try the embed code builder to generate the URL interactively.
Ayat al-Kursi (Surah al-Baqarah, ayah 255) — the sections grid:
Content-Security-Policy: frame-ancestors *).postMessage with a message of this form:
{ "source": "quranpedia-embed", "type": "resize", "height": 1234 }