User Guide

In-Page Alert Component + Content Fragment

In-Page Alerts keep residents informed of important, time-sensitive changes, appearing inline within the page content. They are created as Content Fragments (CF), which are then added to each page on which they’re relevant. In-Page Alerts can be scheduled to appear and disappear when needed.

 

In-Page Alerts do not dismiss automatically. They persist on the page until the user dismisses them or takes action that resolves the notification. If an In-Page Alert is dismissed and the page is refreshed, it will reappear.

 

For alerts that appear across all PA.gov pages, reference the Global Alert user guide. These can only be authored by Governor's Office or AEM admins.

Overview

Component name: In-Page Alert

Authors who can use component: any

Templates/page types that can use component: all

Required or optional: optional

Sample In-Page Alert, showing a critical-level Alert below the page Header.

Authoring Fields

Creating an In-Page Alert as a Content Fragment

1. From the landing Navigation page, click on Content Fragments.

2. On the left hand panel, select the folder where the CF is needed. It can be used by any pages in this folder. Once selected, click “Create” in the upper righthand corner.

3.  New Content Fragment

a.Location pathfinder: This field shows the URL of the folder selected in Step 2. It does not need to be edited.

b. Content Fragment Model dropdown: Select “Alert.”

c. Properties fields

i. Title: Optionally provide a title for your Alert. Adding a title automatically creates a name as well.

ii. Name: Provide a name for your Alert. Only mandatory field in Properties.

iii. Description: Optionally provide a description for your Alert.

landing navigation page, featuring Content Fragments
Left panel with folders and pages within selected folder. Create button in upper right hand corner
Fields required for content fragments including title, name, description

Editing the In-Page Alert Content Fragment

1. Alert Type dropdown: Select from Informative, Warning, and Critical.

a. Informative: These alerts are blue, with an information icon. Use neutral alerts for important time-sensitive information. Examples: important dates, recent content updates, new policies or system notifications.

b. Warning: These alerts are yellow, with an alert icon. Warning alerts tell the user something urgent or help the user avoid a problem. Examples: travel information, content trigger warnings or location closures.

c. Critical: These alerts are red, with an error warning icon. Critical alerts should only be used for active emergency situations that could pose a health or safety risk. Examples: severe weather threats or natural disasters.

2.  Title field: Add a title to display on the Alert.

3. Title Heading Level dropdown: Select from h2 – h6. The Alert can be placed anywhere on a page; choose H-level accordingly.

4. Start Date and Time picker: Select the date and time that the Alert should begin displaying on the page.

5. End Date and Time picker: Select the date and time that the Alert should disappear from the page.

6. Description field: Add a description to display on the Alert. Keep the description short and direct, with 140 characters maximum.

7. Link Label field: If adding a CTA, use this field to add a link label to display on the Alert’s CTA button.

8. Internal Link URL: If adding an internal CTA, use the "Add content path" pathfinder to link to another page on the site. This page may contain more information about the Alert’s contents, or may have an action for residents to take. Only one of Internal and External Link URL fields may be filled.

9. External Link URL: If adding an external CTA, add the link here. Only one of Internal and External Link URL fields may be filled.

10. Disable Close selector: If toggled off, the Alert has a close icon, and may be dismissed. If toggled on, the Alert has no close icon, and cannot be dismissed from the page. Default off.

11. From the top right corner, select Publish.

12. From the Publish 1 Content Fragments modal, select “Publish service” and “Publish.”

13. The Alert CF is now published.

Field options for author when creating an in page alert fragment
Field options for author when creating an in page alert fragment - link label, internal/external link URL, disable Close toggle

Adding the In-Page Alert component to the page

1. Once on the desired page in Edit mode, add the In-Page Alert by doing the following:

a. Option 1- double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “In-Page Alert” in the search bar, or scroll to the In-Page Alert in the list. Double click to add to page.

b. Option 2- on the left hand rail, navigate to the Components tab. Type “In-Page Alert” in the search bar, or scroll to the In-Page Alert in the list. Double click to add to page.

2. With the edit wrench, open the component.

In-Page Alert featuring wrench icon

3. Alert Content Fragment pathfinder: Select the Alert which should display on the page.

Alert content fragment pathfinder featuring done and cancel button

4. Click “Done.”

5. The Alert now appears on the page. View it before publishing by selecting “View as Published” from the Page Information Menu (in horizontal menu, click icon with 3 slider buttons, and select from dropdown).

Visible In Page alert on content page: Alert shows weather warning in all PA counties

Accessibility

1.  In-Page Alerts can be added anywhere on the page. Make sure to configure heading level (h2-h6) accordingly.

Other tips

1. Do not use Alerts for emphasis of regular content, such as job postings. Alerts should be used only for timely, urgent notifications.

2. Make sure to keep time-sensitive Alerts up only for the duration of the crisis.

3. Alerts should describe the impact on the resident, as well as actions they should take.

4. Limit the amount of text in an Alert. Write concise headings and copy, and include only one link per Alert.

5. When possible, do not stack In-Page Alerts.

6. On the CF authoring dialog, a “Statistics” button appear below the Description field. Click to view the Alert’s word and character count.