Retrieve the embed code for a widget

What's inside this article:

• Basic information
• Retrieve embed code
• Adjust embed settings
• Embed on a Pangea website
• Embed on a content page

Basic information

This article explains how to retrieve the embed code for a Pangea widget. Using the embed code, you might display a Pangea widget as follows:

• On a partner Pangea website.
• On an external (non-Pangea) website.
• In the body of a text content page published on your own site.

An embed code is available for the following Pangea widget types:

• Content
• FactCheck
• HTML
• Live stream
• Manual stream
• Multimedia
• Podcast
• Poll
• Subscription
• Trends

When a Pangea widget is embedded on another page, the content on the embedded widget will update automatically to match the content on the original widget.

Retrieve embed code

Before you can retrieve the embed code for a Pangea widget, the widget must be saved in Pangea CMS and displayed on at least one page. You cannot retrieve an embed code from the Widget library or Widget list.

To retrieve the embed code:

1. Go to Build in the primary navigation.

   

2. Choose the type of page / segment where the widget is displayed.

   

3. Select the specific page / segment where the widget is displayed.

   

4. Ensure Editor is selected in the left panel. Select the widget you want to embed.

   

5. Select Embed code in the left panel.

   

6. If needed, adjust the embed settings. Then, hit Copy next to the embed code.

   

The embed code is now copied to your clipboard.

Adjust embed settings

The following embed settings are available:

• Width and height
• Enable scrolling

Width and height

Under Width and Height, optionally adjust the size of the embed. The following conditions apply:

• Width: You can enter a value in percent (%) or pixels (px):
  • Percent: If the value you enter is 100 or lower, it is automatically applied as percent. For example, if you enter 100, the embed will cover 100% of the available width. If you enter 50, the embed will cover 50% of the available width.
  • Pixels: If the value you enter is 101 or higher, it is automatically applied as pixels. For example, if you enter 500, the width of the embed will be 500px. The maximum value is 10000px.
• Height: You must enter the value in pixels (px). The value must be between 100 and 10000 pixels.

The preview updates automatically to show how the embedded widget will look, according to your defined dimensions.

Enable scrolling

Select Enable scrolling if the whole widget is not visible in the embed. This adds scroll bars to the embed, so the whole widget can be viewed by manually scrolling.

Embed on a Pangea website

Using an HTML widget, you can display a widget that was originally created and published on another Pangea website on your own website. The basic steps for embedding an external widget on an HTML widget are the same as for embedding a widget on a content page (Insert embedded content > External media). These steps are described in detail here.

To learn more about HTML widgets, see the following article:

• Build an HTML widget

Embed on a content page

You can embed a Pangea widget on the following text content pages:

• Article
• Blog
• FactCheck (embed in the Verdict content)
• Feature
• Feature story
• Live blog (embed in a post)
• News
• Transcript

This option is available for Pangea widgets published on your own site and for widgets published on other Pangea website.

Follow these steps:

1. Click inside the main box on the Editor subpage. Position the cursor where you want to insert the widget.

   

2. Hit the Insert Embedded Content button in the text editor bar.

   

3. Select External media.

   

4. Under Embed code or URL, paste the embed code.

   

5. Under Personal note, optionally enter a note. Personal notes are displayed on the content edit page in Pangea (not on the public site). The purpose is to let other Pangea users quickly verify exactly what has been embedded.

   

6. Hit Attach.

   

You see a placeholder representing the embedded widget in the text editor. The following options are available:

• (A): Edit: Change the personal note or insert a different embed code. You cannot edit the widget content.
• (B): Remove: Remove the widget from the page.

To check exactly how the embedded widget will look on the published page, use the options under Preview in the left panel.