Configure an HTML widget

The HTML widget lets you integrate custom content onto your platform's homepage and group pages. Use them to display anything from basic banners to embedded third-party tools.

Common examples of what you can display include:

• Videos (YouTube, Vimeo)
• Maps (Google Maps)
• Interactive presentations (Genially, Prezi)
• Forms and surveys (Typeform, Google Forms)
• Calendars (Google Calendar)
• Live widgets (weather updates, countdowns, clocks, etc.)

Here's how the HTML widget works:

• You can add multiple HTML widgets per page and move them to any position within your page layout.
• The widget's maximum width is set to the width of the page for consistent display.
• HTML widgets are displayed only on the page where they're added. They don't carry over to subgroups.
• If your organization uses the Globalization solution, the carousel can be translated into each user’s preferred language. For more information, see Translate an HTML widget.

You don't need to be a developer to use this widget.  Use our example code snippets to add styled section titles, text banners, or embed external content.

If you're comfortable with HTML and CSS, you can write custom code to control the layout and styling inside the widget. See Customization guidelines for more information.

Add an HTML widget

1. Access the page layout configuration panel:
   • For the homepage: In the left sidebar, click Homepage layout.
     • If Homepage layout doesn’t appear, click Configure page layout at the top right of your homepage.
   • For a group page: In the left sidebar, hover over a group and click Configure page layout.
     • If Configure page layout doesn’t appear, click on the group first, then click Configure page layout at the top right of the main section.
2. In the Configure page layout panel on the right, in the Add section, click HTML.
3. Paste your HTML code. You can either:
   • Use an example code snippet, and modify as needed.
   • Paste your own complete HTML code with inline/internal CSS.
4. In the bottom-right corner, click Apply.
   The HTML widget appears on the page.

Edit an HTML widget

1. Access the page layout configuration panel:
   • For the homepage: In the left sidebar, click Homepage layout.
     • If Homepage layout doesn’t appear, click Configure page layout at the top right of your homepage.
   • For a group page: In the left sidebar, hover over a group and click Configure page layout.
     • If Configure page layout doesn’t appear, click on the group first, then click Configure page layout at the top right of the main section.
2. In the Configure page layout panel on the right, click on the HTML you wish to modify.
3. Edit the content in the provided field (for example, paste a new embed code).
4. In the bottom-right corner, click Apply.

Delete an HTML widget

1. Access the page layout configuration panel:
   • For the homepage: In the left sidebar, click Homepage layout.
     • If Homepage layout doesn’t appear, click Configure page layout at the top right of your homepage.
   • For a group page: In the left sidebar, hover over a group and click Configure page layout.
     • If Configure page layout doesn’t appear, click on the group first, then click Configure page layout at the top right of the main section.
2. In the right-side panel, hover over the relevant HTML widget and click Delete.
3. In the bottom-right corner, click Apply.

Example code snippets

Use these snippets to add content. These code snippets provide the framework for your HTML widgets. It's important to understand that while we provide the container, you are responsible for how the content you add is displayed and functions within that container on your page.

Quick links:

• Custom section title
• Custom text banner
• Embedded external content
  • Where to find your embed src URL
  • Basic embedded content
  • Two items side-by-side
  • Three items side-by-side
  • Bento box layout

Custom section title

Use this to create custom-styled titles for specific sections of your page. Replace Custom section title with your section title.

<div id="widget_html_title">Custom section title</div>

<style>
     #widget_html_title{
          font-size: 24px;
          font-weight: 600;
          line-height: 32px;
     }
</style>

Custom text banner

Create a branded banner or a formatted text block with your colors, fonts, and messaging. Replace Title and Description with your own text, and change the colors (#007bff and #ffffff) and fonts as needed.

<div id="widget_html_banner">
  <h2>Title</h2>
  <p>Description</p>
</div>

<style>
     #widget_html_banner{
          background-color: #007bff; /* Example background color (blue) */
          color: #ffffff; /* Example text color (white) */
          padding: 20px;
          text-align: center;
          border-radius: 8px;
          font-family: Arial, sans-serif;
     }
     #widget_html_banner h2{
          font-size: 28px;
          margin-top: 0;
          margin-bottom: 10px;
     }
     #widget_html_banner p{
          font-size: 16px;
          margin-bottom: 0;
     }
</style>

Embedded external content

Use the code snippets below to display content from third-party tools, like YouTube, Google Maps, Google Calendar, Typeform, Genially, and more. Replace the src value in each snippet with your own embed URL.

Where to find your embed src URL

On most third-party tools, look for options like "Share", "Publish, "Embed", or an icon that looks like < >.

These tools often give you a full block of code that looks like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allowfullscreen></iframe>

Don't copy the entire code block. Instead, copy only the web address (URL) inside the quotation marks after src= (the part that starts with https://). This URL points directly to the content you want to display.

https://www.youtube.com/embed/VIDEO_ID/

Examples:

• YouTube/Vimeo: Click Share → Embed, then copy the src URL from the <iframe> code.
• Google Maps: Search for a location, click Share → Embed a map, then copy the src URL from the <iframe> code.
• Typeform/Google Forms/Other tools: Use their Share or Publish section to find the Embed option. Extract the src URL.

Basic embedded content

This basic code snippet is for embedding a single piece of content.

Replace placeholder http://example.com/embed/content with your actual embed src URL.

<iframe class="widget_html_iframe" src="http://example.com/embed/content"></iframe>

<style>
.widget_html_iframe {
  border: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}
</style>

Two items side-by-side

This snippet displays 2 items (like videos, documents, or dashboards) next to each other.

Replace the following elements with your actual embed src URLs:

• http://example.com/embed/content1
• http://example.com/embed/content2

<div class="widget_html_gallery_2">
  <iframe class="iframe_embed" src="http://example.com/embed/content1"></iframe>
  <iframe class="iframe_embed" src="http://example.com/embed/content2"></iframe>
</div>

<style>
.widget_html_gallery_2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.iframe_embed {
  border: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}
</style>

Three items side-by-side

Use this code to showcase 3 items in a side-by-side layout.

Replace the following elements with your actual embed src URLs:

• http://example.com/embed/content1
• http://example.com/embed/content2
• http://example.com/embed/content3

<div class="widget_html_gallery_3">
  <iframe class="iframe_embed" src="http://example.com/embed/content1"></iframe>
  <iframe class="iframe_embed" src="http://example.com/embed/content2"></iframe>
  <iframe class="iframe_embed" src="http://example.com/embed/content3"></iframe>
</div>

<style>
.widget_html_gallery_3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.iframe_embed {
  border: none;
  width: 100%;
  aspect-ratio: 2.73;
  border-radius: 8px;
}
</style>

Bento box layout

This advanced template arranges multiple embedded content blocks into a "Bento Box" design. For this advanced layout to display its best, you may need to adjust the content you're putting inside:

• Pick content that looks good in the different-sized boxes. Bigger boxes work well for important pictures or more detailed information. Smaller boxes work well for short, clear items.
• Be aware of the original shape (like wide or tall) of your embedded content (especially pictures and videos). If the content's shape doesn't match the box, parts of it might get cut off, or you might see empty spaces around it.
• While the Bento Box layout adjusts to different screen sizes, make sure the content you're embedding is visible on any screen size.

Replace the following elements with your actual embed src URLs:

• http://example.com/embed/content1
• http://example.com/embed/content2
• http://example.com/embed/content3
• http://example.com/embed/content4

<div class="bento_wrapper">
  <iframe class="one" src="http://example.com/embed/content1"></iframe>
  <iframe class="two" src="http://example.com/embed/content2"></iframe>
  <iframe class="three" src="http://example.com/embed/content3"></iframe>
  <iframe class="four" src="http://example.com/embed/content4"></iframe>
</div>

<style>
* {
  box-sizing: border-box;
}

.bento_wrapper {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  grid-auto-rows: minmax(200px, auto);
}

.bento_wrapper > iframe {
  border: 2px solid rgb(200, 200, 200);
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.05);
  width: 100%;
  height: 100%;
  padding: 0;
}

.one {
  grid-column: 1 / 2;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 4;
}
.four {
  grid-column: 2 / 4;
  grid-row: 3;
}
</style>

Customization guidelines

Each HTML widget provides a dedicated field for adding your custom HTML and CSS. The styles and content you add apply only within that specific widget.

• Styling options: Use inline CSS (style="") or internal CSS (inside a <style> tag) to style your widget content.
• Style isolation: CSS in the widget is scoped only to that widget. It won’t affect the rest of the page, and platform-level styles won’t apply inside the widget.
• Embedding external content: Use <iframe> tags to embed external content. The source must use HTTPS. Non-secure (HTTP) content may be blocked by modern browsers and may not display.
• Security limitations: <script> tags and inline z-index styles are not allowed within the HTML widget.
• Display responsibility: You’re responsible for making sure the widget content displays correctly.

Best practices

Follow these recommendations for optimal results:

• Keep styles self-contained:
  • Include all necessary CSS in the widget.
  • Custom CSS defined at the platform or group level does not affect the HTML widget. To reuse those styles, manually copy them into the widget’s <style> tag.
• Use relative links:
  • Link to other pages within the platform using relative URLs (for example, /paths/:pathID/home).
  • Avoid absolute URLs (for example, https://mypf.360learning.com/paths/:pathID/home) to ensure links work correctly across both custom domains and the main 360Learning domain.
• Always test your widget to ensure the content displays and behaves as expected on all screen sizes.