Logo

Configuration

The following parameters are accepted by the widget. Note that the apikey and topicid are the only required parameters.

ArgumentDescriptionNote
apikeyAPI key to authenticate your websiteRequired. 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 topicRequired. 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 labelThis 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 headerThis 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 buttonThis 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 collapsedNot 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 initiallyNot 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 highlightThis 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 showThis 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 mapThis 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 inThis will set the language of the topic map, and headers/ text seen in the widget. It does not guarantee that the articles presented will only be in this language however. 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 beThis 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 colourThis 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 colourThis 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 colourThis 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 colourThis 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 colourThis 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 woff2This 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"

Styles

The styles of the widget can be altered quite considerably using the parameters above. Here is an index of the different parameters.