BETA - Interactive Widget
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 email@example.com.
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:
The following parameters are accepted by the widget.
|API 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.|
|ID of a topic.||Required. The transformation map correpsonding to that topic that you want to display. The |
|The 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"|
|The 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"|
|The 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"|
|Choose 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"|
|Choose 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"|
|The 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]"|
|The 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"|
|Choose 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"|
|Choose which language the content should be in.||Supported languages are "en", "pt", "zh", "es", "ja", "ar", "fr", "de", "hi" and "ko". Defaults to "en"|
|Choose which mode to show the widget it||This 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"|
|The 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|
|The 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|
|The 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|
|The 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|
|The 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|
|The 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|
|The 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"|
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.With the basic configurations from above and depending on your topic, your widget will look something like this:
This form shows you all the different parameters that the widget supports. Use this to fully customise the widget to fit your needs!
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!
In order to register the web component, you will need to add this to your html
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>