Developer Documentation
Overview
The Bhagavad Gita Verse of the Day widget is a free, embeddable JavaScript widget that displays daily verses from the Bhagavad Gita. It automatically updates every day with a new verse, complete with Sanskrit text, transliteration, and English translation.
Features
🎨 Customizable Themes
Choose from 5 beautiful themes including gradient, classic, dark mode, saffron, and lotus pink designs.
🌍 Multiple Languages
Support for English, Hindi, and Sanskrit-only display options to match your audience.
📱 Responsive Design
Automatically adapts to different screen sizes and container widths for optimal display.
⚡ Fast Loading
Lightweight JavaScript with async loading and CDN delivery for minimal impact on page speed.
🔄 Auto-Updates
Automatically displays a new verse each day without any manual intervention required.
🎯 SEO Friendly
Includes proper structured data and semantic markup for search engine optimization.
Basic Implementation
The simplest way to add the widget to your website:
<div id="gita-verse-widget"></div>
<script src="https://srimadgita.com/widget/verse-of-day.js"></script>
<script>
GitaWidget.init({
containerId: 'gita-verse-widget'
});
</script>
Advanced Configuration
Customize the widget with these configuration options:
GitaWidget.init({
containerId: 'gita-verse-widget',
theme: 'gradient', // gradient, classic, dark, saffron, lotus
language: 'english', // english, hindi, sanskrit
width: '400px', // Any valid CSS width value
height: 'auto', // Any valid CSS height value
borderRadius: '15px', // Border radius in pixels
showTransliteration: true, // Show/hide transliteration
showReference: true, // Show/hide verse reference
customCSS: '', // Custom CSS overrides
onLoad: function() { // Callback when widget loads
console.log('Gita widget loaded');
},
onError: function(error) { // Error handling
console.error('Widget error:', error);
}
});
Theme Options
- gradient: Beautiful gradient background (default)
- classic: Clean white background with subtle shadows
- dark: Dark theme perfect for dark websites
- saffron: Traditional saffron colors
- lotus: Lotus pink spiritual theme
Language Support
- english: Sanskrit + transliteration + English translation
- hindi: Sanskrit + transliteration + Hindi translation
- sanskrit: Sanskrit text only
Responsive Behavior
The widget automatically adapts to its container width:
- Desktop: Full width up to maximum specified
- Tablet: Scales down proportionally
- Mobile: Optimized for small screens
Integration Examples
WordPress Integration
Add to your theme's functions.php or use in a custom HTML widget:
function add_gita_widget_to_footer() {
echo '<div id="gita-verse-widget"></div>
<script src="https://srimadgita.com/widget/verse-of-day.js"></script>
<script>
GitaWidget.init({
containerId: "gita-verse-widget",
theme: "classic"
});
</script>';
}
add_action('wp_footer', 'add_gita_widget_to_footer');
React Integration
import { useEffect } from 'react';
function GitaWidget() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://srimadgita.com/widget/verse-of-day.js';
script.async = true;
script.onload = () => {
window.GitaWidget.init({
containerId: 'gita-verse-widget',
theme: 'gradient'
});
};
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}, []);
return <div id="gita-verse-widget"></div>;
}
Vue.js Integration
<template>
<div id="gita-verse-widget"></div>
</template>
<script>
export default {
mounted() {
const script = document.createElement('script');
script.src = 'https://srimadgita.com/widget/verse-of-day.js';
script.async = true;
script.onload = () => {
window.GitaWidget.init({
containerId: 'gita-verse-widget',
theme: 'dark'
});
};
document.head.appendChild(script);
}
}
</script>
API Reference
The widget exposes these methods for programmatic control:
// Refresh widget with new verse
GitaWidget.refresh();
// Update configuration
GitaWidget.updateConfig({
theme: 'dark',
language: 'hindi'
});
// Get current verse data
GitaWidget.getCurrentVerse().then(verse => {
console.log(verse.sanskrit, verse.translation);
});
// Destroy widget
GitaWidget.destroy();
Performance Considerations
- Widget script is loaded asynchronously and doesn't block page rendering
- Content is cached for 24 hours to reduce server requests
- Minified JavaScript weighs only 8KB compressed
- No external dependencies like jQuery required
- Uses modern JavaScript with fallbacks for older browsers
SEO Benefits
Including the Bhagavad Gita widget on your website provides:
- Daily fresh content that search engines love
- Rich spiritual content that increases dwell time
- Structured data markup for enhanced search results
- Semantic HTML that search engines can understand
- Regular backlinks to authoritative spiritual content
Content Attribution
The widget includes a small "Powered by Srimad Gita" link that:
- Provides attribution to our comprehensive verse database
- Links back to the full verse commentary and analysis
- Helps users discover more verses and teachings
- Required for free usage (cannot be removed)
Terms of Use
- Free for personal, educational, and commercial use
- Attribution link must remain visible and functional
- No modifications to the attribution or widget branding
- Content is sourced from public domain Sanskrit texts
- Translations are provided under Creative Commons license
Browser Support
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
- IE 11 (limited functionality)
- Mobile browsers (iOS Safari, Chrome Mobile)
Troubleshooting
Widget Not Loading
Check these common issues:
- Ensure the container element exists before initializing
- Check browser console for JavaScript errors
- Verify internet connection and CDN accessibility
- Confirm containerId matches your HTML element ID
Styling Issues
If the widget appears broken:
- Check for CSS conflicts with your site's styles
- Try a different theme option
- Use custom CSS overrides in the configuration
- Ensure the container has sufficient width (minimum 250px)
Support and Updates
For technical support, questions, or feature requests:
- Email: [email protected]
- Documentation: https://srimadgita.com/tools/widget-docs
- GitHub Issues: https://github.com/srimadgita/widget-issues
- Updates are automatically delivered via CDN
Related Resources
Enhance your spiritual website with these additional resources:
The Bhagavad Gita Verse of the Day widget is designed to bring the timeless wisdom of Krishna's teachings to modern websites. By embedding this widget, you're not just adding content to your site—you're creating a daily touchpoint with one of humanity's greatest philosophical texts.
Each verse is carefully selected to provide a balanced representation of the Gita's teachings throughout the year. The rotation includes verses from all 18 chapters, covering themes of duty (dharma), devotion (bhakti), knowledge (jnana), and action (karma yoga).
Whether you're running a spiritual blog, yoga studio website, meditation platform, or any site focused on personal development, this widget adds authentic value that your visitors will appreciate and return to see daily.