HEPC Card User Documentation

Logging In #

To log in, navigate to card.wvhepc.edu in your browser.

Home Page

After logging in, the home page is shown. This is the default home page, called “Main”, that will display after logging in. To change the default, please see the Settings section for more information. Clicking the logo/brand on the top left in the menu bar (“Demo Site” in this image example) will navigate back to your selected home page.

Status Changes #

Status changes happen dynamically. In most cases, information is updated without needing to refresh the page. When the status changes for a user, their card will change color, and an animation will play on the border of the card.

The animation that plays when the status changes for a user.

Viewing a Card #

To view more information for an employee, simply click on their card.

An animation to show opening and closing a card modal. Clicking outside of the modal will close it as well.

Below are examples when viewing a card. What is visible depends on user permissions as well as viewing your own card versus that of someone else.

In this modal, additional information for the user can be viewed. On the left, a larger version of the user image is displayed. Clicking this image will open in a new tab the original, full-size image. Beneath a larger version of their image are Email and SMS buttons. The email button is a “mailto” link that will open your default email client. The SMS button is only visible to those in the SMS Admins group. For more, see the section “Sending a Single Message”.

On the right hand side, information about the user’s most recent activity is listed, as well as their title and cell phone number. Please note that the time displayed is only visible for those in the “Presence Time” group.

At the bottom of the modal, there are options to change their status. These buttons are only available when viewing your own card, or for those in the “Presence Toggle” group and viewing the card for another. Note that the “In” status is not available when viewing your own card, regardless of permissions. Also note that the “In” status in this example is deactivated. This is so the same status cannot be set twice in a row.

Menu Bar #

At the top of any page after logging in, the following options are available:

  • Logo/Brand – “WVNET Entry & Exit Log” in this example. Clicking this will go back to the home page as selected in settings.
  • Views – Different pages to show employees in alternative layouts, or only display a specific department.
  • Show – A set of filters to show/hide employee cards.
  • Status – A quick dropdown to change your status, or log out of the site. Your current status is deactivated as an option.
    • Remote
    • Conference
    • Out
    • Logout – Not to be confused with Out above, this does not set your status to out. Instead, it logs you out of your current session on the site.
  • Info (Not available in Demo version) – Clicking the “I” icon will show a modal that displays other contact information, including mailing address and other phone extensions.
  • Settings – Clicking the gear icon will show a modal that lists user settings that can customize the look and layout of the site.
  • Help – Clicking the “?” icon will show a modal with relevant help for the current page. This includes information on the purpose of the page, and actions that can be done.

Views #

  • Main – The default home page. This shows only current employees.
  • Data Center (Not available in Demo version) – Shows who is currently in the Data Center. This is a separate status than whether someone is in the building.
  • All Departments – Lists only current employees, but groups by department. Some employees, such as those in Administration, may display twice on the page.
  • Single Department – Only shows employees in a single department.

Below are examples of what each type of home page looks like. To change your default home page, please see the Settings section.

The default home page.
The All Departments home page.
An example of a single department view. In this case, the Administration department.

Show (Filters) #

The following are the options available when viewing any home page.

  • In Building – Only show employees that have a status of “In.”
  • All Active – Show any employee that is “In”, “Remote”, or “Conference”.
  • Only Out – Only show employees that have an “Out” status.
  • Show All – Reset any filters and show all employees.
An animation to show the filters in action.

Messaging #

Receiving and Confirming a Message #

An example of a user receiving an alert via email.

Messages are received via email and SMS. These messages have a URL to click to confirm receiving the message. For emails, this is the “Respond” button. For SMS texts, this is a text link.

Changing Status #

Changing one’s status can be done on the site dashboard.

One feature to note across all options: One cannot set themselves to “In” unless they either swipe their card at the office, or ask an employee with the ability to set their status for them.

Note that one cannot set themselves to the same status twice in a row.

An example of setting one’s status to remote a second time.

Dashboard #

On the site itself, there are two options to change your status. The first is found in the menu bar, under the “Status” option.

This is also where the logout feature can be found.

Note that if your status is already set to one of the three options, it will be deactivated and cannot be clicked.

The other method to change your status is to click on your own card, and then click the desired status option. Again, note that the current status is deactivated and cannot be selected as an option.

An example of a typical user viewing their own card to set their status.


See the main PWA section for more information on status changes via shortcuts.

Info #

Clicking the information, or “I” icon in the menu bar will bring up a modal with additional contact information for WVNET.

Information is based on the WVNET staff directory document.

Settings #

Clicking the gear icon on the menu bar will bring up user settings. These settings allow users to customize aspects of the site to their personal preference.

  • Display Names: Changes whether last names or first names are displayed first. Default is “Last, First.”
  • Sort Names: Changes the sorting for names, either by last name or by first name. Default is by last name.
  • Layout Style: When changed to “collapsed”, images for each card no longer appear. This reduces what is needed to load the page, as well as display more cards in a single window. Default is “Normal” (images are shown).
  • Home Page: The page a user navigates to after logging in, pressing the logo/text in the menu bar, or when certain actions on the site redirect the user to home. The default is “Main”.
  • Enable Holiday Background: When enabled, a background image or color gradient is displayed, along with a possible animation. This background/animation combination change depending on the month or for certain days of the year. The default is unchecked. When unchecked, this feature is not loaded to save on system resources.
  • Enable Tooltips: Helpful hints appear
  • Cell Phone: The preferred cell phone to be contacted at when an EMS alert (or single message) is sent out.
Example when the background is enabled.
An example of the site with the “collapsed” view.
What tooltips look like when enabled.

Help #

Help can always be found by clicking the question mark icon on the menu bar. Clicking it will bring up a modal with relevant information for the current page.

Help modal on a home page for non-admin users.

Submitting Feedback #

Clicking the “Leave Feedback” button in the help modal will redirect to a form to enter feedback.

After submitting by pressing the “Send Message” button, the feedback is saved, and an email is sent to site administrators notifying them of the new message.

PWA (Progressive Web App) #

A progressive web app allows for native app-like features on desktop and mobile devices, including offline support, notifications, shortcuts, and more.

After logging into the PSTachio site, a prompt like this may appear in your browser.

Chrome prompt to install the PWA.

Alternatively, your browser may have an icon indicating PWA support.

The plus icon, next to the favorites icon. Found in the address bar in Chrome.

After installation, the app is listed alongside other apps in the start menu or app drawer. It can be pinned to the dock or menu bar for quick access.

The app pinned in Windows 10.

Currently, the PWA has two shortcuts implemented, each for quickly changing your current status on the site.

App shortcuts, as displayed by Windows.

Troubleshooting #

Recaptcha #

When logging into production, please ensure that the Recaptcha icon is displayed on the bottom right of the page.

The Recaptcha logo is used to protect forms from bot attacks.

Otherwise, when logging in, you will be redirected back to the login page with a validation error.

Accessing the Site #

Access to the site requires being on the HEPC network. This means either being connected in the building via ethernet or staff wifi, or remotely via VPN connection.

Powered by BetterDocs