Guided Workflow Display Components - Banner
Updated
Overview
The banner component is designed to display messages for agents in various template formats, such as Warning, Success, Error, Disclosure, or Reminder, to effectively capture their attention. Each template includes specific symbols that visually convey the type of message to the agent.
Customizable Elements:
Title and Subtitle: Add a title and subtitle to the banner. dynamic information such as case number can be included in the banner component by typing them within ${}. Refer to the below example: ${UNIVERSAL_CASE.CASE_NUMBER}
Width and Alignment: Adjust the banner’s width and alignment to fit the form or interface layout.
Banner Template Selection: Choose the appropriate template (Error, Warning, Success, Reminder, or Disclosure) based on the message type.
Purpose and Functionality:
This feature is highly versatile, allowing users to display important notifications or status updates within forms or interfaces. Banners visually communicate critical information, enhancing clarity and user experience while remaining customizable for different use cases.
Types of Banner
Sprinklr offers a variety of banner types that cater to different scenarios. Each type is visually distinct, ensuring that users can quickly understand the nature of the message being communicated.
Warning Banner:
Typically used to alert users to potential issues, important considerations, or cautions. It helps prevent errors by drawing attention to critical points.
Example use case: A warning message before a user performs an irreversible action, like deleting data.
Success Banner:
Indicates positive outcomes or confirmations, reassuring the user that an action has been completed successfully.
Example use case: After submitting a form, a success banner can confirm that the submission was successful.
Error Banner:
Displayed when something goes wrong or an error occurs. This type of banner informs users about issues that need to be addressed.
Example use case: Invalid form submission or failed payment process, guiding the user on what to correct.
Disclosure Banner:
Used to provide additional information or disclosures that are important for the user to be aware of, without indicating an error or success.
Example use case: Informing the user about terms and conditions, privacy policies, or new features in the application.
Reminder Banner:
Reminds users of something important that still needs attention or action. It often serves as a gentle reminder without being intrusive.
Example use case: A reminder for the user to complete a profile, update a password, or finish a registration process.
Example Use Cases for Various Banner Types
User Registration:
A success banner is displayed after a user successfully registers or logs in, reassuring them that the process was completed.
A warning banner could be shown if the user misses an important field or step during the registration process.
Error Handling:
An error banner could appear if there is an issue with the user’s submission (e.g., an invalid email address), prompting them to correct the error.
In-Product Notifications:
A disclosure banner could notify users about new features or upcoming updates in the software or platform.
A reminder banner might appear to remind users to complete a task, such as filling in missing details on their profile.
Various Fields in the Banner Component
Title: The title is the primary, prominent text in a banner. It conveys the main message or theme and captures the viewer's attention immediately. It is usually bold, larger in size, and serves as the focal point.
Example: "Welcome to Our Winter Sale!"
Subtitle: The subtitle is secondary text that provides additional context or details about the title. It supports the main message with relevant information and is typically smaller in size and less prominent.
Example: "Up to 50% off on all items until January 15th!"
Together, the title and subtitle work to engage the audience and deliver both the core message and supporting details effectively.
Alignment in Banners:
Start Alignment: The content (text, images, or elements) is aligned to the left side of the banner.
Use Case: Creates a structured look, often used when the design emphasizes a logical flow or pairs text with an image on the right.
Example: Title and subtitle are placed on the left, while the rest of the banner space remains open or used for visuals.
Center Alignment: The content is aligned to the center of the banner (horizontally and/or vertically).
Use Case: Best for symmetrical designs or when the content needs to grab attention equally from all sides.
Example: A sale announcement with the title and subtitle in the middle of the banner for maximum focus.
End Alignment: The content is aligned to the right side of the banner.
Use Case: Adds a modern or unconventional look, often paired with visuals or negative space on the left.
Example: The title and subtitle are on the right side, and the left is used for decorative imagery or emphasis.
Each alignment choice affects the banner's visual hierarchy and message emphasis.
Banner Type: Sprinklr offers a variety of banner types (as explained above) that cater to different scenarios. Each type is visually distinct, ensuring that users can quickly understand the nature of the message being communicated. You can choose the type of banner you want to create from this field.
Visibility Conditions: A rule or set of rules that determine whether a specific element, field, or component is visible to users on screen. These conditions are typically based on factors such as field values or contextual data. Visibility conditions ensure that users only see relevant information, improving usability and security.
Example
Condition: Display a "Priority Escalation" section if the "Ticket Priority" is set to "High."
Implementation: Visibility Condition: Ticket_Priority == 'High'
Result: The "Priority Escalation" section appears only for high-priority tickets.