What is it?

The HTML Content Widget can be added to Pages and Spaces in your digital workplace. Using the HTML Content Widget’s built in WYSIWYG editor you can display custom content. The HTML Content Widget provides a means to include information and images on a Page or Space. It can also be used to embed third-party widgets, and as a target for custom content generated through JavaScript.

Use Cases

Banners and welcome messages

Using the HTML Content Widget is a great way to add static content unique to your Page or Space. For example, you can use this Widget to embed a welcome or introduction video on your digital workplace’s landing page or a banner image on any page to add some personality and branding to the area.

Surveys and forms

If you want to survey people in your digital workplace, and the Poll Widget is not providing the functionality that you require, you can create a survey in a third-party web application. Most of these applications can create an embed link which can be used to display the survey in another webpage. Inserting this embed link into the HTML Content Widget will allow people in your digital workplace to complete the survey, without having to leave your site.

Third party widgets

There are services that create widgets that will display things like weather, stocks, and social media feeds. Many of these can be safely embedded into an HTML Content Widget.

Your digital workplace requires any component of the embed to be HTTPS secured and some may be blocked for security reasons.

Features and functionality

Options

• Title: Enter text that will appear above the content of the HTML Content Widget. It can be left blank or contain up to 140 characters.
• WYSIWYG: Place your content here. Use the WYSIWYG Editor’s functionality to add text, images, videos, and HTML content.
• Show content to: Select who can view the contents of the HTML Content Widget. Options include: Everyone, Members Only, and Non-Members Only. For the content to be viewable to Non-Members the page or space must have its access set so that Anonymous users have View-only access.

Layout

There are currently no customization options in the layout tab.

Appearance

The Appearance tab options have their own dedicated support document. For more information, check out our article on Widgets.

General functionality

At the bottom of the HTML Content Widget edit tool there are the options to Update and Cancel. Update will save your changes, while Cancel will close the HTML Content Widget edit tool without your saving changes. Saved changes will be applied when the Page or Space is published.

The contents of the HTML Content Widget can be refreshed by selecting the curved arrow found on its title bar while in Page edit mode.

To remove an HTML Content Widget from your page you can select “x” on the far-right sides of its title bar while in Page edit mode. The HTML Content Widget will be removed from the page and all settings that were associated with it will be lost. If you exit Page edit mode without publishing the Page, the HTML Content Widget will still be present.

How to add an HTML Content Widget to a Page or Space

Follow the instructions on how to add and edit a Widget to learn how to add the HTML Content Widget to a Page or Space.

How to add JavaScript to the HTML Content Widget

It is a best practice to avoid placing JavaScript directly into the HTML view of the HTML Content Widget. Instead, place your JavaScript file in a Folder Channel, and reference its location from the HTML Content Widget.

1. Add your JavaScript file to a Folder Channel in your digital Workplace

Make sure that the necessary Users have at least Read Level Access to the uploaded file. The script will not run for those who do not have Access to it, instead an error will be reported in the browser’s console.

The JavaScript contained in this file should not be wrapped in script tags. Use an immediately-invoked function if possible.

If you are using jQuery avoid using $ as a reference to jQuery. This value is used by other libraries in your digital workplace and can result in errors when your script is run.

2. Copy the download link of your uploaded JavaScript file

Right-click the download button while on the files page. From the resulting menu, select “Copy link address”.

3. Navigate to your HTML Content Widget and Edit it

4. Add a reference to your JavaScript file in the HTML Content Widget

While in Code View add a script tag that references your JavaScript file. The source would be the same URL copied in step 2. This would look similar to:

<script src="https://{your digital workplace domain}/download/myfolder/myscriptfilejs?attachment=1"></script>

5. Apply this change

Click the Update button of the Widget and then Publish the Page or Space.

How to dynamically insert an element into an HTML Content Widget

Inserting content this way may result in slow page load times.

1. Add a Class to the HTML Content Widget

Add a unique Class to the Class text box on the HTML Content Widget’s Appearance tab. The Class “iframeMe” will be used in the following steps.

2. Add your script to the Advanced settings of the Page or Space, or into the Code View of the HTML Content Widget

Follow the best practices as described above in How to add JavaScript to the HTML Content Widget. Below is an example of adding an iframe using JQuery using the Class name added in step 1:

document.addEventListener('DOMContentLoaded', function () {
    var $jq = jQuery.noConflict();
    $jq('.iframeMe .ig-widget-html-content').append('<iframe src="https://{source url}"></iframe>')
});

Frequently Asked Questions

Why isn’t my embedded content being displayed?

Check to make sure that the URL in the embedded link is from an SSL enabled site (HTTPS). Igloo will not display content that comes from a site that does not have SSL enabled (HTTP).

Why is my page is loading slowly?

HTML Content Widgets have the capacity to run complex code, display high-quality images, and pull information from a variety of sources inside your site and out. All these functions can increase the load time of a page, particularly if they are waiting on third-party services for data.

How do I display SVG embeds?

SVG files and other iframes that require scripts to run may need the sandbox=”allow-scripts” argument in the src. Insert the iframe element as described above and include the “allow-scripts” argument.

<iframe src='https://{your digital workplace domain}/download/company_files/downfiles/browser_usagesvg?attachment=0" width="800" height="800" sandbox="allow-scripts></iframe>

How do you handle height changes in your iframe?

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var $jq = jQuery.noConflict();
        $jq('.iframeme .ig-widget-html-content').append('<iframe src="https://{your digital workplace domain}.com/download/igluvigak/mgrqckstart2/LandingPagehtml?attachment=0" width= "1200" height="800" sandbox="allow-scripts allow-top-navigation allow-popups allow-same-origin allow-pointer-lock" id="mgrFrame" scrolling="no"></iframe>')

        var $frame = $jq('#mgrFrame'),
        frame = document.getElementById('mgrFrame');
            //When iframe loaded sent postMessage for register this window in iframe
        $frame.load(function() {
        window.parent.postMessage(JSON.stringify({height: $frame[0].contentDocument.body.clientHeight}), "*");
        });

        //When window resize post height for image-block
        $jq(window).resize(function (){
         frame.contentWindow.postMessage(JSON.stringify({height: screen.height}), "*");
        });

        $jq(window).on("message", function(e) {
            frame = document.getElementById('mgrFrame');
            var data = e.originalEvent.data;
            var newMessage = JSON.parse(data);
            //If iframe sent height then change height iframe
            if(newMessage.height) {
                frame.height = newMessage.height;
            }
        });
    });
</script>