Copy & paste our One Hour Forecast Widget:

How To Embed Our One Hour Forecast Widget

To embed a widget you must first include this line of code one time in your web page:

  <script src="https://widget.vpn.com/vpn-widget.js"></script>

To place an embeddable widget in your web page create a div with class=”vpn-widget” and type=”[widget name]”

  <div
    class="vpn-widget"
    type="weather/forecast-1hour"
  ></div>

Optional Attributes

• class – You may assign any additional css classes to the containing div as you’d like.
• style – Because the widget is embedded in a <div> element you may specify your own styling for the contents of that div.
• width – To size the widget specify the width attribute. The height will be calculated based on the width specified.
• lang – Translate the widget to a specific language e.g. en, it, es.

Internationalization

By default the browser language will be used to translate each widget. You may override this with the `lang` optional attribute.

One Hour Forecast Widget Styling

Widgets contain their own individual styling but you can use CSS to extend and override those styles. Widgets are wrapped in their own div which will be placed inside the div on your web page.

For instance, to change the widget title to red do so in a style and assign the class to your containing div:

  <style>
    .red-header header {
        color: red;
    }
  </style>

  <div class="vpn-widget red-header" type="weather/forecast-1hour">Loading...</div>

Use the !important css directive to do a hard override of any css style.