Link Search Menu Expand Document

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:


Widget Builder

Use the below tool to see how components are rendered within the widget.

UI Components
Component Enabled

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.

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

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.

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.

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 a “Book Again” Booking ID and Authorization Code 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
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”

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.

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.

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

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