UI Components

UI Components are visual and interactive elements that appear inside the widget. This reference details how each component is used and what additional parameters can be added, as well as provides a component generator to render the base version of each component type.

Introduction#

To enable a UI Component, add its name to the comma-separated list under the parameter ui-components in the widget's URL.

The following UI Components, sorted by category, are available for use in the widget.


Search and View#

Use the following UI components for your user to find and browse parking. These components can be bundled together to build various searching experiences.

Search Bar#

ui-components=search-bar

The search bar enables users to find parking near an inputted location. If implemented as a standalone UI Component the search bar will redirect the user to the ParkWhiz website upon search.

Additional Parameters#

ParameterTypeDescription
search-transientBooleanEnables the user to filter their search by transient (hourly) parking
search-monthlyBooleanEnables the user to filter their search by monthly parking
search-packagesBooleanSearch by event packages ONLY
current-location-latitudeFloatThe user's Latitude. Enables the "Search near me" feature
current-location-longitudeFloatThe user's Longitude. Enables the "Search near me" feature
info

The parameter search-packages will only display results that are within event packages.

Map#

ui-components=map

The map displays all parking nearby an inputted location in a map view, either paired with the search bar or by passing in additional parameters to the widget. If implemented without a checkout component the map will redirect the user to the ParkWhiz website upon hitting the "Book Now" button.

If there is a large quantity of parking locations, or user selection is highly dependent on proximity to their inputted search (e.g. a Venue), we recommend using the map. If the map and location list are combined the user will be defaulted to a map view with the ability to toggle to a location list.

caution

When using the map UI component, selected locations will appear at the bottom of the widget. To prevent user confusion, we recommend rendering the map fullscreen without scrolling.

Additional Parameters#

ParameterTypeDescription
coordinates-markerBooleanDefault: true Shows the inputted location as a colored pin
map-panningBooleanRefreshes the results when the user moves the map

Location List#

ui-components=location-list

The location list displays all parking nearby an inputted location in a gridded list view, either paired with the search bar or by passing in additional parameters to the widget. If implemented without a checkout component the location list will redirect the user to the ParkWhiz website upon location selection.

If there are a finite number of parking locations in your area, or if there is a finite amount of space to render the widget, we recommend using the location list. If the map and location list are combined the user will be defaulted to a map view with the ability to toggle to a location list.

Time Picker#

ui-components=time-picker

The time picker adds a filter to the search bar, location list, and map view for the user to select when they'd like to book parking. If no inputted or default time is provided, the time picker will select the nearest current time in half-hour increments.

info

The time picker cannot be rendered as a standalone UI component.


Events#

Use the following UI components for your user to search parking by events. This is useful when users are browsing related to a venue, such as a Theater or Sports Team, and are probably looking to purchase parking in tandem with their upcoming tickets.

All Event components can use the following parameters to filter event results:

ParameterTypeDescription
event-filterStringFilters events by titles that contain the specified text
event-regex-filterStringRegex filters events by title

Event List#

ui-components=event-list

The event list displays all given events for a selected venue in a gridded list view. If implemented without a map or location list component the event list will redirect the user to the ParkWhiz website upon event selection.

Event Calendar#

ui-components=event-calendar

The event calendar displays all given events for a selected venue in a calendar view. If implemented without a map or location list component the event calendar will redirect the user to the ParkWhiz website upon event selection.


Account and Purchasing#

Use the following UI components for your user to purchase parking and access/transfer their bookings.

Guest Checkout#

ui-components=checkout

Guest checkout enables a purchasing flow within the widget. It can be combined with any of the prior UI components but cannot be used by itself unless either a "Book Again" Booking ID and Authorization Code or Quote ID is added in the parameters.

For more information on how users can pay within the widget, please review the Payment Services Documentation.

Additional Parameters#

ParameterTypeDescription
enable-google-payBooleanEnables Google Pay on checkout
enable-apple-payBooleanEnables Apple Pay on checkout
customer-emailStringPrefills the email of the customer
customer-first-nameStringPrefills the first name of the customer
customer-last-nameStringPrefills the last name of the customer
booking-idIntegerThe Booking ID of the previous booking, used for "Book Again"
booking-authorization-codeStringThe Authorization code of the previous booking, used for "Book Again"
quote-idStringThe Quote ID for the booking the user would like to purchase
info

To enable Google Pay or Apple Pay to an iFrame widget configuration, an additional parameter of allow="payment" must be added to the HTML element.

Purchase Confirmation#

ui-components=purchase-confirmation

Purchase confirmation displays an overview of the customer's booking purchase, including parking charges, booking details, and a contact list if they need help with their order.

caution

The purchase confirmation must be used in tandem with the guest checkout UI component.

My Bookings#

ui-components=account

The My Bookings page prompts users to sign in to their ParkWhiz account, and upon login displays a list of upcoming parking associated with the user. The user can then retrieve their pass and/or transfer a pass to another email.


Branding#

Use the following UI components to stylize your widget to better fit your brand. The Branding components cannot be rendered standalone, as they do not offer any booking functionality to the user.

Header#

ui-components=header

The header component enables a header image on the top of the widget. See Co-branding: Logo for best practices on what types of logos to use.

Additional Parameters#

ParameterTypeDescription
header-logo-urlStringRequired The logo to render in the header
header-logo-auto-sizeBooleanRecommended Automatically resizes the logo to best fit in the widget

Footer#

ui-components=footer

The footer component enables a footer image at the bottom of the widget. See Co-branding: Logo for best practices on what types of logos to use.

Additional Parameters#

ParameterTypeDescription
footer-logo-urlStringRequired The logo to render in the footer
footer-logo-auto-sizeBooleanRecommended Automatically resizes the logo to best fit in the widget
Last updated on by David Gwizdala