Banner Message enhancement

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 and caveats

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:
      • Users 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 user changes the language.
        • The banner will be visible to all members of the Digital Workplace.

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:

<!-- 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 enabled, 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 users.
 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. This 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 users to see a banner in their preferred language. When a user changes their preferred language, the appropriate version of the banner will display automatically. See Languages and translation for more information.