Pop-up enhancement

The Pop-up enhancement gives workplace 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 simple pop-up being used to display an announcement.

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

Sections in this article:

Considerations and caveats

Keep in mind the following when using this enhancement: 

  • Viewing the pop-up: Users must be logged in to see the pop-up. The pop-up functions site-wide and will appear on any page after a user signs in.
  • Cookies: The pop-up uses cookies, which means the pop-up is visible when:
    • The user logs in on a different device or browser
    • The user clears their browser's cookies
    • The user manually logs out and logs back in
  • Display:
    • The pop-up can only be displayed in one language and cannot be translated.
    • 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 pop-up will not be displayed to anonymous users. 

Set up the enhancement

To enable the enhancement for the first time, follow the steps below. To request this enhancement to be enabled on your site by our Professional Services team, complete and submit an Enhancement Request Form.

Add enhancement code to the site header

Warning: 

Adding code that contains errors can disrupt the functionality of your digital workplace. Please 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 pop-up

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 enable the pop-up.

Enable the pop-up

To enable the pop-up, remove the leading slashes (//) from the third-last line of code, as shown below, and save the changes to the header. This will enable the pop-up, 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);

Disable the pop-up

To disable the pop-up, re-add the two slashes (//) to the line of code in the header specified in the Enable the pop-up section above.