SunShade Widget

Add real-time sun and shade information to your website with a single line of code.

Quick Start

Add this snippet to any page on your website. That's it.

<!-- Add where you want the widget to appear -->
<div class="sunshade"
     data-key="your-key"
     data-profile="terrace-table-1"></div>

<!-- Load once, at the bottom of the page -->
<script src="https://sunshade.info/widget.js"></script>

The widget automatically fetches the terrain profile, calculates today's sun and shade times, and renders a timeline.

Display Styles

Choose how the sun/shade information appears on your site.

━

Timeline Bar

Compact horizontal bar showing shade and sun periods throughout the day.

☉

Sky Chart

Visual sky dome with terrain silhouette and sun arc for the selected date.

⏲

Text Only

Simple text showing shade/sun time ranges. Minimal footprint.

▦

Card

Combined view: location name, timeline bar, and key times in a neat card.

Timeline Bar

<div class="sunshade" data-key="your-key"
     data-profile="terrace-table-1"
     data-style="bar"></div>

Terrace — Table 1

Shade until 09:45 · Sun 09:45 – 15:20 · Shade from 15:20

Sky Chart

<div class="sunshade" data-key="your-key"
     data-profile="terrace-table-1"
     data-style="chart"></div>

Text Only

<div class="sunshade" data-key="your-key"
     data-profile="terrace-table-1"
     data-style="text"></div>

Sun 09:45 – 15:20 Shade before 09:45 and after 15:20

Card

<div class="sunshade" data-key="your-key"
     data-profile="terrace-table-1"
     data-style="card"></div>

Multiple Profiles on One Page

Show several locations at once — one widget per profile, one script tag for the whole page.

<div class="sunshade" data-key="your-key" data-profile="table-1"></div>
<div class="sunshade" data-key="your-key" data-profile="table-2"></div>
<div class="sunshade" data-key="your-key" data-profile="table-3"></div>

<!-- Load widget.js once -->
<script src="https://sunshade.info/widget.js"></script>

The script auto-discovers all .sunshade elements on the page. Only include it once.

Show All Profiles

Display all your locations in a single overview — timeline bars stacked with a summary at top.

<div class="sunshade" data-key="your-key"
     data-profile="all"
     data-style="bar"></div>

Great for a "Sun & Shade" page on your website showing every location at a glance.

Widget Configurator

Fill in your details and we'll generate the snippet for you.

Account key

Profile slug

Display style

Theme

<!-- SunShade Widget -->
<div class="sunshade"
     data-key="your-key"
     data-profile="terrace-table-1"
     data-style="bar"></div>

<!-- Load once, at the bottom of the page -->
<script src="https://sunshade.info/widget.js"></script>

Note: widget.js is coming soon. The snippet above shows the planned integration format.

Attribute Reference

Attribute	Values	Description
`data-key` required	Your account key	Identifies your account. Find it in your dashboard.
`data-profile` required	Profile slug or `all`	Which location to display. Use `all` for overview.
`data-style` optional	`bar` · `chart` · `text` · `card`	Display style. Default: `bar`
`data-date` optional	`YYYY-MM-DD`	Show sun/shade for a specific date. Default: today.
`data-theme` optional	`light` · `dark` · `auto`	Colour theme. `auto` follows the host site. Default: `light`
`data-lang` optional	`en` · `el` · `de` · `fr` …	Language for labels. Default: `en`
`data-label` optional	Custom text	Override the location name shown in the widget.
`data-sun-color` optional	CSS color/gradient	Sun segment colour. Default: `linear-gradient(90deg,#FFD700,#FFA500)`
`data-shade-color` optional	CSS color	Daylight/shade segment colour. Default: `#A8D8EA`
`data-bar-bg` optional	CSS color	Bar background colour. Default: `#4B5563`

Your Hosted Page

Every account gets a dedicated page on sunshade.info — no coding needed.

https://sunshade.info/your-username                    ← all your locations
https://sunshade.info/your-username?l3=terrace-table-1 ← single location

Link to it from your website, share it on social media, or print QR codes for on-site use.

Combine both approaches: link to your hosted page for the full experience, embed widgets for quick at-a-glance info.

Link Without Embedding

If you don't want to embed code, simply link to your hosted page.

<a href="https://sunshade.info/your-username">See today's sun & shade times</a>

Get started free