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="//www.bing.com/widget/bootstrap.answer.js" async=""></script>

Example experience: See it live here.

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.

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

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.

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 [email protected] if this is a desired feature for your sites' widget implementation.

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

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

See it live here.

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

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="//www.bing.com/widget/bootstrap.answer.js" async=""></script>

See it live here.

<div class="bingwidget" data-type="covid19_map" data-market="en-us" data-language="en-us"></div>
  
<script src="//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="//www.bing.com/widget/bootstrap.answer.js" async=""></script>

See it live here.

<div class="bingwidget" data-type="covid19_trends" data-market="en-us" data-language="en-us"></div>
  
<script src="//www.bing.com/widget/bootstrap.answer.js" async=""></script>

See it live here.

<div class="bingwidget" data-type="covid19_stats_map" data-market="en-us" data-language="en-us"></div>
  
<script src="//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="//www.bing.com/widget/bootstrap.answer.js" async=""></script>

See it live here.

<div class="bingwidget" data-type="covid19_stats_trends" data-market="en-us" data-language="en-us"></div>
  
<script src="//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="//www.bing.com/widget/bootstrap.answer.js" async=""></script>

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="//www.bing.com/widget/bootstrap.answer.js" async=""></script>

Please email [email protected] with any issue reports.

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

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

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.