Verse Preview Embed

PrimeBible Verse Preview v2.5.3

Auto-detect Bible references and show beautiful, mobile-friendly tooltip previews. Available as a WordPress plugin or standalone JavaScript for any website.

Ready to Get Started?

Choose the option that works best for your website.

Download WordPress Plugin Get JavaScript File

WordPress Plugin: Full admin interface with settings page.
JavaScript File: Direct embed for any website (2.5.3 - 98KB minified).

Key Features

Auto-Detection

Automatically detects and converts Bible references like "John 3:16" into interactive tooltips—no manual work required.

Mobile Optimized

Touch-friendly long-press interactions, responsive sizing, and safe-area detection for iOS and Android.

Highly Configurable

Control translations, themes, timing, caching, performance limits, and much more from the WordPress admin.

Performance First

Built-in caching, lazy loading, request throttling, and efficient DOM scanning to keep your site fast.

Installation Options

WordPress Plugin

1. Download the plugin ZIP file
2. Go to WordPress Admin → Plugins → Add New
3. Click "Upload Plugin" → Choose File
4. Select primebible-verse-preview.zip
5. Click "Install Now" → "Activate Plugin"

Direct JavaScript Embed

For any website (not just WordPress):

<!-- Add BEFORE closing </body> tag -->
<script>
  window.PrimeBibleConfig = {
    translation: 'KJV',
    theme: 'system',
    showFooter: true
  };
</script>
<script src="https://primebible.com/embed/primebible-versePreview.js" defer></script>

WordPress Plugin Requirements: WordPress 5.8+, PHP 7.4+. Works out-of-the-box with default settings.
JavaScript Embed: Works on any website with modern browsers. No dependencies required.

How to Use

It Just Works™

Once activated, the plugin automatically scans your posts and pages for Bible references and makes them interactive. No shortcodes, no special formatting—just write naturally!

Example Usage

Just write naturally in your posts:

"As it says in John 3:16, God so loved the world..."
"Read Romans 8:28-30 for encouragement."
"The Genesis 1:1-5 account is profound."

The plugin automatically detects these references
and makes them interactive!

Hover

Desktop users

Long Press

Mobile users

Tooltip

Instant preview

Configuration

WordPress Plugin: Navigate to Settings → PrimeBible in your WordPress admin.
JavaScript Embed: Set window.PrimeBibleConfig before loading the script.

Complete Configuration Object

All available options (JavaScript embed):

window.PrimeBibleConfig = {
  // API & Content
  apiUrl: 'https://primebible.com/api/verse-preview',
  translation: 'KJV',
  
  // Display
  theme: 'system',        // 'system', 'light', or 'dark'
  position: 'auto',       // 'auto', 'top', or 'bottom'
  maxWidth: 420,
  mobileMaxWidth: 340,
  showReference: true,
  showFooter: true,
  enableAnimations: true,
  mobileOptimized: true,
  
  // Interaction Timing
  hoverDelayMs: 200,
  longPressMs: 400,
  hideDelayMs: 150,
  
  // Performance
  prefetch: true,
  lazyScan: true,
  maxCacheSize: 100,
  cacheExpiry: 3600000,
  maxConcurrentFetches: 4,
  maxMatchesPerNode: 50,
  maxNodeTextLength: 12000,
  
  // Advanced
  excludeSelectors: ['script', 'style', 'code', 'pre', '.pbv-no-scan'],
  chapterVerseCounts: null,
  styleNonce: null,
  debug: false
};

Loading Settings

Load Scope: Choose "Everywhere" (all frontend pages) or "Only on single posts/pages"

Post Types: Select which post types to scan (posts, pages, custom post types)

Load in Admin: Enable to test in wp-admin (usually leave off)

Display Settings

Translation: Choose Bible translation (KJV, ESV, NIV, etc.)

Theme: System, Light, or Dark mode for tooltips

Position: Auto-detect, Top, or Bottom positioning

Max Width: Desktop (420px default) and Mobile (340px default)

Show Reference/Footer: Toggle header and branding visibility

Performance Settings

Prefetch: Preload nearby references for faster display

Lazy Scan: Use IntersectionObserver to scan only visible content

Cache: Max entries (100 default) and expiry time (1 hour default)

Limits: Max matches per text node (50) and max node text length (12,000 chars)

Timeouts & Retries: Request timeout (8s), retries (2), and concurrent fetches (4)

Interaction Timing

Hover Delay: Desktop hover delay before showing (200ms default)

Long Press: Mobile long-press duration (400ms default)

Hide Delay: Delay before hiding tooltip (150ms default)

Advanced Features

Per-Post Disable

Found in the post/page editor sidebar, check the box to disable scanning for that specific content.

Useful for pages with Bible reference formats you don't want converted (e.g., study guides, reference lists).

Exclude Specific Elements

Add the class pbv-no-scan to any element to prevent scanning inside it:

<!-- Exclude specific content from scanning -->
<div class="pbv-no-scan">
  This section won't scan for Bible refs: John 3:16
</div>

<!-- Or wrap inline -->
<span class="pbv-no-scan">Psalm 23:1</span>

Default excluded elements: script,style,code,pre,textarea, and more.

Chapter Verse Counts (Advanced)

For more accurate reference parsing (especially ranges like "John 3:16-4:2"), you can provide a JSON object mapping books → chapters → verse counts:

{
  "John": {
    "3": 36,
    "4": 54,
    "21": 25
  },
  "Genesis": {
    "1": 31,
    "2": 25
  },
  "Psalm": {
    "23": 6,
    "119": 176
  }
}

Note: This is optional. The plugin works fine without it using a counts-free fallback algorithm.

Custom CSS

Add your own CSS in the "Extra CSS" field to override default tooltip styles:

/* Example: Change tooltip colors */
.pbv-tooltip {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
}

.pbv-verse-text {
  color: white !important;
}

Content Security Policy (CSP)

If your site uses CSP with a style-src nonce, enter it in the "CSP style nonce" field so the tooltip's inline styles are allowed.

Supported Reference Formats

The plugin recognizes most common Bible reference formats:

✅ Single Verse

John 3:16

Genesis 1:1

Psalm 23:1

✅ Verse Range

Romans 8:28-30

John 3:16-17

Genesis 1:1-5

✅ Chapter Range

Genesis 1-2

Matthew 5-7

Psalm 1-3

✅ Cross-Chapter

John 3:16-4:2

Luke 23:50-24:12

✅ Whole Chapter

John 3

Romans 8

Psalm 23

✅ Abbreviated Books

Jn 3:16

Gen 1:1

Mt 5:3

Troubleshooting

Tooltips Not Appearing

1.Check that the plugin is activated in WordPress Admin → Plugins
2.Verify "Load Scope" includes your current page type
3.Check browser console for JavaScript errors
4.Make sure the per-post disable checkbox is unchecked
5.Enable "Debug" mode in settings to see console logs

Performance Issues

1.Enable "Lazy Scan" to scan only visible content
2.Reduce "Max matches per node" if pages have hundreds of references
3.Lower "Max concurrent fetches" to reduce network load
4.Use exclude selectors to skip large blocks of irrelevant content

Mobile Not Working

1.Ensure "Mobile Optimized" is checked in settings
2.Test long-press (hold for ~400ms) instead of tap
3.Adjust "Long Press" timing if needed (300-600ms range)

Wrong Verses Showing

1.Check API URL is correct: https://primebible.com/api/verse-preview
2.Verify translation code is valid (KJV, ESV, NIV, etc.)
3.Clear browser cache and reload the page

Requirements & Compatibility

Minimum Requirements

• WordPress 5.8 or higher
• PHP 7.4 or higher
• Modern browser (Chrome, Firefox, Safari, Edge)
• JavaScript enabled

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile browsers (iOS Safari, Chrome Mobile)

Theme Compatibility: Works with all WordPress themes. Uses semantic HTML and respects your site's font settings.

API Endpoint

The plugin fetches verse data from the PrimeBible API:

GET REQUEST

https://primebible.com/api/verse-preview?ref=John+3:16&translation=KJV

Parameters:

• ref - Bible reference (required)
• translation - Translation code (default: KJV)

Response: JSON object with verse text, reference, and metadata

Rate Limiting: Reasonable use. The plugin implements client-side caching to minimize requests.

JavaScript API

Programmatic Control

The script exposes a global window.PrimeBible object with methods for programmatic control:

// Programmatic API
window.PrimeBible.scan();              // Rescan the page
window.PrimeBible.clearCache();        // Clear verse cache
window.PrimeBible.getStats();          // Get statistics
window.PrimeBible.prefetchRef('John 3:16'); // Preload a reference
window.PrimeBible.setTranslation('ESV');    // Change translation
window.PrimeBible.destroy();           // Clean up everything

// Change configuration at runtime
window.PrimeBible.config({
  translation: 'ESV',
  theme: 'dark',
  showFooter: false
});

✨ Dynamic Scanning

Call scan() after dynamically adding content

🔄 Runtime Updates

Use config() to change settings on the fly

📊 Statistics

Get real-time stats with getStats()

🧹 Cleanup

Full cleanup with destroy()

Support & Resources

Get Help

Need assistance? Contact our support team:

[email protected]

Documentation

Visit PrimeBible for more resources:

primebible.com

Quick Start Example

Complete HTML Example

Copy this into an HTML file and open it in your browser to see the verse preview in action:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bible Study - PrimeBible Demo</title>
</head>
<body>
  <h1>My Bible Study Notes</h1>
  
  <article>
    <h2>God's Love for Us</h2>
    <p>
      The most famous verse in the Bible is John 3:16, which tells us
      about God's incredible love. This is echoed in Romans 8:38-39,
      where Paul assures us nothing can separate us from God's love.
    </p>
    <p>
      For encouragement, read Psalm 23 and Philippians 4:6-7.
    </p>
  </article>

  <!-- Configure BEFORE loading the script -->
  <script>
    window.PrimeBibleConfig = {
      translation: 'KJV',
      theme: 'system',
      showFooter: true
    };
  </script>
  
  <!-- Load the PrimeBible script -->
  <script src="https://primebible.com/embed/primebible-versePreview.js" defer></script>
</body>
</html>

All Bible references (John 3:16, Romans 8:38-39, Psalm 23, Philippians 4:6-7) will automatically become interactive with hover/long-press tooltips showing the verse text.

Version History

v2.5.3 Premium Edition

Current

Fixed numbered book parsing bug (Gen 1:1, 1 Cor 13:1-3 now works correctly)

• Fixed: Numbered books no longer parsed as verse continuations (e.g., "Gen 1:1, 1 Cor 13:1" now works)
• Fixed: Chapter URLs use proper format (/translation/book/chapter#verse)
• WordPress plugin with full admin settings interface
• Standalone JavaScript for any website (98KB minified)
• Per-post/page disable option (WordPress)
• Chapter verse counts support for accurate cross-chapter ranges
• Performance limits (max matches per node, max text length)
• Lazy scanning with IntersectionObserver
• Debug mode and comprehensive logging
• CSP nonce support for secure sites
• Mobile optimized with long-press detection
• Intelligent prefetching and LRU caching
• Request throttling and retry logic
• Comprehensive JavaScript API
• Built-in unit tests

License

This plugin is licensed under the GPL-2.0+ license. Free to use, modify, and distribute.

Created with ❤️ by PrimeBible

"Let the word of Christ dwell in you richly in all wisdom."

— Colossians 3:16 (KJV)