Embed Shabbat Times in your Website

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).

Tepetlixpa, Mexico, Mexico

Change city

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=3817608&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):

City and settings

Enter a new city or select different candle-lighting, Havdalah or language options to get revised HTML tags.

Havdalah
 
Elevation

Customize Fonts

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.