Embed the NASA Asteroid Watch Widget on Your Site — Step-by-Step Guide

Embed the NASA Asteroid Watch Widget on Your Site — Step-by-Step Guide

Embedding the NASA Asteroid Watch Widget on your website gives visitors real-time information about near-Earth objects (NEOs), close approaches, and potential impact risks. This guide walks you through finding the widget, customizing it, and adding it to common web platforms.

1. What you need

• A website or web page where you can edit HTML.
• Basic familiarity with copying and pasting code.
• Access to your site’s CMS or hosting control panel if required.

2. Locate the official widget code

1. Visit NASA’s Asteroid Watch or Near-Earth Object pages (use NASA’s official site or developer resources).
2. Look for a section labeled “Embed,” “Widget,” or “Share” that provides an HTML snippet or an iframe.
3. If no official widget is available, consider using NASA’s open APIs (e.g., the Near Earth Object Web Service) to build a custom widget. (This guide assumes an embeddable snippet is provided.)

3. Basic embed using an iframe

If you have an iframe snippet from NASA, it will look like this (example):

Code
Copy CodeCopied

• Place this snippet where you want the widget to appear in your page’s HTML.
• Adjust width/height to fit your layout.

4. Responsive embed

To make the iframe responsive, wrap it and use CSS:

Code
Copy CodeCopied



 

• Paste the style into your page’s head or site stylesheet.

5. Customizing parameters

• Some widgets accept URL query parameters for theme, units, date range, or default filters. Example:

Code
Copy CodeCopied

• Check the provider docs for supported parameters and safe values.

6. Using NASA’s API to build a custom widget (if no embed available)

1. Register for an API key at NASA’s APIs portal.
2. Use the Near Earth Object Web Service (NeoWs) endpoints to fetch data: e.g., /neo/rest/v1/feed or /neo/rest/v1/neo/{id}.
3. Build a small frontend with JavaScript to fetch and render data:

Code
Copy CodeCopied
fetch(’https://api.nasa.gov/neo/rest/v1/feed?start_date=2026-02-05&end_date=2026-02-06&api_key=DEMO_KEY’)   .then(res => res.json())   .then(data => { /* render list of close approaches */ }); 

4. Style and paginate results; include links to NASA source pages for each object.

7. Embedding on popular platforms

• WordPress: Use the Custom HTML block in the editor, paste the iframe or custom widget code. For classic editor, switch to Text view. If using a page builder, use its HTML/widget module.
• Squarespace: Use a Code Block and paste the iframe. Enable responsive CSS in site styles if needed.
• Wix: Use the Embed element (Custom Embeds > Embed a Site) and paste the iframe URL.
• GitHub Pages / Static sites: Add the snippet directly into your HTML template.

8. Accessibility and performance tips

• Add a meaningful title attribute to the iframe for screen readers.
• Ensure contrast and font sizes inside the widget meet WCAG where possible. If building a custom widget, add keyboard navigation support.
• Lazy-load the iframe or use loading=“lazy” to improve page performance:

Code
Copy CodeCopied

9. Cautions and legal

• Verify terms of use on NASA’s site before embedding or republishing content.
• Attribute data sources to NASA where required and link back to the original object pages.

10. Quick checklist

• Obtain widget snippet or API key
• Paste iframe or custom code into site HTML/CMS
• Make responsive and accessible
• Test across devices and browsers
• Add attribution and check terms of use

If you’d like, I can generate a ready-to-paste iframe snippet with responsive CSS tailored to your site’s width (provide site width or theme: full-width, sidebar, or content-width).