Embedding using iframes

Although we use the newer, and more secure webcomponents technology for the widget, we have an iframe wrapper available which can help users who are using legacy platforms that do not yet support webcomponents. You can see how the iframed widget looks below (this is actually an iframe, not just an image):

To embed the iframe version of the widget, you just need to enter your API key and the ID of the topic.

If you need an API key, please visit the Getting Started page.

Configuring the iFrame

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.

The topicid can be found for any given topic by examining the URL at https://intelligence.weforum.org. Here, 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 has to be passed as a parameter to the widget as follows: topicid="a1Gb00000015HiiEAE"

Your API key ('apikey') - required

Topic id, e.g. a1G0X000006O06IUAS - required
You topic id is found in the url of the topic on Strategic Intelligence
e.g. https://intelligence.weforum.org/topics/a1G0X000006O06IUAS

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!

The topicid can be found for any given topic by examining the URL at https://intelligence.weforum.org. Here, 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 has to be passed as a parameter to the widget as follows: topicid="a1Gb00000015HiiEAE"

Your API key ('apikey') - required

Topic id, e.g. a1G0X000006O06IUAS - required
You topic id is found in the url of the topic on Strategic Intelligence
e.g. https://intelligence.weforum.org/topics/a1G0X000006O06IUAS

Label text - optional

Header text - optional

Button text - optional

Words to highlight in the header, starting at 0. E.g. [0,2,3] - optional

Initial index - optional

Show explore navigation buttons - optional

Language - optional

Mode - optionalNarrowNormalWide

Font family source - optional

Wrapper Colour - optional

Primary Colour - optional

Secondary Colour - optional

Tertiary Colour - optional

Header Colour - optional

Subtitle Colour - optional

Your embed code will appear here after entering details above

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