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.

DEMO

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.

Change data-country attribute value to the specific country name. E.g. If you would like to pull data for Vietnam you should:

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

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.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *