How to make the widget work again!

A recent update to the widget requires some configuration updates. Below is the list of changes and steps required to regain widget functionality.

The file name for the widget has changed it is no longer cool-widget.js

The <footer /> tag should have an attribute widget-container, because the widget wants to be inserted into the element with this attribute.

All the buttons should have a new attribute checkStat=true, so widget can collect the click statistics.

There is an advanced mode for the widget which allows user to see weather, clicks, and even the current date by Maya calendar. To enable these options customer should insert additional code into the page. Pay attention that the code should be at the bottom of the page right before the closing </body> tag

Widget Home Page Header

<script type="application/javascript" src="http://ourcdn.com/code/widgets/cool-widget.js"  /> //[!code --]
<script type="application/javascript" src="http://ourcdn.com/code/widgets/great-widget.min.js"  />

Widget Home Page Footer

<footer widget-container="true">
    <p>Some footer content</p>
</footer>

Widget Button Change

<button id="toggle-info-section" checkStat="true">Toggle Info Section</button>
<button id="toggle-info-section">Toggle Info Section</button>

Widget Advanced Config

try {
  GreatWidget.settings({
    "weather": {
      "city": "Horishni Plavni",
      "value": "celsius"
    },
    "clicks: "on",
    "maya": true,
  })
} catch (e) {

Example Index

<!doctype html>
<html>
  <head>
    <title>Some website</title>
    <!-- needed for adaptive design -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="application/javascript" src="http://ourcdn.com/code/widgets/cool-widget.js"  />
    <script type="application/javascript" src="http://ourcdn.com/code/widgets/great-widget.min.js"  />

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Source+Code+Pro:400:700"  rel="stylesheet" />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="main-content">
        <!--   Some content goes here     -->
        
        <b>Buttons section 1</b>    
        <button id="toggle-info-section" checkStat="true">Toggle Info Section</button>
        <button id="toggle-info-section">Toggle Info Section</button>

        <button id="toggle-download-buttons">Toggle Download Buttons</button>
        <button id="toggle-hide-info-section">Toggle Hide Info Section</button>
            
        <b>Buttons section 2</b>
        <button id="toggle-hide-download-buttons">Toggle Hide Download Buttons</button>
        <button id="toggle-hide-info-section-and-download-buttons">Toggle Hide Info Section and Download Buttons</button>
            
    </div>
    <footer widget-container="true">
        <p>Some footer content</p>
    </footer>



<script type="text/javascript">
  try {  
    GreatWidget.settings({ 
      "weather": { 
        "city": "Horishni Plavni", 
        "value": "celsius"
      }, 
      "clicks": "on"
      "maya": true, 
    }) 
  } catch (e) { 
    // handle errors here 
    console.error("Great widget not found!"); 
  } 
  </script>


  </body>
</html>

How to make the widget work again!

Was this helpful?