Add the Weekly Torah Portion to your website
Drop the weekly Torah Portion onto your own website with a single snippet — free, no account, and it keeps itself current. Show this week or pin a specific portion, then paste the code wherever you can add HTML.
Build your embed
Injects the widget into your page's HTML so it inherits your site's fonts and colors. Off = a sandboxed iframe with the widget's own design.
▸Match your site's design (advanced)
Leave blank to keep the widget's own look. Any CSS color works; set Background to transparent to let the widget sit directly on your page's background. Fonts load from Google Fonts by name.
<div class="shalom-embed"> <a href="https://www.shalom.app/?utm_source=embed&utm_medium=widget" style="display:inline-block;margin-top:.5em;font-size:.8em;opacity:.75;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px">Shalom.App — Weekly Torah Portion</a> </div> <script async src="https://www.shalom.app/embed.js"></script>
Paste into a raw-HTML / code block (in Squarespace, an Embed or Code block — not a Text block). Loads from www.shalom.app.
How to add it
- 1. Set the options above until the live preview looks right.
- 2. Press Copy to grab the snippet.
- 3. Paste it into a raw-HTML / code block on your page. In Squarespace use an Embed or Code block — not a Text block.
Configuration options
Each option is a data-attribute on the snippet's <div>. Leave one off to use its default. The configurator above writes these for you, but you can also edit them by hand.
| Attribute | Values | Default | What it does |
|---|---|---|---|
| data-slug | portion slug | — (current week) | Pin to one portion (e.g. "bereshit"). Omit to show the current week, which updates itself every Shabbat. |
| data-size | full · compact | full | Full shows the complete card; compact trims to name, dates, and readings for tight sidebars. |
| data-audience | diaspora · israel | diaspora | Which calendar to follow when the two diverge. |
| data-brit | 1 · 0 | 1 | Show or hide B'rit Hadashah (Messianic / New Testament) reading references. |
| data-popup | 1 · 0 | 0 | Render a text link instead of the inline card; clicking opens the widget in a popup. |
| data-popup-text | any text | Read this week's Torah Portion | Link wording when data-popup is on. |
| data-mode | inline | — (iframe) | Render directly into your page instead of an iframe, so your site’s own CSS styles the widget. See “Inline mode” below. |
Inline mode: inherit your site's styles
By default the widget renders in a sandboxed iframe with its own design. Add data-mode="inline" and it instead renders directly into your page's HTML — your site's fonts and colors apply automatically, with no theme tokens needed. The Inline render toggle in the configurator above writes this for you.
<div class="shalom-embed" data-mode="inline">
The markup uses stable .shalom-widget__* classes (title, date, readings, CTA) you can target from your own stylesheet for finer control. Data comes from one small static file (~15 KB) — much lighter than the iframe, and it still updates itself each week.
Notes: works with data-size, data-audience, and the B'rit Hadashah options. Pinned portions (data-slug) and data-theme-* tokens are iframe-only — a pinned inline embed falls back to the iframe automatically. Because inline mode shares your page's CSS, your styles can also override the widget's — that's the point, but the iframe is the safer default if you don't want that.
Match your site's design
By default the widget brings its own parchment look. Add data-theme- attributes to restyle it to your site — every token is optional, and anything you leave off keeps its default. The advanced panel in the configurator above writes these for you.
| Attribute | Values | What it does |
|---|---|---|
| data-theme-bg | CSS color · transparent | Widget and card background. Use "transparent" to let the widget sit directly on your page background — this also removes the card shadow and paper texture. |
| data-theme-text | CSS color | Main reading text. |
| data-theme-heading | CSS color | The portion name. |
| data-theme-accent | CSS color | Button, links, and the Hebrew name. |
| data-theme-muted | CSS color | Labels, dates, and attribution; hairline borders are derived from it automatically. |
| data-theme-font-display | font family name | Headings and labels. Loaded from Google Fonts if the widget doesn’t bundle it (e.g. "EB Garamond"). |
| data-theme-font-body | font family name | Body text. Same Google Fonts loading. |
| data-theme-radius | CSS length · number | Card corner rounding. A bare number is treated as pixels; use 0 for square corners. |
For example, a widget on a navy-and-parchment site might use:
<div class="shalom-embed" data-theme-bg="transparent" data-theme-text="#22314a" data-theme-accent="#8c6d2f" data-theme-font-display="EB Garamond" data-theme-radius="0">
Good to know
- Works anywhere you can paste HTML — Squarespace, WordPress, Wix, plain static sites, and more.
- Stays current. A current-week widget recomputes the active Shabbat on its own — no rebuild or edit each week.
- Loads in a sandboxed iframe, so it can't touch the rest of your page and your page's styles can't break it.
- Free to use. The snippet includes one small credit link back to Shalom.App — that's all we ask. It also means the widget degrades to a simple link if your site ever strips the script.
Prefer to browse first? See all 54 portions →