Skip to main content

​
Overview

The GitaChat embed feature allows you to display daily verses from the Bhagavad Gita directly on your website. The embed automatically updates daily with a new verse, providing your visitors with spiritual wisdom.

Simple Integration

Add a verse widget with just a few lines of HTML

Daily Updates

Automatically displays a different verse each day

Fully Styled

Pre-styled widget matches GitaChat’s aesthetic

Lightweight

Fast-loading iframe with minimal overhead

​
Basic Implementation

​
Iframe Embed

The simplest way to embed GitaChat is using an iframe that points to the widget endpoint: 
<iframe
  src="https://gitachat.org/widget"
  width="100%"
  height="200"
  frameborder="0"
  style="border-radius: 8px; max-width: 400px;"
></iframe>
This code creates an embedded widget displaying the daily verse. The widget is automatically updated each day based on a rotation through all verses.

​
Implementation Steps

1

Copy the embed code

Visit gitachat.org/embed to access the embed code generator with a live preview
2

Paste into your HTML

Add the iframe code to your website’s HTML where you want the widget to appear
3

Customize dimensions

Adjust the width, height, and max-width properties to fit your layout

​
Configuration Options

​
Sizing

Customize the widget dimensions to fit your layout: 
<!-- Compact widget -->
<iframe
  src="https://gitachat.org/widget"
  width="100%"
  height="180"
  frameborder="0"
  style="border-radius: 8px; max-width: 350px;"
></iframe>

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

​
Styling

The iframe accepts standard CSS styling through the style attribute:

Border Radius

Control corner rounding with border-radius

Max Width

Set maximum width with max-width

Box Shadow

Add shadows with box-shadow

Margin/Padding

Control spacing with standard CSS properties
<iframe
  src="https://gitachat.org/widget"
  width="100%"
  height="200"
  frameborder="0"
  style="
    border-radius: 12px;
    max-width: 400px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
  "
></iframe>

​
Widget Endpoint

​
Daily Verse Logic

The widget displays a consistent “verse of the day” that changes daily. The verse selection is deterministic based on the current date: 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
}
The algorithm:
  1. Calculates days elapsed since January 1, 2024
  2. Uses modulo 700 to cycle through the verse collection
  3. Ensures the same verse appears globally for any given day

​
Data Source

The widget fetches verse data from the backend API: Source: /home/daytona/workspace/source/frontend/app/widget/page.tsx:8-31 
async function getVerseOfTheDay(): Promise<{
  chapter: number;
  verse: number;
  translation: string;
} | null> {
  const backendUrl = process.env.BACKEND_URL || "http://localhost:8000";
  const res = await fetch(`${backendUrl}/api/all-verses`, {
    next: { revalidate: 3600 }, // Cache for 1 hour
  });
  
  const data = await res.json();
  const verses = data.data || [];
  const index = getDailyVerseIndex(new Date());
  return verses[index % verses.length];
}

​
Use Cases

Blog Sidebars

Add daily spiritual wisdom to your blog’s sidebar

Landing Pages

Enhance landing pages with inspirational verses

Community Sites

Share daily guidance on forums or community platforms

Personal Websites

Display verses on portfolios or personal sites

​
Responsive Design

The widget automatically adapts to different screen sizes. For optimal responsive behavior: 
<!-- Mobile-friendly approach -->
<div style="width: 100%; max-width: 400px; margin: 0 auto;">
  <iframe
    src="https://gitachat.org/widget"
    width="100%"
    height="200"
    frameborder="0"
    style="border-radius: 8px; display: block;"
  ></iframe>
</div>

​
Responsive Breakpoints

/* Adjust widget size based on viewport */
@media (max-width: 768px) {
  .gita-widget {
    height: 180px;
    max-width: 100%;
  }
}

@media (min-width: 769px) {
  .gita-widget {
    height: 200px;
    max-width: 400px;
  }
}

​
Technical Details

Caching

Widget data is cached for 1 hour for optimal performance

No Navigation

The widget route hides the main navigation for clean embedding

Server-Side Rendered

Widget content is rendered on the server for fast loading

Error Handling

Graceful fallback if verses cannot be loaded
The widget page automatically hides the GitaChat navigation to provide a clean embed experience: Source: /home/daytona/workspace/source/frontend/app/components/Nav.tsx:31-34 
// Hide nav on widget page (for iframe embedding)
if (pathname === "/widget") {
  return null;
}

​
Best Practices

1

Set appropriate dimensions

Use a minimum height of 180px to ensure verse text displays properly
2

Center the widget

Use margin: 0 auto and a container div for centered placement
3

Match your theme

The widget uses a dark theme that works well on most backgrounds
4

Test responsively

Verify the embed looks good on mobile, tablet, and desktop

​
Support

Need help with embedding? The GitaChat embed page at gitachat.org/embed provides:
  • Live preview of the widget
  • Copy-to-clipboard functionality
  • Step-by-step usage instructions
  • Visual examples

Embed Generator

Access the interactive embed code generator

Build docs developers (and LLMs) love

Get started for freeTalk to us