Service Portal / Widgets

Portal banner carousel

Allow administrators to showcase key information and promos through a rotating set of visual banners

This widget is only available with the UI Components for Customer Portals application installed from the ServiceNow Store.

Overview

  • Release version
    Zurich
  • Available sinceVancouver
  • A11Y WCAG 2.1 AA

The Portal banner carousel widget displays rotating banners for announcements, promotions, and key information. It maximizes limited portal space while supporting images, text, and call-to-action buttons for each banner. This enables efficient delivery of multiple messages through an interactive, visually engaging interface.

ServiceNow Docs link
Portal banner carousel widget documentation

Additional information about the widget

Figma link
Customer Portal Figma library

Service Portal Figma library

When to use

Use when you need to display multiple high-priority messages or calls to action in a visually appealing and space-efficient manner.

When not to use

Avoid using it for critical, time-sensitive information that requires immediate user attention, as users may miss banners in a rotating sequence.

Usage

The Portal banner carousel is ideal for scenarios requiring visual impact and efficient space utilization. For consistency, ensure all banners maintain the same dimensions.

Examples:

  • Promotional campaigns: Showcase products, services, or limited-time offers with engaging visuals and direct links
  • Important announcements: Highlight critical updates, system outages, or policy changes requiring immediate attention
  • Feature spotlights: Introduce new portal features with quick overviews and links to detailed guides

Anatomy

The Portal banner carousel widget consists of the following components:

Portal banner anatomy
  1. Slide: The container for each element assigned to the carousel
  2. Navigation controls (arrows): Buttons for moving between slides
  3. Pagination dots: Visual Indicators showing the current slide's position. Allows for direct navigation to other slides. The active dot should be visually distinct.

Instance options

Data

Field Description
Slides The images to appear on the widget chosen from a set of predefined slides or slides that you have created, see Create a slide for the Portal Banner Carousel widget for more information.

Presentation

Field Description
Title color Color of the title for all carousel slides in hex code format.
The default value is #FFFFFF (white).
Alignment The content alignment, inside the widget, for all carousel slides. Available options are:
  • Left
  • Center
The default alignment is left.

Usability

The Portal banner carousel complies with all internationalization and accessibility requirements.

Accessibility

Learn how to access the actionable elements of the Portal banner carousel through keyboard interactions and screen readers. 

This is the tab order for the Portal banner carousel.

Portal banner accessibility

Keyboard interactions

You can access the actionable elements of the Portal banner carousel with these keyboard interactions:

  • Tab: Moves focus from one navigation arrow to the next
  • Arrow keys (left/right): Navigates between slides when container is focused

The pagination dots are not accessible via keyboard interactions. They are accessible only via mouse.