TheShia

Widgets

Put prayer times, the Hijri date, or the events of the Ahlul Bayt (a) on any website with one script tag — free, in four languages, powered by the same engines as this site.

Prayer times

Copy this snippet

<script src="https://theshia.org/widget/prayer-times.js"
        data-city="london" data-method="Tehran" data-lang="en" data-theme="auto"
        defer></script>

Attributes

  • data-city required city id — find yours with /api/v1/cities?q=<name> (e.g. london, tehran, karbala, najaf).
  • data-method default: Tehran calculation method id — all sixteen values on the methods API page.
  • data-lang default: en values: "en" · "ar" · "fa" · "ur" — labels, digits and direction follow.
  • data-theme default: auto values: "light" · "dark" · "auto" (follows the visitor's system).

Live preview

Hijri date

Copy this snippet

<script src="https://theshia.org/widget/hijri-date.js"
        data-lang="en" data-theme="auto"
        defer></script>

Attributes

  • data-lang default: en values: "en" · "ar" · "fa" · "ur".
  • data-calendar default: moonsighting values: "moonsighting" · "iran" (fa defaults to iran).
  • data-theme default: auto values: "light" · "dark" · "auto".

Live preview

Upcoming events

Copy this snippet

<script src="https://theshia.org/widget/events.js"
        data-lang="en" data-count="3" data-theme="auto"
        defer></script>

Attributes

  • data-count default: 3 1 to 5 upcoming events.
  • data-importance default: major values: "major" (headline events) · "all".
  • data-lang default: en values: "en" · "ar" · "fa" · "ur".
  • data-theme default: auto values: "light" · "dark" · "auto".

Live preview

Event countdown

Copy this snippet

<script src="https://theshia.org/widget/countdown.js"
        data-event="h-02-20-occasion-arba-een-40th-day-of-imam-hussain-s-martyrdom" data-lang="en" data-theme="auto"
        defer></script>

Attributes

  • data-event required event id from /api/v1/events (e.g. the Arba'een id shown in the snippet).
  • data-lang default: en values: "en" · "ar" · "fa" · "ur".
  • data-theme default: auto values: "light" · "dark" · "auto".

Live preview

Widgets render where you place the script tag, isolate their styles completely, and use edge-cached requests. City ids come from the cities API, method ids from the methods API, and event ids from the events API.