Skip to main content

​
Overview

The GitaChat widget provides a beautiful, self-contained way to display daily verses from the Bhagavad Gita on any website. The widget is designed to be lightweight, visually appealing, and automatically updates with new content each day.

Daily Rotation

Automatically cycles through ~700 verses from the Gita

Beautiful Design

Pre-styled with GitaChat’s signature aesthetic

No Dependencies

Works standalone without external libraries

Performance Optimized

Server-rendered with 1-hour caching

​
Widget Features

​
Visual Design

The widget features GitaChat’s characteristic styling:

Dark Background

Deep brown background (#1a1410) for an elegant look

Saffron Accents

Traditional saffron color (#d97b2e) for verse references

Clean Typography

Readable serif fonts with proper spacing

Centered Layout

Content centered for visual balance

​
Content Structure

Each widget display includes: Source: /home/daytona/workspace/source/frontend/app/widget/page.tsx:44-55 
<div className="flex min-h-screen items-center justify-center bg-[#1a1410] p-5">
  <div className="w-full max-w-md text-center">
    <p className="mb-3 font-sans text-xs tracking-widest text-[#d97b2e]">
      {verse.chapter}:{verse.verse}
    </p>
    <p className="text-base leading-relaxed text-[#e8dcc8]">
      {verse.translation}
    </p>
  </div>
</div>
The widget displays:
  • Chapter and verse reference in saffron color
  • Verse translation in a readable cream color
  • Centered layout with comfortable padding

​
Implementation

​
Standard Iframe Embed

The recommended approach is using an iframe to embed the widget: 
<iframe
  src="https://gitachat.org/widget"
  width="100%"
  height="200"
  frameborder="0"
  style="border-radius: 8px; max-width: 400px;"
></iframe>

​
WordPress Integration

For WordPress sites, add the iframe to a Custom HTML block:
1

Add Custom HTML block

In the WordPress editor, add a Custom HTML block
2

Paste the embed code

Insert the iframe code from above
3

Adjust styling

Modify the style attribute to match your theme
4

Preview and publish

Preview the widget and publish your page

​
React/Next.js Integration

For React or Next.js projects, wrap the iframe in a component: 
export function GitaWidget() {
  return (
    <div className="gita-widget-container">
      <iframe
        src="https://gitachat.org/widget"
        width="100%"
        height="200"
        frameBorder="0"
        style={{
          borderRadius: '8px',
          maxWidth: '400px',
          margin: '0 auto',
          display: 'block'
        }}
        title="Daily Gita Verse"
      />
    </div>
  );
}

​
Vue.js Integration

For Vue.js applications: 
<template>
  <div class="gita-widget-container">
    <iframe
      src="https://gitachat.org/widget"
      width="100%"
      height="200"
      frameborder="0"
      style="border-radius: 8px; max-width: 400px;"
      title="Daily Gita Verse"
    />
  </div>
</template>

<style scoped>
.gita-widget-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
</style>

​
Widget Architecture

​
Server-Side Rendering

The widget is server-rendered for optimal performance and SEO: Source: /home/daytona/workspace/source/frontend/app/widget/page.tsx:33-42 
export default async function WidgetPage() {
  const verse = await getVerseOfTheDay();

  if (!verse) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-[#1a1410] p-4">
        <p className="text-sm text-[#a08060]">Unable to load verse</p>
      </div>
    );
  }
  // ... render verse
}
Benefits of server-side rendering:
  • Fast initial load - No client-side JavaScript required
  • SEO friendly - Content is available to search engines
  • Consistent display - Same verse for all users on a given day
  • Error handling - Graceful fallback if API fails

​
Data Fetching

The widget fetches verses from the backend API with caching: Source: /home/daytona/workspace/source/frontend/app/widget/page.tsx:14-18 
const backendUrl = process.env.BACKEND_URL || "http://localhost:8000";
const res = await fetch(`${backendUrl}/api/all-verses`, {
  next: { revalidate: 3600 }, // Cache for 1 hour
});

1-Hour Cache

Responses cached for optimal performance

Backend API

Fetches from centralized verse database

Error Resilience

Returns null on failure for graceful handling

JSON Response

Clean data structure with chapter, verse, translation

​
Customization Options

​
Size Variations

Compact

180px height for tight spaces

Standard

200px height for balanced display

Large

250px+ height for prominent placement

Full Width

100% width with max-width constraint
<!-- Compact widget -->
<iframe src="https://gitachat.org/widget" 
        width="100%" height="180" frameborder="0"
        style="border-radius: 8px; max-width: 350px;"></iframe>

<!-- Standard widget -->
<iframe src="https://gitachat.org/widget" 
        width="100%" height="200" frameborder="0"
        style="border-radius: 8px; max-width: 400px;"></iframe>

<!-- Large widget -->
<iframe src="https://gitachat.org/widget" 
        width="100%" height="250" frameborder="0"
        style="border-radius: 12px; max-width: 500px;"></iframe>

​
Styling Examples

Add custom styling to match your site’s design: 
<!-- Elevated card style -->
<iframe
  src="https://gitachat.org/widget"
  width="100%"
  height="200"
  frameborder="0"
  style="
    border-radius: 12px;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(217, 123, 46, 0.2);
  "
></iframe>

<!-- Minimal style -->
<iframe
  src="https://gitachat.org/widget"
  width="100%"
  height="200"
  frameborder="0"
  style="
    border-radius: 4px;
    max-width: 400px;
    border: 1px solid #2a2420;
  "
></iframe>

​
Daily Verse Algorithm

​
Deterministic Selection

The widget uses a deterministic algorithm to select verses, ensuring everyone sees the same verse on a given day: Source: /home/daytona/workspace/source/frontend/app/widget/page.tsx:2-6 
function getDailyVerseIndex(date: Date): number {
  const start = new Date("2024-01-01");
  const diff = Math.floor((date.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
  return diff % 700; // Cycle through ~700 verses
}
How it works:
1

Calculate days since epoch

Computes days elapsed since January 1, 2024
2

Apply modulo operation

Uses modulo 700 to cycle through verse collection
3

Select verse by index

Returns the verse at the calculated index
4

Update daily at midnight

Automatically changes when the date changes

​
Verse Coverage

~700 Verses

Cycles through entire Bhagavad Gita collection

Daily Updates

New verse automatically appears each day

Global Consistency

Same verse worldwide for any given date

Continuous Loop

Returns to beginning after all verses shown

​
Use Cases

​
Blog Integration

Perfect for spiritual, wellness, or lifestyle blogs: 
<!-- In blog sidebar -->
<aside class="sidebar-widget">
  <h3>Daily Wisdom</h3>
  <iframe
    src="https://gitachat.org/widget"
    width="100%"
    height="200"
    frameborder="0"
    style="border-radius: 8px;"
  ></iframe>
</aside>

​
Meditation Apps

Integrate into meditation or mindfulness applications:

Welcome Screen

Display verse on app launch

Session End

Show verse after meditation sessions

Daily Notification

Link to widget in daily reminders

Profile Pages

Personal daily verse on user profiles

​
Community Platforms

Add spiritual wisdom to community sites: 
<!-- Forum signature or footer -->
<div class="community-footer">
  <h4>Today's Verse from Bhagavad Gita</h4>
  <iframe
    src="https://gitachat.org/widget"
    width="100%"
    height="200"
    frameborder="0"
    style="border-radius: 8px; max-width: 500px; margin: 20px auto;"
  ></iframe>
</div>

​
Performance Considerations

Lightweight

Minimal HTML with no external dependencies

Cached Data

1-hour cache reduces backend load

Server-Rendered

No client-side JavaScript execution

Fast Loading

Optimized for quick display

​
Performance Metrics

  • Initial Load: < 100ms (cached)
  • File Size: ~2KB HTML
  • No JavaScript: Zero client-side execution
  • CDN-Ready: Can be edge-cached globally

​
Error Handling

The widget includes graceful error handling: Source: /home/daytona/workspace/source/frontend/app/widget/page.tsx:36-42 
if (!verse) {
  return (
    <div className="flex min-h-screen items-center justify-center bg-[#1a1410] p-4">
      <p className="text-sm text-[#a08060]">Unable to load verse</p>
    </div>
  );
}
If the API fails or verses cannot be loaded:
  • Displays a subtle error message
  • Maintains the widget’s visual style
  • Prevents broken iframe display
  • Allows for automatic recovery on retry

​
Accessibility

The widget is designed with accessibility in mind:

Semantic HTML

Proper HTML structure for screen readers

High Contrast

Cream text on dark background for readability

Readable Fonts

Appropriate font sizes and line height

Title Attribute

Add title attribute to iframe for context

​
Accessibility Best Practices

<iframe
  src="https://gitachat.org/widget"
  width="100%"
  height="200"
  frameborder="0"
  style="border-radius: 8px; max-width: 400px;"
  title="Daily verse from Bhagavad Gita"
  aria-label="Daily spiritual verse widget"
></iframe>

​
Getting Started

1

Visit the embed page

Go to gitachat.org/embed for the embed code
2

Preview the widget

See a live preview of how it will look
3

Copy the code

Click the copy button to get the iframe code
4

Add to your site

Paste the code where you want the widget to appear
5

Customize as needed

Adjust dimensions and styling to match your design

Interactive Embed Tool

Use the interactive tool to generate and preview your widget

​
Support & Resources

Embed Generator

Access the official embed code generator

Live Preview

View the widget standalone

Main Site

Explore full GitaChat features

API Documentation

Learn about GitaChat’s API endpoints

Build docs developers (and LLMs) love

Get started for freeTalk to us