How to embed interactive COVID-19 widget in your Shopify store
As the coronavirus impacts the world, we recognize the need to share the latest information. This widgets will allow any site to easily add an outbreak map, the latest case counts, and a chart displaying the spread over time. These elements are modular, giving sites the ability to customize the experience. The widgets is also responsive, adjusting automatically to desktop and mobile form factors.
Learn more on how to embed and customize the widgets for your needs below.
COVID19Ranking’s COVID-19 widget
Embed code is constructed from 3 lines: CSS for layout, DIV element where widget will be rendered and Javascript file that is required to grab and render the widget.
1 2 3 | <link rel="stylesheet" type="text/css" href="https://api.covid19ranking.com/css/covid19ranking-widget.css"/> <div class="covid19ranking blue covid-radius" data-country="Vietnam"></div> <script src="https://api.covid19ranking.com/js/covid19ranking.js"></script> |
Change data-country attribute value to the specific country name. E.g. If you would like to pull data for Vietnam you should:
1 | <div class="covid19ranking blue covid-radius" data-country="Vietnam"> |
You can see more options here.
Microsoft’s COVID-19 widget
You will simply need to add 2 lines of HTML code, a <div> including various widget parameters, and a <script>.
1 2 | <div class="bingwidget" data-type="covid19" data-market="en-us" data-language="en-us"></div> <script src="//www.bing.com/widget/bootstrap.answer.js" async=""></script> |
The widget is responsive, automatically resizing depending on the size of the parent HTML element. No additional settings control the width of the widget.
To learn more about the available configurations and parameters visit the widget GitHub page.
