Skip to content
Last updated

Migration guide

  1. Rename cool-widget.js to great-widget.min.js.

    index.html
        <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> // [!code --]
    <script type="application/javascript" src="http://ourcdn.com/code/widgets/great-widget.min.js"></script> // [!code ++]
    <link

  2. The footer tag should have the widget-container attribute, as in the following example:

    index.html
    
 <footer widget-container> // [!code focus]
     <p>Some footer content</p>
 </footer>

  3. Set checkStat=true attribute for all buttons, , so widget can collect the click statistics.

    index.html
            <b>Buttons section 1</b>

        <button id="toggle-info-section">Toggle Info Section</button> // [!code --]          
        <button id="toggle-info-section" checkStat=true>Toggle Info Section</button> // [!code ++]
        <button id="toggle-download-buttons">Toggle Download Buttons</button> // [!code --]
        <button id="toggle-download-buttons" checkStat=true>Toggle Download Buttons</button> // [!code ++]
        <button id="toggle-hide-info-section">Toggle Hide Info Section</button> // [!code --]
        <button id="toggle-hide-info-section" checkStat=true>Toggle Hide Info Section</button> // [!code ++]
            
        <b>Buttons section 2</b>
        <button id="toggle-hide-download-buttons">Toggle Hide Download Buttons</button> // [!code --]
        <button id="toggle-hide-download-buttons" checkStat=true>Toggle Hide Download Buttons</button> // [!code ++]
        <button id="toggle-hide-info-section-and-download-buttons">Toggle Hide Info Section and Download Buttons</button> // [!code --]
        <button id="toggle-hide-info-section-and-download-buttons" checkStat=true>Toggle Hide Info Section and Download Buttons</button> // [!code ++]

  4. To enable advanced options insert the following code into your index.html page at the bottom of the page, right before the closing <body> tag, as in the following example:

    index.html
            <p>Some footer content</p>
    </footer>
    <script type="text/javascript">     
      try {                             
        GreatWidget.settings({          
          "weather": {                  
            "city": "Horishni Plavni",  
            "value": "celsius"
          },                            
          "clicks: "on",                // [!code ++]
          "maya": true,                 
        })                              
      } catch (e) {                     
        // handle errors here           
        console.error("Great widget not found!"); 
      } 
    </script>
  </body>
</html>

    Note the catch block for advanced mode errors:

    index.html
         })
  } catch (e) {  
    // handle errors here
    console.error("Great widget not found!");
  }
</script>