Getting started

Let's have a look at the widget. You can see it embedded in this documentation below (this is actually the widget, not just an image).

The widget shows a thumbnail of the most relevant transformation map for the content you want to show alongside it. It is designed to be embedded either within the content itself or in a side bar.

The widget and the transformation map will automatically adjust to the user's language and we currently support English, Portuguese, Japanese, Spanish, Chinese (simplified), Arabic and French. Where the user's locale is set to a different language, the widget will default to English.

When the user clicks on the widget, they will be taken to the corresponding transformation map on the Strategic Intelligence website. Please note that we will pass UTM campaign parameters to the Strategic Intelligence website for our own analytics purposes. These include your website's domain name, your API key and the page on your website on which the widget was embedded.

The widget works best when displayed alongside content about which the user would like to understand the broader context. For example, have a look at this article on the World Economic Forum's website which discusses Gender Parity. You can see the widget in the left hand panel which allows users to find out more on the topic.

Obtaining an API key

Before you can use the widget, you'll need to apply for an API key which you will pass as a parameter when you instantiate the widget. Please do not try to copy the API key we use for example purposes on this website. It will not function correctly for your website. Instead, use the form below to request an API key in order to identify yourself. We aim to reply within 24 hours but typically you will hear from us much sooner.

Please note we do not provide API keys for personal homepages, websites that do not run securely over https, websites that are conceptual prototypes/not finished, or sites that spam or aim to mislead users. Please try to submit your key request from an email address with the same domain name as the website where you intend to host the widget, wherever possible.

When entering your website URL, please feel free to use wildcards or comma separate different properties. For example, *.mysite.org or this.mysite.org, that.mysite.org or even live.mysite.org, staging.mysite.org, production.mysite.org. We will also automatically whitelist localhost to allow traffic from local development environments, so there is no need to add that explicitly.

Once you receive an API key from us, you will pass it to the widget as a parameter, as explained on our Configuration page.

Installation

We use the newer, and more secure webcomponents technology for the widget and have included some basic instructions on how to use this below. However, we recognise that many platforms such as WIX.com and Wordpress tend to offer the option to embed via an iframe. If you would like further information on how to embed the widget as an iframe, please see our dedicated page.

For webcomponents users/developers, you can follow these instructions to get started.

  1. Include script tag linking to the widget in the header of your website:
<head>
   <script
      type="text/javascript"
      src="https://cdn.intelligence.weforum.org/latest.js"
    ></script>
</head>
  1. Add web component to your page
<intelligence-widget apikey="my-api-key" text="text" language="en" />

Notes

  1. The widget will expand to fill its container, allowing full control on the part of the developer. That said, we recommend using a container width of around 350-400px and a minimum of 300px. For example:
<style>
  .my-container {
      width: 400px;
    }
</style>

<div class="my-container">
  <intelligence-widget apikey="my-api-key" text="text" language="en" />
</div>
  1. The widget supports the changing of background colour through the use of an enclosing div tag and css. For example:
<style>
  .my-container {
      width: 400px;
      background-color: lightgray; 
    }
</style>

<div class="my-container">
  <intelligence-widget apikey="my-api-key" text="text" language="en" />
</div>

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