- What's inside this article:
- Basic information
- Get the embed code from Datawrapper
- Insert using only the embed code
- Publish as a snippet
- Publish as a dynamic infographic
Basic information
User groups: Contributor_2020, Journalist_2020, Editor_2020, Master Editor_2020
About user groups
This article describes the different methods for publishing Datawrapper visuals on your website.
Datawrapper is an online tool for creating interactive charts, maps, and tables without coding. If you have a Datawrapper account, sign in using the link below:
Three methods are available:
- Insert using only the embed code: Quickly insert a visual on one text content page.
- Publish as a snippet: Create a reusable content item. Different Pangea CMS users can insert the same snippet on multiple text content pages.
- Publish as a dynamic infographic: Create a reusable content item that also has a standalone content page.
For all three methods, you need the embed code from Datawrapper.
Get the embed code from Datawrapper
Before publishing a Datawrapper visual, you need to get the embed code from Datawrapper:
- Sign in to Datawrapper using the link below:
- Select the visual you want to use.
- Select Copy embed code > Responsive Iframe.
The embed code is copied to your clipboard.
For more information, see the following article from the Datawrapper Academy:
Insert using only the embed code
You can insert the visual on a text content page using only the embed code.
This is the quickest way to publish a visual. It is ideal for visuals that only need to be shared on one page.
TIP: If the visual needs to be shared on more pages, publish it as a snippet.
Using an embed code, you can insert your visual on the following text content pages:
- Article, Blog, Factcheck, Feature, Feature story, Live blog, News, Transcript
On the edit page for the text content:
- Open Editor.
- In the content box, position the cursor where you want to insert the visual.
- Select the Insert embedded content button in the toolbar.
- On the Search & attach dialog, select External media.
- Paste the embed code from Datawrapper. Click Attach.
You see a placeholder representing the visual in the content box.
For detailed instructions on how to insert external media using an embed code, see the following article:
Publish as a snippet
You can publish a Datawrapper visual as a reusable snippet. After you publish a snippet:
- Journalists can insert the snippet as a direct embed on multiple text content pages.
- The snippet does not have a standalone content page. Search engines do not index it.
This method is ideal for simple visuals that need to be shared on multiple pages.
Follow these steps:
Create a snippet
Go to Create > Interactive > Snippet.
A dialog opens, which guides you through the required settings one step at a time. Complete the required settings and then save your new snippet:
- Layout: Keep Blank with analytics selected. This ensures that engagement with the snippet can be properly tracked through tools such as Adobe Analytics.
- Title: Add a title to help other Pangea CMS users identify the snippet. The title is not publicly visible and does not appear on the published snippet.
- Code: Paste the embed code from Datawrapper.
After pasting the embed code, click Save.
Confirm automatic approval
Snippets that use Datawrapper code do not need approval. Pangea CMS automatically recognizes and approves Datawrapper code.
After you click Save, Pangea CMS automatically checks for Datawrapper code. If Pangea CMS confirms that the code comes from Datawrapper, you see a dialog with the following message:
- Snippet auto-approved
Click OK to close the dialog.
The dialog closes and the edit page for the snippet opens. On the edit page, you see the Approved badge. You can publish the snippet directly without requesting approval.
For detailed instructions on how to create a snippet, see the following article:
Publish as a dynamic infographic
You can publish a Datawrapper visual as a reusable dynamic infographic. After you publish an infographic:
- Journalists can insert the infographic as a direct embed on multiple text content pages.
- The infographic has a standalone content page. Search engines index it like an article page, so it may appear on search engine results pages.
This method is ideal for more impactful and substantial content that is suitable for sharing on a standalone content page.
A dynamic infographic inserted as a direct embed on an article page (left) and the same infographic viewed on its standalone content page (right).
Follow these steps:
Create a dynamic infographic
Go to Create > Interactive > Dynamic infographic.
A dialog opens, which guides you through the required settings one step at a time. Complete the required settings and then save your new infographic:
- Layout: Select a layout that includes your website header and footer (see the list below).
- Title: Enter the main title. This title is publicly visible (for example, on search engine results pages). If a title appears on the visual, enter the same title in Pangea CMS.
- Code: Paste the embed code from Datawrapper.
Layout selection
For Datawrapper code, use a layout that includes your website header and footer. This means one of the following layouts:
- Flexible page
- Standard page
- Article page
For detailed information about these layouts, see the following article:
After pasting the embed code, click Save.
Confirm automatic approval
Dynamic infographics that use Datawrapper code do not need approval. Pangea CMS automatically recognizes and approves Datawrapper code.
After you click Save, Pangea CMS automatically checks for Datawrapper code. If Pangea CMS confirms that the code comes from Datawrapper, you see a dialog with the following message:
- Dynamic infographic auto-approved
Click OK to close the dialog.
The dialog closes and the edit page for the infographic opens. On the edit page, you see the Approved badge. You can publish the infographic directly without requesting approval.
For detailed instructions on how to create an infographic, see the following article: