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 map of the topic that you have selected to show, and allows for the browsing of that topics most recent articles and videos. It is designed to be embedded either within the content itself or in a side bar, and can adapt how it looks depending on how much space you give it.
The widget and the transformation map will automatically adjust to the user's language and we currently support English, French, German, Portuguese, Spanish, Chinese (simplified), Japanese, Korean, Hindi and Arabic. Where the user's locale is set to a different language, the widget will default to English.
A user can interact with the widget as you can above, and if they click any of the 'view more' buttons, or the outer most topics on the map, they will be taken to 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.
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 a few business days. Please carefully note the application criteria before applying for a key. We receive many requests for keys and may not respond to requests which do not meet the criteria below:
- Your website must run securely using HTTPS with a valid certificate
- Your website must not be a conceptual prototype or be partially complete
- Your website must not 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
- Please note there may be a delay whilst we vet your submission prior to processing your API key
When entering your website URL, please feel free to use wildcards or comma separate different properties. For example,
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.
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.
Please note that if you want to add multiple widgets to the same page, you will need to use the iframe version for now. The web component version will not behave as expected if there are multiple widgets on the same page.
For webcomponents users/developers, you can follow these instructions to get started.
- Include script tag linking to the widget in the header of your website:
- Add web component to your page
<insi-widget topicid='<your-topic>' apikey='<your-api-key>' />
There are a lot more parameters that you can pass, but this is the most basic required ones. We have created special forms to help you customise your widget as an iframe here.
- 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.
- Because there are three different layouts of the widget, we would encourage you to try different variations and see what works for you and your site! In general, the narrow mode is good for having in the sidebar, next to for example an article, to allow the reader to link back to our page to explore the topic in more detail. The normal mode goes well between content, for example to allow a reader to explore the topic more between paragraphs of your content. The wide mode is great a covering the entire width of your page, and really allowing the reader to immerse themselves into the topic you want to highlight.