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 one of the three available options for specifying the topic to display:

  • the topic name;
  • the URL of an article to process and determine the most relevant topic for;
  • the ID of a topic.

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

Hint: if you are entering a topic name, please enter it exactly as you see it on the Strategic Intelligence website, for example Agriculture, Food and Beverage, or COVID-19.

Configuring the iFrame

Reminder: specify only one of Topic name, Link URL or Topic ID. See the configuration page to learn more about these options.

Your embed code will appear here after entering details above

Worked example

Here's how your embed code might look after using the generator above, in case you are having difficulties and need something to compare with (note: the value of apikey would need replacing with your own API key for this to work):

<iframe
  src="https://cdn.intelligence.weforum.org/iframe.html?topicid=a1Gb00000015MIVEA2&apikey=my-api-key&openinnewwindow=true"
  style="border:0px solid white;"
  name="intelligenceWidgetIframe"
  scrolling="no"
  frameborder="0px"
  marginheight="0px"
  marginwidth="0px"
  height="300px"
  width="300px"
></iframe>

Note: you can adjust the height and width parameters to suit your website. Some website builders like wix.com let you do this by dragging the frame, others may need you to adjust those parameters to fit the widget nicely within your website's layout.

Advanced usage

You can use all of the configuration options documented on the configure page, but rather than setting them as attributes of a webcomponent, you can pass them as query parameters in the source url of the iframe. For example:

<intelligence-widget apikey="my-api-key" link="http://my.website.url"></intelligence-widget>

becomes:

<iframe src="https://cdn.intelligence.weforum.org/iframe.html?apikey=my-api-key&link=http://my.website.url">
...
</iframe>

The widget also supports the styling parameters which are documented on the styling page. To use these, again, just pass them as query parameters in the source url of the iframe but remove the preceding "--" and substitute the colon (:) for an equals sign (=). So for example:

<style>
  intelligence-widget {
    --textColor: darkGrey;
    --thumbnailRadius: 5px;
    --fontFamily: Biotif, sans-serif;
    }
</style>

becomes:

<iframe src="https://cdn.intelligence.weforum.org/iframe.html?apikey=my-api-key&link=http://my.website.url&textcolor=darkGrey&thumbnailradius=5px&fontfamily=Biotif, sans-serif">
...
</iframe>

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.
  • We recommend placement of the widget in a sidebar, alongside some content on the same topic, so that users can use the widget to learn more on the topic should they wish.
  • To provide adequate contrast against the background colour of your website, you may need to use the textColor option described on our styling page. We kindly ask you don't do anything too radical with this - stick to black, grey or white if possible.