## Widget migration guide

1. The name of the file in widget url should be `great-widget.min.js` instead of `cool-widget.js`.



```html
<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.



```html
// [!code word:widget-container]
<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.



```html
<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!



```html 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]
```