Pop-up enhancement

The Pop-up enhancement gives administrators and communications teams a powerful way to direct digital workplace members' attention to important actions or information before entering the site or viewing content. 

A terms and conditions pop-up prompting users to agree with them in order to proceed.

Sections in this article:

Considerations

Keep in mind the following when using this enhancement: 

  • Viewing the pop-up: Members must be logged in to see the pop-up. The enhancement functions site-wide and will appear on any page after a member signs in.
  • Cookies: The enhancement uses cookies, which means the pop-up is visible when:
    • The member logs in on a different device or browser.
    • The member clears their browser's cookies.
    • The member manually logs out and logs back in.
  • Language: The pop-up can only be displayed in one language and cannot be translated.
  • Style: The pop-up's style can't be customized.
  • Accessibility: This enhancement is not accessible for screen readers or keyboard navigation.
  • Groups: 
    • As this enhancement can be used multiple times in a digital workplace, groups should not have overlapping users to prevent displaying more than one pop-up to a user. 
    • Deleting and re-adding a group from the site will break the existing enhancement functionality for the removed group, since the group GUID changes.
  • Anonymous users: The enhancement will not be displayed to anonymous users. 

Set up the enhancement

To set up the enhancement for the first time, follow the steps below. To request this enhancement to be set up in your digital workplace, contact our Igloo team.

Add enhancement code to the site header

Warning 

Adding code that contains errors can disrupt the functionality of your digital workplace. Use caution when adding code to this area.

Add the following code to the header of your digital workplace:

<!-- Pop-up enhancement begins -->
<script src="https://enhancementsprod.blob.core.windows.net/enhancements/pop-up/pop-up.js"></script>
<script>
  var forceModalGroupId = `USER_GROUP_ID`;
  var buttonText = `BUTTON TEXT`;
  var duration = DURATION;
  var strict = false;
  var title = `POP-UP TITLE`;
  var text = `POP-UP TEXT`;
  var cookieName = `igdrpopup`;
  var content = `
    <div id="moc-body-container">
      <div id="modal-layer">
        <div id="modal">
          <div id="modal-inner">
            <h2>${title}</h2>
            <p>${text}</p> 
          </div>
        </div>
      </div>
    </div>
  `
  // The line below should remain commented out until the enhancement is ready to be turned on. Once the above variables are configured, remove the slashes from the next line
  // modalCheck(forceModalGroupId, cookieName, content, buttonText, duration, strict);
</script>
<!-- Pop-up enhancement ends -->

Customize the enhancement

Once the code above has been added, the following code will be in the header of your digital workplace:

var forceModalGroupId = `USER_GROUP_ID`;
var buttonText = `BUTTON TEXT`;
var duration = DURATION;
var strict = TRUE/FALSE;
var title = `POP-UP TITLE`;
var text = `POP-UP TEXT`;

Modify the following parameters of the code block to customize some aspects of the enhancement's functionality and appearance.

Parameter Description
forceModalGroupId

The object ID of the group that should see the pop-up when they log in. For details on finding a group ID see this Help Center article: Finding group GUIDs

This parameter is required. 
 buttonText

The text that appears on the confirmation button of the pop-up.

This parameter is required.
duration

The number of days before a user should see the pop-up again after they accept it. For example, for the pop-up to appear every 24 hours, this value should be 1. For once a month, this value should be 30.

This parameter is required.
strict

Set to either true or false.

True: The pop-up will have an Accept and a Cancel button. Use to prompt users with a mandatory acknowledgment. Users can only dismiss this pop-up by selecting the Accept button. They cannot interact with the rest of the page until they acknowledge the provided information.

False: The pop-up will only have an Accept button. Use to draw attention to important information or recent changes. Users can dismiss this pop-up by selecting anywhere else on the page or by selecting the provided button.

The parameter's default value is false. 
title

Enter the text to appear as the title of the pop-up window.

This parameter is required.
text

Enter the text to appear in the body of the pop-up. This can contain HTML for text formatting purposes.

This parameter is required.
Parameters

When the parameters have been updated, you are ready to turn the enhancement on.

Turn the enhancement on

To turn the enhancement on, remove the leading slashes (//) from the third-last line of code, as shown below, and save the changes to the header. This will turn the enhancement on, and the users in the selected group will see it.

// modalCheck(forceModalGroupId, cookieName, content, buttonText, duration, strict);

Changes to:

 modalCheck(forceModalGroupId, cookieName, content, buttonText, duration, strict);

Turn the enhancement off

To turn the enhancement off, re-add the two slashes (//) to the line of code in the header specified in the Turn the enhancement on section above.

Use the enhancement

Accept announcements

A member can select the confirmation button to close the pop-up dialog.