Embeddable Thirukkural Widget

Layout Previews

These previews are rendered by the exact public widget frame used in external embeds. Refresh the page to see different random Kurals across each layout.

Banner

A horizontal treatment for the top of homepages, article hubs, and editorial sections.

Ticker

A moving strip for top bars, footer bars, and announcement-style placements.

Spotlight

A rich bilingual card for blogs, landing pages, and feature modules.

Square

A square card for grid layouts, side modules, and visual homepages.

Compact

A tighter layout for article rails, footers, and newsletter landing pages.

Minimal

A low-profile quote block for dense interfaces that still needs a clear source link.

Quick Start

This is the default integration. It renders a random Kural in the spotlight layout with bilingual content.

<script
  src="https://thirukkural.site/widgets/daily-kural.js"
  data-mode="random"
  data-layout="spotlight"
  data-language="bilingual"
></script>

Preset Integrations

Choose a preset that fits your site, then fine-tune the options below.

Random Spotlight

Best default: random Kural on load, bilingual content, full presentation.

<script
  src="https://thirukkural.site/widgets/daily-kural.js"
  data-mode="random"
  data-layout="spotlight"
  data-language="bilingual"
></script>

Compact English Rail

A compact English-only widget for article sidebars or newsletters.

<script
  src="https://thirukkural.site/widgets/daily-kural.js"
  data-mode="random"
  data-layout="compact"
  data-language="english"
  data-meaning="explanation"
  data-accent="#0f766e"
  data-show-tags="false"
></script>

Top Navigation Banner

A horizontal layout designed for the top of a homepage, article hub, or magazine front page.

<script
  src="https://thirukkural.site/widgets/daily-kural.js"
  data-mode="random"
  data-layout="banner"
  data-language="bilingual"
  data-max-width="100%"
  data-align="center"
></script>

Ticker Bar

A moving caption-style embed for the top or bottom of content-heavy websites.

<script
  src="https://thirukkural.site/widgets/daily-kural.js"
  data-mode="random"
  data-layout="ticker"
  data-language="bilingual"
  data-speed="normal"
  data-scroll-direction="rtl"
  data-max-width="100%"
></script>

Square Feature Card

A square treatment for grid systems, side modules, or portfolio-style homepages.

<script
  src="https://thirukkural.site/widgets/daily-kural.js"
  data-mode="random"
  data-layout="square"
  data-language="english"
  data-meaning="explanation"
  data-max-width="340px"
  data-show-tags="false"
></script>

Fixed Editorial Feature

Pin a specific Kural for a story, essay, or campaign page.

<script
  src="https://thirukkural.site/widgets/daily-kural.js"
  data-mode="fixed"
  data-kural="1078"
  data-layout="spotlight"
  data-language="bilingual"
  data-cta-text="Read the full Kural"
></script>

Advanced API

If you need to mount the widget into a specific host element after loading the script, use the public JavaScript API.

<script src="https://thirukkural.site/widgets/daily-kural.js"></script>
        <div id="kural-slot"></div>
<script>
  window.ThirukkuralWidget.mount('#kural-slot', {
    mode: 'random',
    layout: 'ticker',
    language: 'english',
    meaning: 'explanation',
    accent: '#0f766e',
    speed: 'slow',
    scrollDirection: 'ltr'
  });
</script>

Customization Options

The widget is configurable through `data-*` attributes or the JS API options object.

data-mode`random`, `daily`, `fixed`

Controls how the widget chooses a Kural. `random` is the default.

data-layout`spotlight`, `banner`, `ticker`, `square`, `compact`, `minimal`

Changes the widget shape so it can fit top-of-page banners, moving tickers, square cards, blog rails, or compact embeds.

data-language`bilingual`, `tamil`, `english`

Controls whether Tamil, English, or both are rendered.

data-meaning`translation`, `couplet`, `explanation`

Chooses which English meaning field is shown when English content is enabled.

data-accenthex color such as `#0f766e`

Sets the widget accent color.

data-speed / data-scroll-direction`slow`, `normal`, `fast` and `rtl`, `ltr`

Controls ticker motion speed and whether the marquee runs right-to-left or left-to-right.

data-pause-on-hover`true` or `false`

Pauses the ticker when hovered. Reduced-motion users always get a static ticker regardless of this value.

data-align`left`, `center`

Controls typography alignment inside the widget.

data-show-meta / data-show-tags`true` or `false`

Lets integrators simplify the card for tighter placements.

data-show-refresh`true` or `false`

Shows a "Show another" button in random mode.

data-radius / data-font-scale / data-shadownumeric or preset values

Adjusts presentation details without requiring host-site CSS overrides.

data-width / data-max-width / data-min-widthCSS dimensions such as `360px` or `100%`

Helps reserve space, control the final shape, and avoid layout shift.

Implementation Best Practices

These are the standards this widget now follows and the rules integrators should keep in mind.

Use the hosted iframe model for isolation and compatibility instead of injecting large DOM or CSS payloads directly into the host page.
Pick the layout that matches the available real estate: `banner` for horizontal hero areas, `ticker` for caption-style strips, `square` for card grids, and `compact` or `minimal` for rails.
Reserve space with width and max-width settings so the widget does not create unnecessary layout shift when it loads.
Let the host site control placement for ticker-style embeds. Use the widget as content, not as a forced fixed-position takeover.
Lazy-load widgets that appear below the fold; switch to eager loading only when the widget is part of the initial viewport.
Keep widget messaging strict. This implementation validates both the iframe origin and source window before accepting resize messages.
Respect motion sensitivity. The ticker pauses on hover when configured and falls back to a static bar when the user prefers reduced motion.
Treat widget links as distribution and attribution, not as a link-scheme shortcut. The default outbound links use nofollow semantics.

Customizable Thirukkural Widget