WideBible Embed
Zero Dependencies · ~5KB · Shadow DOM

Embed Bible on
Any Website

Add WideBible 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/widebible-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-widebible="verse"
     data-ref="John 3:16"
     data-theme="light"></div>

Verse of the Day

Auto-refreshes daily. Cached in localStorage for performance.

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

Chapter Card

Chapter summary with verse count and link to full text.

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

Comparison Card

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

<div data-widebible="compare"
     data-a="John 3:16"
     data-b="Romans 8:28"></div>

Search Box

Redirects to WideBible search. Great for sidebars.

<div data-widebible="search"
     data-placeholder="Search Bible…"></div>

Compact Verse of the Day

Smaller layout for sidebars, footers, or tight spaces.

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

Code Playground

Edit the HTML and see the widget live.

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

R2 CDN

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

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

npm Package

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

npm install widebible-embed

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

API Reference

All data-* attributes supported by WideBible embed widgets.

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