widget.vpn.com

Builder Widgets

builder/counter-builder - Compose new counter widgets
builder/widget-builder - Compose new widgets

Counter Widgets

counter/cybercrime - Cost of cybercrime annually, monthly, weekly, today
counter/devices-hacked - Number of devices hacked annually, monthly, weekly, today
counter/identities-stolen - Number of identities stolen annually, monthly, weekly, today

Domain Widgets

domain/whois - WHOIS information on a domain with lookup
domain/dns - DNS records for a domain with lookup

Geoip Widgets

geoip/city - Display user's city and ip address
geoip/continent - Display user's continent and ip address
geoip/country - Display user's country and ip address
geoip/currency - Display user's currency and ip address
geoip/device-type - Display user's device type and ip address
geoip/dns - Display user's DNS and ip address
geoip/exact-location - Display user's exact location with latitude and longitude and ip address
geoip/ip - Display user's ip address
geoip/isp - Display user's ISP and ip address
geoip/location - Display geographical information about an end user's ip address
geoip/os - Display user's operating system and ip address
geoip/region - Display user's region name and ip address
geoip/time-zone - Display user's time zone and ip address
geoip/zipcode - Display user's zipcode and ip address

Speed Widgets

speed/speedtest - Speedtest

Weather Widgets

weather/current - Display current weather
weather/national-alerts - Display national weather alerts
weather/forecast-1hour - Display 1 hour forecast
weather/forecast - Display up to 16 day forecast (or horizontal layout)
Forecasts can be scrollable. See these examples: vertical scroll-days and horizontal scroll-days.

Embed a 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="geoip/location"
  ></div>

Example

Optional attributes

class - You may assign any additional css classes to the containing div as you'd like.
border-color - You may specify a border color without using custom css. This value will be overridden by a style, if selected. You may specify a color or a hex triplet.
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.
units - For Weather widgets only you may choose 'imperial' or 'metric'.
layout - For some Weather widgets only you may choose 'vertical' (default) or 'horizontal'.
days - For Weather forecasts the number of days to show beginning with today.
scroll-days - For Weather forecasts limit the number of visible days and scroll the remainder.

Internationalization

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

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="geoip/location">Loading...</div>

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