Skip to content
Last updated

Widget migration guide

  1. Update name of the file:
<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 ++]
  1. Add widget-container attribute to the footer:
<footer widget-container> // [!code focus]
  <p>Some footer content</p>
</footer>
  1. Update all the buttons with checkStat=true attribute:
    <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-download-buttons" checkStat=true>Toggle Download Buttons</button>
        <button id="toggle-hide-info-section" checkStat=true>Toggle Hide Info Section</button>
            
        <b>Buttons section 2</b>
        <button id="toggle-hide-download-buttons" checkStat=true>Toggle Hide Download Buttons</button>
        <button id="toggle-hide-info-section-and-download-buttons" checkStat=true>Toggle Hide Info Section and Download Buttons</button>
            
    </div>
  1. Activate advanced mode - ensure to handle error in try..catch block:
  <body>
    <div id="main-content">
        <!--   Some content goes here     -->
        
        <b>Buttons section 1</b>    
        <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>
        <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>