Skip navigation links
Digital Experience Studio > Website Technology > Sitecore CMS > XMC Component Guide >

Promo Bar

Promo Bar

An important, usually time-sensitive message that is displayed at the top of a page below any Alert (MSU site only) and above the masthead. Visitors can opt out of future displays once the message is read.

promo-bar-example
Figure 1: Example of a website with two promotion bar components.

Component Information

Benefits

  • Display timely messages to visitors at the top of a page above the masthead, outside of the page’s normal content area between Breadcrumb links and Footer.
  • Visitors can click to close the message once they’ve seen it.
  • Content authors can schedule when the promotion bar stops showing to visitors.

Example Use Cases

  • Provide a prominent message and optional text link to visitors.
  • Provide a message that visitors can choose to opt out of displaying.
  • Provide a message with an expiration date, on or after which the message no longer displays.

Frequently Asked Questions

No. You can manually place the same bar on multiple pages.

Create a Promotion Bar by following the instructions below. In Content Editor, drag the Data item to the site’s Data node. Use this item for all pages that use the component.

Instructions for Use

In Pages:

  1. Select the page in the content tree.
  2. Click “+” button in the topmost placeholder area, above the masthead.
  3. Locate Promotion Bar from the component list and drag it to the top of the page.
Note: You cannot add a Promotion Bar below the masthead.
  1. In the Assign content item dialog box, expand the MSU node, expand the appropriate website, expand Home, expand the appropriate page and expand Data. Then skip to step 5, below.

Alternate method:

  1. Click Components tab at the top of the content tree.
  2. Locate Promotion Bar and drag it from the left column Components list into the main area’s topmost placeholder above the masthead.
  3. In the Assign content item dialog box, expand MSU > sitename > Home > page name > Data.

Assign data:

  1. Select Data and click “+” to the right of the Data item.
  2. Select Promotion Bar and give it a name unique within the context of the page. For example, “Promotion Bar 1.”
  3. Select the new component and click Assign.
  4. Choose Promotion Bar options. See additional instructions below.
  1. Click Components tab at top of content tree.
  2. Locate Promotion Bar and drag it from the left column Components list into the main area’s topmost placeholder above masthead, in the order in which multiple Promotion Bars should display.
  3. In the Assign content item dialog box, expand MSU node, expand the site, expand Home, expand page and expand Data.
  4. Select appropriate Promotion Bar content and click Assign.
  5. The component can be renamed in Explorer (open by clicking the icon on Promotion Bar toolbar) or in Content Editor.
  6. Choose Promotion Bar options — see instructions below
  1. Click the Promotion Bar to display the toolbar.
  2. Click Select content item icon.
  3. In the Assign content item dialog box, expand MSU node, expand the site, expand Home, expand page and expand Data.
  4. The component can be renamed in Explorer (open by clicking the icon on Promotion Bar toolbar) or in Content Editor.
    promo-bar-explorer-icon
    Figure 3: The Promotion Bar toolbar. The Explorer icon is outlined in red./li>
  5. Choose Promotion Bar options — see instructions below
Note: Settings adjusted in the right column are applied to all fields for the entire component.
  1. Click the Promotion Bar.
  2. In the Promotion Bar right column, expand Advanced styling:
    1. Select Color — Gray or Green background
  3. In Promotion Bar right column, expand Layout:
    1. Set any styling as required. These settings are not generally needed.
  4. Add content:
    1. Promo Text — This is the text that displays in the Promotion Bar. Click the field and type directly into the field. “[No text in field]” indicates that nothing will display in the Promotion Bar.
    2. Promo Link — Click the field in the component to edit. “[No text in field]” indicates that no link will display.
    3. In Link right column, expand and set:
      1. Link Type — Choose Internal (a page in this website), External (a page or file on another website) or Media (an asset in this site’s Media Library).
      2. Link text — This is the text that appears on the button.
      3. URL — This is the link destination. The method of assigning the URL depends on the type of link: Internal (use the page chooser), External (provide fully specified URL/path) or Media (use the Media Library chooser).
      4. Expand Optional parameters to set “Link title” or “Open in new window.”
      5. Click Clear link value to remove the CTA button.
      6. Expiry — Use Explorer or Content Editor to add a date on which the Promotion Bar expires and no longer displays. See the alternate method below for more information.

In Pages:

  1. Click the Promotion Bar component to display the toolbar.
    1. Click Box with arrow icon to go to Explorer. It will open in a new browser tab.

In Explorer:

  1. Select the appropriate component in the list.
  2. Add content:
    • Text — This is the text that displays in the Promotion Bar.
    • Link — Choose Internal (a page in this website), External (a page or file on another website) or Media (an asset in this site’s Media Library).
    • Insert path — Select the URL (destination) of the hyperlink.
    • Link title — Include text used as a tooltip (on mouse hover) for the hyperlink.
    • URL query string — Optional: include parameters added to the end of the URL.
    • Anchor — Optional: include an anchor tag added to the end of the URL.
    • Open in a new tab option — Check, if yes.
    • Expiry — Select a date on which the Promotion Bar expires and no longer displays.
    • Click Clear link value to remove the CTA button.
  3. Return to Pages.
  4. Refresh the screen to see changes.

In Pages:

  1. Click the nine-dot cube icon in upper left.
  2. Select the environment.
  3. Select Content Editor.

In Content Editor:

  1. Locate the Promotion Bar component in the content tree.
  2. Make necessary changes in each field.
  3. An existing Promotion Bar can be duplicated and then changed as needed.
  4. Return to Pages.
  5. Refresh the screen to see changes.

In Pages:

  1. View the page using Preview (eye icon in upper right).
  2. Publish the page.

Tool Use Guide

 

 PagesExplorerContent Editor
Add componentOptimal  
Assign data sourceOptimal  
Edit contentOptimalPossiblePossible

 

Documentation updated: September 9, 2024

XMC Component Guide