Bing COVID-19 Widget

As the coronavirus impacts the world, we recognize the need to share the latest information outside of Bing. This widget 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 widget is also responsive, adjusting automatically to desktop and mobile form factors. Learn more on how to embed and customize the widget for your needs below.

By using the widget, you agree to be subject to the terms of use listed here.

Example code:

<div class="bingwidget" data-type="covid19" data-market="en-us" data-language="en-us"></div>

<script src="https://github.com/microsoft/COVID-19-Widget/raw/master//www.bing.com/widget/bootstrap.answer.js" async=""></script>

Example experience: See it live here.

How can I embed the widget on my site?

You will simply need to add two lines of HTML code, a <div> including various widget parameters, and a <script>. At the bottom of this readme are code examples for the various supported configurations. Each configuration is a combination of three supported modules: an Outbreak Map Module showing the worldwide spread of the virus, a Data Stats Module, which displays the case count information for a given location, and a Trends Chart Module showing the spread of the virus in a location over time. Note that the Trends Chart Module has limited market support at this time.

How do I select a widget configuration?

You are able to select your widget configuration with the data-type parameter. We support the following values:

In addition to these data-type options, you can also stack multiple widget on top of each other by including multiple <div> lines and only one <script>.

How do I select the market and language?

The data-market and data-language parameters control the market and language of the widget respectively. The data-market refers to the country/region the widget will optimize for. The data-language refers to the UI display language in which the widget will display the UI string resources. Typically you will have the data-market and data-language set to the same parameter value, however, there are cases where they would differ. For example, you can have a user in the United States who speaks Spanish. In this case you can set the data-market to en-US and the data-language to es-ES. We support the following values for data-market and data-language:

• Markets with an asterisk (*) do not support the data-type of covid19_stats_trends currently.

How do I specify a location for the widget to load?

The data-location-id parameter allows you to set location based on a set of available “/Country/Region" combinations. Setting the data-location-id will update all modules with the specified location's data. A list of the supported locations is available in the AllLocations.txt file. If no data-location-id is set, the default is the global view. You can also select a global view for the data-location-id parameter with a value of "/".

The Bing COVID-19 Widget team is also exploring adding support for location selection by latitude and longitude values. Please email bingcovidwidget@microsoft.com if this is a desired feature for your sites' widget implementation.

How do I select the widget size?

The widget is responsive, automatically resizing depending on the size of the parent HTML element. No additional settings control the width of the widget.

Widget examples

By using the widget, you agree to be subject to the terms of use listed here.

Widget Default

See it live here.

<div class="bingwidget" data-type="covid19" data-market="en-us" data-language="en-us"></div>

<script src="https://github.com/microsoft/COVID-19-Widget/raw/master//www.bing.com/widget/bootstrap.answer.js" async=""></script>

Default widget example setting language and market to Japanese in Japan. See it live here.

<div class="bingwidget" data-type="covid19" data-market="ja-jp" data-language="ja-jp"></div>

<script src="https://github.com/microsoft/COVID-19-Widget/raw/master//www.bing.com/widget/bootstrap.answer.js" async=""></script>

Widget with only Map

See it live here.

<div class="bingwidget" data-type="covid19_map" data-market="en-us" data-language="en-us"></div>

<script src="https://github.com/microsoft/COVID-19-Widget/raw/master//www.bing.com/widget/bootstrap.answer.js" async=""></script>

Map only widget example specifying location of Italy. See it live here.

<div class="bingwidget" data-type="covid19_map" data-market="en-us" data-language="en-us" data-location-id="/Italy"></div>

<script src="https://github.com/microsoft/COVID-19-Widget/raw/master//www.bing.com/widget/bootstrap.answer.js" async=""></script>

Widget with only Trends

See it live here.

<div class="bingwidget" data-type="covid19_trends" data-market="en-us" data-language="en-us"></div>

<script src="https://github.com/microsoft/COVID-19-Widget/raw/master//www.bing.com/widget/bootstrap.answer.js" async=""></script>

Widget with Stats and Map

See it live here.

<div class="bingwidget" data-type="covid19_stats_map" data-market="en-us" data-language="en-us"></div>

<script src="https://github.com/microsoft/COVID-19-Widget/raw/master//www.bing.com/widget/bootstrap.answer.js" async=""></script>

Stats and Map widget example specifying location of United States. See it live here.

<div class="bingwidget" data-type="covid19_stats_map" data-market="en-us" data-language="en-us" data-location-id="/United States"></div>

<script src="https://github.com/microsoft/COVID-19-Widget/raw/master//www.bing.com/widget/bootstrap.answer.js" async=""></script>

Widget with Stats and Trends

See it live here.

<div class="bingwidget" data-type="covid19_stats_trends" data-market="en-us" data-language="en-us"></div>

<script src="https://github.com/microsoft/COVID-19-Widget/raw/master//www.bing.com/widget/bootstrap.answer.js" async=""></script>

Stats and Trends widget example specifying location of Texas. See it live here.

<div class="bingwidget" data-type="covid19_stats_trends" data-market="en-us" data-language="en-us" data-location-id="/United States/Texas"></div>

<script src="https://github.com/microsoft/COVID-19-Widget/raw/master//www.bing.com/widget/bootstrap.answer.js" async=""></script>

Widget with Multiple Modules Examples

See it live here.

<p>Covid Modules Stats, Map, Trends</p>
<div class="bingwidget" data-type="covid19_modules" data-modules='[{"_type": "stats", "location-id":"/United States/New York"}, {"_type": "stats", "location-id":"/United States"}, {"_type": "stats", "location-id":"/"}, {"_type": "trends", "location-id":"/United States"}, {"_type": "map", "location-id":"/United States/New York"}]'></div>

<p>Covid Modules Stats</p>
<div class="bingwidget" data-type="covid19_modules" data-modules='[{"_type": "stats", "location-id":"/Spain"}, {"_type": "stats", "location-id":"/Italy"}, {"_type": "stats", "location-id":"/United States"},  {"_type": "stats", "location-id":"/"}]'></div>

<p>Covid Modules Map</p>
<div class="bingwidget" data-type="covid19_modules" data-modules='[{"_type": "map", "location-id":"/United States/New York"}]'></div>

<p>Covid Modules Trends</p>
<div class="bingwidget" data-type="covid19_modules" data-modules='[{"_type": "trends", "location-id":"/United States"}]'></div>

<script src="https://github.com/microsoft/COVID-19-Widget/raw/master//www.bing.com/widget/bootstrap.answer.js" async=""></script>

How can I report issues found with the widget?

Please email bingcovidwidget@microsoft.com with any issue reports.

Known Issues:

• The text “Powered by Bing” and “Explore more on Covid-19 tracker” seen in the widget are new additions to the widget and the strings are still being translated into the languages we support.
• There is additional white colored padding around the widget that can be seen on sites with a colored background.

Where is the widget data from and how often does it update?

The widget refreshes approximately every ten minutes with data from an aggregate of sources Bing is consuming. Data may not change with every refresh.

Can I download the source data?

Bing is making our COVID-19 data available for educational and academic purposes. Get the data and learn more at the Bing COVID-19 Data GitHub page.