Accessibility links

Breaking News

Embed a visualization from Datawrapper


Pangea CMS allows you to embed a visualization from Datawrapper into any kind of text-based content (such as an article) or into an HTML widget.

What's inside this article:



Get embed code from Datawrapper

Before you can embed a visualization, you need to retrieve the embed code from Datawrapper.

Follow these steps:

  1. Sign in to Datawrapper.
  2. On the Dashboard, select the visualization that you want to embed.
  3. Select the Publish & Embed tab.
  4. Scroll to the Embed code. Ensure Responsive iframe is selected if you want the visualization to be displayed properly on devices with smaller screens (such as mobiles and tablets).
  5. Click the Copy icon to copy the embed code to your clipboard.

You can now embed the visualization into text-based content (such as an article) or into an HTML widget.



Embed a Datawrapper visualization into an article

Follow these steps:

  1. Create a new article or open the edit screen for an existing article. For detailed instructions, refer to the following article:
  2. From the Editor screen, click inside the main content text box, and select the Insert Embed Content icon in the CKEditor bar.
  3. Select the External media tab.
  4. Paste the embed code that you copied from Datawrapper, and click Attach.

On the Editor screen, you see a gray box with the text {Snippet} where the visualization is embedded. Click Save or Save & close to confirm and apply the changes.

If the status of the article is Published, you can click Live website in the top-right corner to check the article page on the public website. Regardless of the article status, you can use the options under Preview in the left panel to preview the page on devices with different screen sizes (desktop, tablet, or mobile).

NOTE: When you make changes to the visualization and then click Republish in Datawrapper, the changes are applied automatically wherever the visualization is embedded. This means that you do not need to manually embed the updated visualization again. However, it may take a few minutes for the embedded visualization to update.


Embed a Datawrapper visualization into an HTML widget

To embed a Datawrapper visualization via the Widget Settings screen for any HTML widget:

  1. In the Content box, click the Insert Embed Content icon.
  2. Click the Attach external media tab.
  3. Paste the embed code that you copied from Datawrapper, and click Search.
  4. Confirm that Datawrapper is listed next to Media Identifier, then click Attach.

In the Content box, you see a gray box with the text {Snippet} where the visualization is embedded. Click Save to confirm and apply the changes.

NOTE: When you make changes to the visualization and then click Republish in Datawrapper, the changes are applied automatically wherever the visualization is embedded. This means that you do not need to manually embed the updated visualization again. However, it may take a few minutes for the embedded visualization to update.


Further recommendations

To learn about embedding external media from other sources (such as Facebook, Twitter, and YouTube), refer to the following article:

Pangea CMS Guide

XS
SM
MD
LG