Logo

BETA - Interactive Widget

Get started

This documentation is in development and only relevant to organisations helping pilot the new widget and who have been issued with an API key in the new format. If you would like to express an interest in helping us pilot this, please contact us at intelligence@weforum.org.

The new interactive widget offers you a more detailed look at what Strategic Intelligence has to offer. It offers enhanced interactivity and configuration options, different layouts and the ability to preview content as well as the maps. We also plan to offer a special version for enterprise use. Below are some examples of how it looks when embedded:

Iframe version

Wide mode

Normal mode

Narrow mode

Configuration Parameters

The following parameters are accepted by the widget.

ArgumentDescriptionNote
apikeyAPI key to authenticate your website.Required. See our Getting Started page for details on how to get one. Note: 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.
topicidID of a topic.Required. The transformation map correpsonding to that topic that you want to display. The topicid can be found for any given topic by examining the URL at https://intelligence.weforum.org and you will find they correspond to the following format: https://intelligence.weforum.org/topics/topicID, for example https://intelligence.weforum.org/topics/a1Gb00000015HiiEAE. In this example, a1Gb00000015HiiEAE is the topicid and hence can be passed as a parameter to the widget as follows: topicid="a1Gb00000015HiiEAE"
labeltextThe text in the widget label.This is the text that goes in the upper label of the widget. See the relating image to see where the label is located. This expects a normal string, e.g. labeltext="I am label text"
headertextThe text in the widget header.This is the text in the main label of the widget. See the relating image to see where the header is located. This expects a normal string, e.g. headertext="I am header text"
buttontextThe text in the collapsed widget button.This is the text in the collapsed versions button. This expects a normal string, e.g. buttontext="I am button text"
iscollapsableChoose whether the widget can be collapsed.Not supported in the iframe version! This decides whether the widget can be collapsed or not. This defaults to be be false. This expects a boolean as a string, e.g. iscollapsable="true"
isinitialisedcollapsedChoose whether the widget should be collapsed initially.Not supported in the iframe versions! This decides whether the widget will be collapsed initially or not. This defaults to false. If iscollapsable="false", the value passed here will be ignored. This expects a boolean as a string, e.g. isinitialisedcollapsed="true"
positionofwordstohighlightThe words in the title to highlight.This value gives the option to highlight certain words in the header text, if wanted. It is 0 indexed, meaning that the first word is counted as 0, the second as 1 etc. This expects an array passed as a string, e.g. positionofwordstohighlight="[0,3,4]"
initialindexThe index of the first page to show.This represents the first page that will be shows when the widget loads. This value is 0 indexed, meaning that the first slide (with the map on it) it number 0. This value defaults to 0. It expects a number passed as a string, e.g. initialindex="2". The permitted values are, "0", "1", "2", "3"
showexplorenavigationbuttonsChoose whether the widget shows navigation buttons on the transformation map.This represents whether you want the exploration buttons for navigating the transformation to show or now. The map can still be navigated by clicking on it. This value defaults to true. This value expects a boolean passed as a string, e.g. showexplorenavigationbuttons="false"
languageChoose which language the content should be in.Supported languages are "en", "pt", "zh", "es", "ja", "ar", "fr", "de", "hi" and "ko". Defaults to "en"
modeChoose which mode to show the widget itThis value can either be "auto", narrow", "normal" or "wide". It defaults to "auto". If set to auto mode, it will decide itself which mode to put itself into, depending on how much width it is given. This value expects a string, e.g. mode="wide"
wrappercolorThe colour you want the wrapper to be.This value must be a valid colour, e.g. wrappercolor="red" or wrappercolor="#ffffff". See the relating image to see which colour is being referred to here
primarycolorThe colour you want as the primary colour.This value must be a valid colour, e.g. primarycolor="red" or primarycolor="#ffffff". See the relating image to see which colour is being referred to here
secondarycolorThe colour you want as the secondary colour.This value must be a valid colour, e.g. secondarycolor="red" or secondarycolor="#ffffff". See the relating image to see which colour is being referred to here
tertiarycolorThe colour you want as the tertiary colour.This value must be a valid colour, e.g. tertiarycolor="red" or tertiarycolor="#ffffff". See the relating image to see which colour is being referred to here
headercolorThe colour you want as the header colour.This value must be a valid colour, e.g. headercolor="red" or headercolor="#ffffff". See the relating image to see which colour is being referred to here
subtitlecolorThe colour you want as the subtitle colour.This value must be a valid colour, e.g. subtitlecolor="red" or subtitlecolor="#ffffff". See the relating image to see which colour is being referred to here
fontfamilysrcThe place where your fonts can be downloaded from. Currently only supports woff2.This value must be the string from where your fonts can be downloaded. We currently only support the use of one woff2 font. The fonts will default to Helvetica Neue. This expects a string pointing to the fonts, e.g. fontfamilysrc="https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2"

Basic version

If you want to build the basic version of the iframe, there is a form to help you generate it below. This is ideal if you simply want to add the SI map to your website without changing anything about it. If you want to see all the possible parameters you can change, have a look at the advanced version bellow.

Your embed code will appear here after entering details above
With the basic configurations from above and depending on your topic, your widget will look something like this:

Advanced version

This form shows you all the different parameters that the widget supports. Use this to fully customise the widget to fit your needs!

Your embed code will appear here after entering details above

Web component

There is also a web component way of implementing the widget! It brings the added benefit of being able to open and close the widget, using the iscollapsable parameter - the iframe version cannot do this due to technical constraints!

Usage instructions

In order to register the web component, you will need to add this to your html

<script type="text/javascript" src="https://cdn.intelligence.weforum.org/insiw/v1/index.js"> </script>

After that, you should be able to use it as a normal html element. To run:

<insi-widget
  topicid='a1G0X000006O06IUAS'
  labeltext='Alliance for Clean Air'
  headertext='A corporate movement for clean air to accelerate climate action and create healthy communities around the world'
  positionofwordstohighlight='[13,14]'
  buttontext='Show more'
  isinitialisedcollapsed='false'
  iscollapsable='true'
  primarycolor='rgb(30, 30, 30)'
  secondarycolor='rgb(242, 219, 114)'
  wrappercolor='black'
  headercolor='white'
  subtitlecolor='lightgrey'
  initialindex='0'
  apikey='your-api-key'
  showexplorenavigationbuttons='false'
  language='en'
  mode='narrow' ></insi-widget>