WideQuran Embed
Zero Dependencies · ~5KB · Shadow DOM

Embed Quran on
Any Website

Add WideQuran verse cards, chapter summaries, daily verses, and search to any website with a single line of HTML. No build tools. No dependencies.

Get Started GitHub →
<!-- Add this one script to your site -->
<script src="https://cdn.jsdelivr.net/npm/widequran-embed@1/dist/embed.min.js"></script>

Live demo

6 Widget Types

Drop any of these into your HTML. Customize with data-* attributes.

Verse Card

Show any specific verse with translation badge and copy button.

<div data-widequran="verse"
     data-ref="2:255"
     data-theme="light"></div>

Verse of the Day

Auto-refreshes daily. Cached in localStorage for performance.

<div data-widequran="votd"
     data-theme="dark"></div>

Chapter Card

Chapter summary with verse count and link to full text.

<div data-widequran="chapter"
     data-ref="2"
     data-theme="sepia"></div>

Comparison Card

Side-by-side verse comparison with link to compare page.

<div data-widequran="compare"
     data-a="2:255"
     data-b="3:185"></div>

Search Box

Redirects to WideQuran search. Great for sidebars.

<div data-widequran="search"
     data-placeholder="Search Quran…"></div>

Compact Verse of the Day

Smaller layout for sidebars, footers, or tight spaces.

<div data-widequran="votd"
     data-size="compact"
     data-theme="sepia"></div>

Code Playground

Edit the HTML and see the widget live.

Preview uses live data from WideQuran API

3 Built-in Themes

Choose the theme that fits your site. Set once with data-theme.

Light data-theme="light"
Dark data-theme="dark"
Sepia data-theme="sepia"

Installation

Three ways to embed — choose what fits your stack.

⚡

jsDelivr CDN

Recommended

Global CDN, auto-updates when new versions publish to npm. Fastest option.

<script src="https://cdn.jsdelivr.net/npm/
widequran-embed@1/dist/embed.min.js"></script>
☁️

R2 CDN

Hosted directly by WideQuran. Served from Cloudflare R2 with immutable caching.

<script src="https://cdn.widequran.com
/embed.min.js"></script>
📦

npm Package

Use with Webpack, Vite, Rollup, or any bundler. ESM and UMD formats included.

npm install widequran-embed

// In your JS/TS file:
import 'widequran-embed';

API Reference

All data-* attributes supported by WideQuran embed widgets.

Attribute Values Default Description
data-widequran verse, chapter, person, compare, votd, search required Widget type to render
data-ref "2:255" required for verse/chapter Quran reference (book chapter:verse)
data-slug "moses", "paul" required for person Person slug (person widget only)
data-a, data-b verse refs required for compare Two verse refs for comparison
data-theme light, dark, sepia light Visual theme
data-size default, compact default Widget size variant
data-translation sahih, etc. sahih Translation code
data-show-original true, false false Show original language text below verse
data-placeholder any string "Search Quran…" Search box placeholder text
data-lang en, ko, ja, es, … en UI language for widget labels