Banner Message enhancement

You can use the Banner Message enhancement to display a message at the top of your digital workplace. The content of this message can be set directly in the header or pulled from the last modified unarchived post on a connected forum channel.

A banner message in a digital workplace.

Sections in this article:

Considerations

Keep in mind the following when using this enhancement: 

  • Page display: The banner displays on every page and can't be hidden for specific locations.
  • Mobile app: The mobile app's banner will only display on the web tab.
  • Banner Deployment: There are two methods of deploying the banner:
    • If using a forum channel for the banner text:
      • Members must have at least Read access to the connected forum channel and post to see the banner message. 
      • If the forum channel has no posts, the banner will not be displayed.
      • The banner will display everything in the forum post's body, occupying more space for longer messages.
    • If adding the plain text in the header:
      • Text will not be translated if a member changes the language.
      • The banner will be visible to all members of the Digital Workplace.

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:

<!-- Banner Message enhancement begins -->
<link rel="stylesheet" type="text/css" href="https://enhancementsprod.blob.core.windows.net/enhancements/banner-message/bannermessage.css" />
<script src="https://enhancementsprod.blob.core.windows.net/enhancements/banner-message/bannermessage.js"></script>
<script>
injectBannerWarning(
    messageSource = ``,
    backgroundColor = `#FF0000`,
    textColor = `white`
);
</script>
<!-- Banner Message enhancement ends -->

Get the forum channel ID

To get the channel ID for the forum channel you would like to use for the content of your banner:

  1. Navigate to the digital workplace forum channel in the digital workplace. 
  2. Open your browser's developer tools by pressing F12 (Command+Option+I for Mac).
  3. Select the Console tab.

  4. Copy and paste the following into the console, replacing the sample path with the path to your forum channel, then press Enter:

    getObjectIdByPath("/path/to/forum/channel");
  5. The response in the console will contain the ID for the forum channel. Copy this ID for use later. 

Add the channel ID to the header

Navigate to the header and update the messageSource parameter by adding the channel ID between the quotation marks. 

Customize the enhancement

Once the enhancement has been turned on, the following code will be displayed in the header of your digital workplace:

<!-- Banner Message enhancement begins -->
<link rel="stylesheet" type="text/css" href="https://enhancementsprod.blob.core.windows.net/enhancements/banner-message/bannermessage.css" />
<script src="https://enhancementsprod.blob.core.windows.net/enhancements/banner-message/bannermessage.js"></script>
<script>
injectBannerWarning(
messageSource = `sample-forum-channel-ID`,
backgroundColor = `#FF0000`,
textColor = `white`
);
</script>
<!-- Banner Message enhancement ends -->

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

Parameter Description
messageSource

The channel ID for the forum channel to use as the source for the banner message. 

If you want to add a static text banner message instead of dynamically getting the content from a forum channel, you can enter that text or HTML in this parameter within the quotation marks. This text will not be translated and will be visible to all members.
 backgroundColor

The background color of the banner message. This parameter can accept the following color formats within the quotation marks: 

  • Color name: red
  • Hex code: #FF0000
  • RGB value: rgb 255, 0, 0

If this parameter is removed, the default value is #FF0000 (red).
textColor

The color for the banner message's text. This parameter can accept the following color formats within the quotation marks: 

  • Color name: red
  • Hex code: #FF0000
  • RGB value: rgb 255, 0, 0

If this parameter is removed, the default value is white.
Parameters

Use the enhancement

Add or update a banner message via a forum channel

The banner message will display the most recently added or edited unarchived post in the source forum channel. Adding a new post in the channel or updating any unarchived post will cause the banner to display the new or updated post.

Remove the banner message via a forum channel

When a banner message is no longer needed, it is best practice to archive or delete the forum posts, which prevents the enhancement from displaying an older or unexpected post's message. Archiving or deleting all forum posts in the source channel will remove the banner from displaying on pages. 

Multilingual banners via a forum channel

Add a translation to the forum post to allow members to see a banner in their preferred language. When a member changes their preferred language, the appropriate version of the banner will display automatically. See Languages and translation for more information.