TWN Widgets

Usage Documentation

Seven different kinds of widgets, all fully responsive, are available for use. For usage documentation for AMP pages, click here. Adding widgets to a non-AMP page is a 3-step (or 2-step) process:

  1. Add the script loader tag to the head or body of your HTML page:
    <script type="text/javascript" src="https://pond-widgets.pelmorex.com/widget.min.js?cb=initWidgets" async defer></script>
  2. Define a callback function to initialize widgets. To update the widget without reloading the page, simply call the updatePlacecode method on the created widget
    
    <script type="text/javascript">
    	var theWidget; 
    
    	// Callback function to initialize the widget
    	function initWidgets() {
    		theWidget = twnWeatherWidget.initialize({
    			// an integer that defines the widget type to load (valid values are 1, 2 and 3)
    			widgetType: 1,
    			// the fully qualified URL for links back to parent page
    			ctaLink: "https://google.com",
    			// pos of the cta link. Valid values are 'left', 'right' and 'center'. Defaults to 'right'
    			ctaLinkPos: "left", 
    			// reference to the HTML element container where the widget will be displayed
    			target: '.target-container',
    			// the Pelmorex profiled location code for the city to display the widget for
    			placecode: 'INDL0011'
    		});
    	}
    
    	// This section is only required if you plan to update the widget without reloading the page
    	// Note: You might want to disable the submit button while the widget is updating and enable it when it's done
    	// Define selectors for the form field that is used to accept new placecodes
    	var selectors = {
    		formId: 'widget_update_form',
    		inputId: 'widget_update_form_input',
    		buttonId: 'widget_update_form_button'
    	};
    	document.addEventListener("DOMContentLoaded", function () {
    		document.getElementById(selectors.formId).addEventListener("submit", function() {
    			event.preventDefault();
    			var textInput = document.getElementById(selectors.input);
    			var newPlacecode = textInput.value || '';
    
    			if (theWidget && newPlacecode) {
    				theWidget.updatePlacecode(newPlacecode)
    					.then(function() {
    						console.log("widget has been updated...");
    					})
    					.catch(function(err) {
    						console.error(err);
    					});
    					
    			}
    		});
    	});
    </script>
    
    Note: The function initWidgets can be named however you want. The name, however, must be the same as the value of the cb query parameter of the script loader
  3. Inside initWidgets, invoke twnWeatherWidget.initialize to display a widget on your page
    To initialize multiple widgets, as seen on this page, call twnWeatherWidget.initialize multiple times

Change all widgets' location

Widget 1

Widget 2

Widget 3

Widget 4

Widget 5

Widget 6

Widget 7

Widget 8

Widget 9