Migration guides
/
Widget migration guide
Last updated

Widget migration guide

  1. The name of the file in widget url should be great-widget.min.js instead of cool-widget.js.
<script src="http://ourcdn.com/code/widgets/cool-widget.js" type="application/javascript"></script> // [!code --]
<script src="http://ourcdn.com/code/widgets/great-widget.min.js" type="application/javascript"></script> // [!code ++]
  1. The <footer /> tag should have an attribute widget-container, because the widget wants to be inserted into the element with this attribute.

<footer widget-container> // [!code focus]
  <p>Some footer content</p>
</footer>
  1. All the buttons should have a new attribute checkStat=true, so widget can collect the click statistics.
<div id="main-content">
  <!--   Some content goes here     -->
  
  <b>Buttons section 1</b>    
  <button id="toggle-info-section">Toggle Info Section</button> // [!code --]
  <button id="toggle-download-buttons">Toggle Download Buttons</button> // [!code --]
  <button id="toggle-hide-info-section">Toggle Hide Info Section</button> // [!code --]
  <button id="toggle-info-section" checkStat=true>Toggle Info Section</button> // [!code ++]
  <button id="toggle-download-buttons" checkStat=true>Toggle Download Buttons</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-info-section-and-download-buttons">Toggle Hide Info Section and 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" checkStat=true>Toggle Hide Info Section and Download Buttons</button> // [!code ++]
</div>
  1. 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 tag! Also, do not forget to point that there is a block where we catch unexpected advanced mode errors!
advanced widget
  <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> // [!code warning]
Previous page
Next page