Use these HTML tags to embed weekly Shabbat candle-lighting times and Torah portion directly on your synagogue’s website.
Browse the Hebcal web developer APIs to display other information on your site (e.g. today's Hebrew date, a full Jewish Calendar, RSS feeds).
Instructions: Copy everything from this box and paste it into the appropriate place in your HTML.
<div id="hebcal-shabbat"></div>
<script>
fetch('https://www.hebcal.com/shabbat?cfg=i2&geonameid=3627685&ue=off&b=18&M=on&lg=s&tgt=_top')
.then(response => response.text())
.then(data => document.getElementById('hebcal-shabbat').innerHTML = data);
</script>
The result will look like this (customize fonts):
Enter a new city or select different candle-lighting, Havdalah or language options to get revised HTML tags.
To change the fonts to match the rest of your site, you can add a
<style type="text/css"> stylesheet like this to the
<head> ... </head> section at the top of your web
page:
<style type="text/css">
div.hebcal-container {
font-family: "Gill Sans MT","Gill Sans",GillSans,Arial,Helvetica,sans-serif;
font-size: small;
}
div.hebcal-container div h3 {
font-family: Georgia,Palatino,"Times New Roman",Times,serif;
}
div.hebcal-container div ul.hebcal-results { list-style-type:none }
div.hebcal-container div ul.hebcal-results li {
margin-bottom: 11px;
font-size: 21px;
font-weight: 200;
line-height: normal;
}
div.hebcal-container div div.hebcal-results .candles { color: red; font-size: large }
div.hebcal-container div div.hebcal-results .havdalah { color: green }
div.hebcal-container div div.hebcal-results .parashat { color: black; background: #ff9 }
div.hebcal-container div div.hebcal-results .holiday { display: none }
</style>Those fonts and colors are just an example. Cascading Style Sheets (CSS) are very powerful and flexible.