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#
| Parameter | Type | Description |
|---|---|---|
search-transient | Boolean | Enables the user to filter their search by transient (hourly) parking |
search-monthly | Boolean | Enables the user to filter their search by monthly parking |
search-packages | Boolean | Search by event packages ONLY |
current-location-latitude | Float | The user's Latitude. Enables the "Search near me" feature |
current-location-longitude | Float | The 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#
| Parameter | Type | Description |
|---|---|---|
coordinates-marker | Boolean | Default: true Shows the inputted location as a colored pin |
map-panning | Boolean | Refreshes 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:
| Parameter | Type | Description |
|---|---|---|
event-filter | String | Filters events by titles that contain the specified text |
event-regex-filter | String | Regex 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#
| Parameter | Type | Description |
|---|---|---|
enable-google-pay | Boolean | Enables Google Pay on checkout |
enable-apple-pay | Boolean | Enables Apple Pay on checkout |
copyright-text | String | Custom copyright text on checkout |
customer-email | String | Prefills the email of the customer |
customer-first-name | String | Prefills the first name of the customer |
customer-last-name | String | Prefills the last name of the customer |
booking-id | Integer | The Booking ID of the previous booking, used for "Book Again" |
booking-authorization-code | String | The Authorization code of the previous booking, used for "Book Again" |
t-and-c-override | Boolean | Always show the terms and conditions link on the checkout page. |
quote-id | String | The 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#
| Parameter | Type | Description |
|---|---|---|
header-logo-url | String | Required The logo to render in the header |
header-logo-auto-size | Boolean | Recommended 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#
| Parameter | Type | Description |
|---|---|---|
footer-logo-url | String | Required The logo to render in the footer |
footer-logo-auto-size | Boolean | Recommended Automatically resizes the logo to best fit in the widget |