What's inside this article:
- About HTML widgets
- Start editing a widget
- Add the widget content
- Configure the widget settings
- Preview the widget
- Set the status and save the widget
- About HTML widget (Beta)
- Further recommendations
About HTML widgets
What is an HTML widget?
An HTML widget is like a blank canvas that lets you display custom content on website items (such as Sections and Regions). Custom content might include multimedia items, text, images, infographics, and more.
What is best practice for using HTML widgets?
We recommend using HTML widgets as follows:
- To display embedded external media items (from Datawrapper, YouTube,Twitter, and more). More information here:
- To display embedded Snippets and Dynamic infographics published by your own site. More information here:
- To share information and instructions.
We do not recommend using an HTML widget to display images or banners that function as links to other pages. This can create a poor user experience, as it is not clear that the image / banner functions as a link. To create a link to another page, use a Content widget.
Where can I display an HTML widget?
HTML widgets can be included on any of the following website items:
- Sections
- Infopages
- Landings
- Regions
- You Might Also Like 2.0
An HTML widget can also be embedded on external sites and content pages. For information, see the following article:
Can I preview an HTML widget before publishing it?
Yes. When you create a new HTML widget, the Preview screen appears after you set the Content and Settings. Via the Preview screen, you can check how the widget will look on desktop, tablet, and mobile. More information here:
Can I display the same HTML widget in multiple places?
Yes. The Widget library lets you create a single HTML widget that can be included on multiple website items. For detailed information, see the following article:
Start editing a widget
This article assumes that the HTML (Beta) edit screen (shown below) is already open.
For basic information about creating a new widget, see the following article:
For information about HTML (Beta), go to the following section in this article:
Add the widget content
In the Content section, you need to add the widget content using CKEditor.
See the sections below for more details:
Add text
You can use CKEditor to manually enter and format text content (the same as for creating an Article). More information here:
You can also paste text content into CKEditor. More information here:
Please be aware that the Maximize feature (shown in the screenshot below) is currently not working as expected. With Maximize enabled, it will not be possible to perform certain actions, such as insert embedded items, insert links, and open Source Code View.
We are actively working on a fix for this bug. For now, we recommend clicking and dragging the Resize button in the bottom-right corner of CKEditor to make the box bigger.
Insert embedded items
HTML widgets are often used to display embedded content. This includes the following:
- External media: Supported external media items (from Datawrapper, YouTube,Twitter, and more)
- Content items: Content items published by your own site (especially Snippets and Dynamic infographics)
- Images: Images uploaded to Pangea CMS and images from external agencies
To get started, hit the Insert Embedded Content icon in CKEditor.
For detailed instructions, see the following articles:
Insert HTML / CSS code
You can enter and adjust the widget content using HTML / CSS code. To get started, hit the Source Code View icon.
Source Code View lets you add and adjust widget content using HTML and CSS code. It is not possible to apply Javascript. Please be aware that not all code is supported, and certain elements and attributes are actively blocked for security reasons. Information about using Source Code View is available here:
After setting the widget content, hit Next to configure the widget settings.
Configure the widget settings
In the Settings section, you can adjust the following settings:
- Add a Header that is displayed above the widget.
- Adjust the default Widget name that is used to identify the widget in Pangea CMS.
- Add a Footer link that is displayed below the widget.
For detailed information about the widget settings, see the following article:
After configuring the widget settings, hit Next to preview the widget.
Preview the widget
In the Preview section, you can check how the widget will look when it is published on the site. Select Desktop, Tablet, or Mobile in the left panel to preview the page on different devices.
If you need to adjust the widget content or settings, select an option in the left panel to return to the relevant screen.
When you are satisfied, set the status and save the widget.
Set the status and save the widget
Before saving the widget, choose your preferred option in the Status drop-down menu:
- Enabled: The widget is visible on the public website when it is used on a website item with the Public status.
- Disabled: The widget is not visible on the public website but is available for editing in Pangea CMS.
Hit Save or Save & close to confirm and apply your preferences.
About HTML (Beta) widget
The new HTML widget (Beta) edit screen offers the latest CMS 8 design for improved performance and user experience.
To access the HTML widget (Beta) edit screen:
- Drag and drop the HTML (Beta) box from the Widgets list to create a new widget.
- Go to ≡ (three lines) > Edit Beta to edit an existing HTML widget.
For now, the old edit screen is still available. To access the old HTML widget edit screen:
- Drag and drop the HTML box from the Widgets list to create a new widget.
- Go to ≡ (three lines) > Edit to edit an existing HTML widget.
HTML (Beta) is not yet the default tool for creating and editing HTML widgets in Pangea CMS. Because of this, the old edit screen still appears when you create or edit an HTML widget via the Widget list or Widget library.
Further recommendations
The following articles might be helpful:
