Embed upcoming heavy-lift rocket launches directly into your forum or website. A lightweight, responsive countdown widget powered by The Space Devs API.
Live Preview: https://darkrain-nl.github.io/space-flight-widget/
- Multi-Language Support: Fully translated interface and launch statuses in English (
en), French (fr), Italian (it), German (de), Spanish (es), and Dutch (nl) (dynamic API-provided metadata like hold reasons and pad locations remains in English). English is the default. - BBCode Compatible: Built entirely with inline styles and ES5 Javascript to bypass strict forum sanitizers and
[html]tags. - Detailed Launch Metadata: Displays launch status badges (e.g. Go for Launch, TBD, Successful, On Hold, Postponed, Cancelled), launch service provider, launch pad location, and weather launch probability (%).
- Hold & Failure Alerts: Dynamic warning alerts integrated directly into the widget to show critical launch updates like Hold Reason, Failure Reason, and Weather Concerns based on API updates.
- Smart Logic: Automatically displays a fallback message if there isn't a launch scheduled within the configured time window (default: 7 days, configurable via
data-days). - Offline & Rate-Limit Resilient: Caches launch data in
localStorage. If the API hits rate limits (HTTP 429) or goes offline, the widget gracefully falls back to the cached data to keep the countdown ticking seamlessly. - Smart Auto-Refreshing: Adapts refresh intervals based on launch proximity and rate limits, conserving API request budget while staying responsive.
- Zero Dependencies: Pure HTML and JavaScript. No external CSS stylesheets or libraries required.
- Visit the live preview page to dynamically configure your language, rockets, and days ahead, then click Copy Embed Code.
- Paste the generated code into your website or forum's HTML embed block (e.g., using
[html]...[/html]).
Alternatively, you can manually copy the raw code from dist/widget.min.html and edit the data-lang, data-rockets, and data-days attributes yourself.
All configuration is done via data-* attributes on the widget's root <div>:
| Attribute | Description | Default | Example |
|---|---|---|---|
data-lang |
Display language (en, fr, it, de, es, nl) |
en |
data-lang="nl" |
data-rockets |
Comma-separated list of rocket names/families to track | All major rockets | data-rockets="starship, falcon heavy" |
data-days |
Number of days ahead to look for upcoming launches (positive integer) | 7 |
data-days="14" |
Example with all options:
<div id="space-countdown-widget" data-lang="en" data-rockets="starship, falcon heavy" data-days="14" ...>The widget uses smart logic to determine which launch to highlight, how to display its countdown state, and how frequently to fetch data from the API to conserve your request quota.
| Launch Status / Precision | Timer Display | Visibility / Fallback Rules | Visual Styling & Behavior |
|---|---|---|---|
| Go for Launch / Launch Pending | T- Countdown (ticking) |
Visible until NET (scheduled launch time). | Active countdown of days, hours, minutes, and seconds. Badge displays status and weather probability if available. |
| In Flight / Launch in Flight | T+ Count-up (ticking) |
Visible up to 12 hours after liftoff. | Count-up timer with green T+ badge that pulses on even seconds. |
| On Hold | T- 00:00:00:00 (frozen) |
Visible up to 60 minutes past NET (unless resumed or scrubbed). | Frozen at zero. Displays an amber T- badge and shows a red warning alert box detailing the holdReason. |
| Coarse Date (TBD, Month, Quarter, Year) |
Static Date Text | Until updated with precise time or past scheduling window. | Hides the ticking timer and shows localized coarse date text (e.g. "Q3 2026", "Nov 2026"). |
| No upcoming launch | None | Shown when no launch matches the rocket criteria within the configured time window. | Shows fallback message: "No Launch Scheduled. Check back later." |
Note: If the active launch has passed its scheduled time (NET) by more than 30 minutes, the widget automatically switches its default focus to the next upcoming future launch (though users can still navigate back to past/ongoing launches using the control buttons).
To prevent hitting the API request throttle, the widget caches data in localStorage and dynamically shifts its update frequency based on remaining API quota and launch proximity:
| Scenario / API Quota Status | Proximity to Launch | Refresh Interval (TTL) |
|---|---|---|
| Launch is On Hold | Any time | 2 minutes (or 5 minutes when quota is low) |
| Post-Launch (NET has passed) | Any time | 5 minutes |
| API Quota Healthy (>3 requests remaining) |
< 5 mins to NET < 1 hour to NET < 6 hours to NET < 24 hours to NET Default / Fallback |
2 minutes 5 minutes 10 minutes 15 minutes (also for coarse launches) 30 minutes |
| API Quota Low (1-3 requests remaining) |
< 30 mins to NET < 2 hours to NET < 12 hours to NET Default / Fallback |
5 minutes 10 minutes 20 minutes 30 minutes |
| API Quota Depleted (0 requests remaining) |
Any time | 10 minutes |
| Throttled (HTTP 429) | Any time | Waits until the throttle period resets (+5 seconds safety margin) |
We welcome contributions! Please see our Contributing Guide for important technical rules you need to follow when developing for this widget (like our strict BBCode parsing constraints).
- Fork the repo and clone it locally.
- Make your edits in
src/widget.html. Do not editdist/widget.min.htmlorindex.htmldirectly. - Run the build script to compile and minify:
python3 build.py
- Open
index.htmlin your browser to preview your changes.
This repository uses a GitHub Action to automatically monitor and update to the latest version of The Space Devs API. When the API updates, a Pull Request is automatically generated to update the widget. Please note that after an update is merged, you will still need to manually copy and paste the new code from dist/widget.min.html to update the widget on your forum or website.
Launch data is provided by The Space Devs.
MIT License. See LICENSE for more information.