Station Widget

About

The Dendra Station Widget is a small, interactive widget that displays the current and forecast conditions for a station. It is designed to be embedded in your website to provide a quick overview of the station’s data.

HTML Embedding Instructions

To embed the widget into your website, use this HTML template:

<iframe
  src="THE_WIDGET_URL"
  scrolling="no"
  style="border: none; display: block; overflow: hidden; margin: 0; padding: 0; width: 100%; max-width: 400px; height: 700px;"
></iframe>

In the style attribute, modify the height as needed. The value 700px is the recommended default. If you go smaller, then more content will wrap inside the widget.
In the style attribute, modify the max-width as needed. The value 400px is the recommended default. If you go smaller, then more content will wrap inside the widget. If you want the widget to fill the available width of your page container, replace with 100%, e.g. max-width: 100%;
It is recommended to NOT modify the width in the style as it helps maintain a responsive width. Leave as-is, e.g. width: 100%;
Replace the text THE_WIDGET_URL with a URL as described below.

Default Configuration

The default configuration provides an interactive widget that will adapt over time as we add more functionality. This is the easiest option. Here is the URL template:

https://mini.dendra.science/widgets/station?organizationId=YOUR_ORG_ID&stationId=YOUR_STATION_ID&dark=false&outlined=true

Modify this URL as follows:

Replace the text YOUR_ORG_ID with your organization’s unique id, e.g. organizationId=58db17c424dc720001671378
Replace the text YOUR_STATION_ID with your station’s unique id, e.g. stationId=58e68cabdf5ce600012602b3
If you want a widget that uses a dark mode styling to match your site’s appearance, then change dark=false to dark=true
If you do not want a border around the widget, then change outlined=true to outlined=false

Full URL example (click here to preview it):

https://mini.dendra.science/widgets/station?organizationId=58db17c424dc720001671378&stationId=58e68cabdf5ce600012602b3&dark=false&outlined=true

Full URL example DARK mode (click here to preview it):

https://mini.dendra.science/widgets/station?organizationId=58db17c424dc720001671378&stationId=58e68cabdf5ce600012602b3&dark=true&outlined=true

Example: Default Configuration

Code:

<iframe
  src="https://mini.dendra.science/widgets/station?organizationId=58db17c424dc720001671378&stationId=58e68cabdf5ce600012602b3&dark=false&outlined=true"
  scrolling="no"
  style="border: none; display: block; overflow: hidden; margin: 0; padding: 0; width: 100%; max-width: 400px; height: 700px;"
></iframe>

Live Preview:

Custom Configuration

A custom configuration is sometimes desired to lock-down the widget’s appearance and capabilities. When modifying the URL, it is HIGHLY recommended to leave all query parameters intact and simply modify their values as needed. Here is the URL template with our defaults:

https://mini.dendra.science/widgets/station?organizationId=YOUR_ORG_ID&stationId=YOUR_STATION_ID&dark=false&exploreData=true&include=current,forecast&lastSeen=false&outlined=true&photoBackground=true&photoDrawer=true&somId=met&timeGeo=true

Modify this URL as follows:

Replace the text YOUR_ORG_ID with your organization’s unique id, e.g. organizationId=58db17c424dc720001671378
Replace the text YOUR_STATION_ID with your station’s unique id, e.g. stationId=58e68cabdf5ce600012602b3
If you want a widget that uses a dark mode styling to match your site’s appearance, then change dark=false to dark=true
If you do not want a border around the widget, then change outlined=true to outlined=false
Modify other parameters as needed (recommendation is to not remove parameters). The parameters are described below:
- exploreData – Set to true to show the “Explore Data” button that links to Dendra’s data query page for the station. Otherwise, set to false to hide the button.
- include – What data should be displayed in the widget. Set to current,forecast to show both current and forecast conditions. Set to current to only show current conditions. Set to forecast to only show forecast conditions.
- lastSeen – Set to true to show the “Last seen” timestamp for datastreams. Otherwise, set to false to hide the timestamp.
- photoBackground – Set to true to show a photo of the station in the header, allowing the user to reveal the photo by clicking a button. Otherwise, set to false to hide the photo.
- photoDrawer – When a station photo is displayed, set to true to allow the user to reveal the photo by clicking a button. Otherwise, set to false to hide the button. This parameter could be used to simply disable the photo drawer while allowing the station photo to be displayed in the background only.
- somId – System of measurement. Set to met to use Metric units for all data. Set to imp to use English units for all data.
- timeGeo – Set to true to show the station’s current time and geo coordinates. Otherwise, set to false to hide this information and render a smaller widget header.

Full URL example, current conditions only (click here to preview it):

https://mini.dendra.science/widgets/station?organizationId=58db17c424dc720001671378&stationId=58e68cabdf5ce600012602b8&dark=false&exploreData=true&include=current&lastSeen=false&outlined=true&photoBackground=true&photoDrawer=true&somId=met&timeGeo=true

Full URL example, forecast conditions with simple header and no Explore Data button (click here to preview it):

https://mini.dendra.science/widgets/station?organizationId=58db17c424dc720001671378&stationId=58e68cabdf5ce600012602b8&dark=false&exploreData=false&include=forecast&lastSeen=false&outlined=true&photoBackground=true&photoDrawer=false&somId=met&timeGeo=false

Example: Custom Configuration