WideSutra Embed
Zero Dependencies · ~5KB · Shadow DOM

Embed Sutra on
Any Website

Add WideSutra 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/widesutra-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-widesutra="verse"
     data-ref="1:1"
     data-theme="light"></div>

Verse of the Day

Auto-refreshes daily. Cached in localStorage for performance.

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

Chapter Card

Chapter summary with verse count and link to full text.

<div data-widesutra="chapter"
     data-ref="1"
     data-theme="sepia"></div>

Comparison Card

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

<div data-widesutra="compare"
     data-a="1:1"
     data-b="1:2"></div>

Search Box

Redirects to WideSutra search. Great for sidebars.

<div data-widesutra="search"
     data-placeholder="Search Sutra…"></div>

Compact Verse of the Day

Smaller layout for sidebars, footers, or tight spaces.

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

Code Playground

Edit the HTML and see the widget live.

Preview uses live data from WideSutra 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/
widesutra-embed@1/dist/embed.min.js"></script>
☁️

R2 CDN

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

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

npm Package

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

npm install widesutra-embed

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

API Reference

All data-* attributes supported by WideSutra embed widgets.

Attribute Values Default Description
data-widesutra verse, chapter, person, compare, votd, search required Widget type to render
data-ref "1:1" required for verse/chapter Sutra 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 conze, etc. conze Translation code
data-show-original true, false false Show original language text below verse
data-placeholder any string "Search Sutra…" Search box placeholder text
data-lang en, ko, ja, es, … en UI language for widget labels