Logo

Embedding our COVID-19 widget

The spread of COVID-19 demands global cooperation among governments, international organizations and the business community. This multistakeholder cooperation is at the centre of the World Economic Forum’s mission as the International Organization for Public-Private Cooperation.

Our widget can easily be configured to display our special COVID-19 transformation map on your intranet or website, enabling your employees or stakeholders one-click access to the transformation map and the latest curated articles. In order to accelerate learning and knowledge across the world, we have also removed the need to register in order to view this map for users that land there from the widget. Here's what the widget looks like:

Embedding the widget and configuring for COVID-19 is no different to configuring the widget for any other topic, you just need to configure with a topicid of a1G0X000006O6EHUA0 or set the text parameter to COVID-19.

We offer two options for embedding the widget:

iframe

This is a legacy technology but is widely used for blogs and websites and aimed at non-developers. If you are using products like Wordpress or wix.com, this is proabably the simplest option for you. We have a dedicated page on using iframes and you can request an API key on the getting started page. To get started, you can simply copy and paste the code below and substitute your API key in place of the text my-api-key (be careful to leave the speech mark " in place just after it which closes the src tag):

<iframe
  src="https://cdn.intelligence.weforum.org/iframe.html?openinnewwindow=true&text=COVID-19&apikey=my-api-key"
  style="border:0px solid white;"
  name="intelligenceWidgetIframe"
  scrolling="no"
  frameborder="0px"
  marginheight="0px"
  marginwidth="0px"
  height="300px"
  width="300px"
  >
</iframe>

You'll see we use the text=COVID-19 parameter in the above example. You can use topicid=a1G0X000006O6EHUA0 instead if you prefer.

You might like to explore our iframes documentation further which will explain to you how to change the dimensions of the widget, along with the colours and fonts etc.

WebComponent

This is a modern technology but you may need a tiny bit of development experience to use it. If you are a developer or understand how to code in HTML then this is the one for you.

You can find out more about configuring parameters in the widget in the configuration section of our documentation.

To begin, make sure you have an API key and have read how to embed the widget by reviewing the getting started section of our documentation.

We've provided a worked example of how to embed the COVID-19 map specifically below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Embed this script tag in the header section of your HTML -->
     <script
      type="text/javascript"
      src="https://cdn.intelligence.weforum.org/latest.js"
    ></script>
  </head>

  <body>
    <!-- Embed the widget in the appropriate place on your website -->
    <!-- Be sure to replace "my-api-key" with your own -->
    <intelligence-widget
      apikey="my-api-key"
      topicid="a1G0X000006O6EHUA0"
    >
    </intelligence-widget>
  </body>
</html>

You'll see we use the topicid="a1G0X000006O6EHUA0" parameter in the above example. You can use text="COVID-19" instead if you prefer.

You might like to explore the configure page further which will explain to you how to change the dimensions of the widget, along with the colours and fonts etc.

Guidelines

  • If you intend to wrap the widget with a heading of some kind which refers to the World Economic Forum, we would kindly appreciate it if you could refer to us as "World Economic Forum" rather than "WEF". In general, there is no need though as the widget itself includes the World Economic Forum's logo to identify the source.
  • We recommend placement of the widget in a sidebar, alongside some content on the same topic, so that users can use the widget to learn more on the topic should they wish.
  • To provide adequate contrast against the background colour of your website, you may need to use the --textColor or textColor option (depending on whether you are embedding as a webcomponent or iframe) described on our styling page. We kindly ask you don't do anything too radical with this - stick to black, grey or white if possible.