Introducing our Hospitable Template
Hospitable is a vacation rental management app that helps property owners manage their short-term rental operations, allowing them to communicate easily with guests, oversee bookings across multiple platforms, and ensure everything runs smoothly.
The Hospitable portal has a sleek, user-friendly UI, with straightforward data dashboards, intuitive functionality, and the ability to unify content across multiple data sources into a single stream, that can be easily used across teams.
Inspired by their user-friendly experience, we recreated parts of their app in Retool. Retool is all too often misconstrued as a platform solely for back-office applications, where visual appeal isn’t as important. Our UI inspiration series busts these myths, demonstrating how Retool can also be used to make beautiful, intuitive applications and client-facing portals that showcase your product.
Our clone also highlights the possibility of creating similar property manager apps on Retool that are bespoke to your operations.
This property management app is also a great use case for Retool Portals. On the Business plan, Retool allows users to white-label client-facing partners, with built-in support for all the security and management features you need to run it, such as whitelabeling, secure sign-on, and granular permissions.
Want to use this app in your environment? Toolbox newsletter subscribers can download it for free - scroll to the bottom to sign up and download!
Hospitable Portal: Key Features
Customer messaging portal
One of Hospitable’s core features is the centralized customer messaging portal, which allows managers to see conversations across different booking platforms, such as AirBnB, Vrbo and more.
The layout is simple, with a list of guest conversations, a quick preview of the most recent message, and a summary of the issue. The top left button allows users to quickly switch between three main filters, All, Read, and Unread, and more advanced filters are collapsed into a secondary Filter button, or can be searched across different data types in the text box.
To build the conversation view, we used a ListView component:
- A LinkCard for the container effect, greyed out once a conversation had been read;
- A Checkbox component for selection and Icon component to easily highlight unread messages with the pink circle;
- The Avatar component for the customer information and image;
- An Image component for the building image and two Text boxes for the issue overview.
To replicate the simple Conversation Status filter button, we simply used a button that changes the filter value on click. This value is then used to set the Text on the button to reflect the current filter.
This filter is then applied on the ListView component, where the data is also filtered by the value in the search component and paginated for easy navigation.
When a message is clicked, the user is led to the second view on this Inbox page to see the detailed conversation and more useful information.
On the left panel, the user has access to the booking overview, with check-in and check-out dates, guest numbers, cost details and additional notes. On the right panel, managers can see useful information about the guest and property info that they can quickly share if requested.
These sidebar layouts are a great example of highly intuitive UI:
- Primary information is displayed in a heavier, darker font, while secondary information is displayed with a lighter grey font to maintain focus on the key data.
- For information that is easily interpretable and often repeated, icons are used to convey the data type (such as guest count and bill amount) rather than describing each value with a text label.
- A bright textbox highlights any custom notes the guest may have added.
- The calendar displays the dates that the guest is present.
- The ‘About Vanessa’ segment summarizes key information about the guest, and using color means it’s harder for the manager to miss important details, such as ‘Returning guest’.
- Property details are displayed in a clear, well-spaced format
- Customer contact details are displayed above the chat with simple icons to convey data types
This kind of thoughtful data design allows users to see all important information at a glance, without creating an overcrowded interface.
To create the conversation functionality in Retool, we used another ListView component and containers to create the messaging effect, switching alignment based on the sender. The ListView data source is based on the messages, using the created time as the primary key. Note 🗒️ this is not best practice but serves the use of this tutorial!
This data layout provides a point of great inspiration for all kinds of messaging functionality, such as delivery-based apps, customer support or internal communication, like engineering ticketing. The design is simple, but it uses space efficiently to present primary and secondary data in such a way that users can understand and action data much faster.
Using Retool, it would also be possible to build an AI chatbot that generates suggested responses so your teams can respond faster, even using Vectors to embed deeper company context.
Booking calendar
The booking calendar displays the same booking data that is visible in the individual conversations. It presents it in a way that allows property managers to understand the occupancy and workload for each property.
The user can quickly switch between properties using the dropdown.
If the user clicks on an empty date, a drawer frame opens to allow them to add a new booking quickly.
Operations task management
Finally, the Operations page offers a simple interface for managing tasks between team members. By clicking Assign a task, a modal opens with the ability to choose the team member.
The Teammates page offers a simple CRM for seeing associated staff and quickly contacting them.
Launching a customer portal on Retool
Retool offers many useful features to businesses looking to build client-facing portals, and can support building both MVPs much faster than traditional code, and launching live products. Including (from the business plan and up):
- White-labeling to match your brand
- Logos, theming, domain, and more can be personalized to your product (though note that creative use of Retool components may be necessary to get pixel-perfect design results!). The Enterprise plan removes all traces of Retool’s interface for deeper flexibility.
- Secure access: authentication and permissions
- Retool offers SSO and granular user permissioning so that you can control exactly who has access to what and keep logins secure.
- Landing pages and embeddable apps
- You can design custom landing pages to route users to specific pages or tools upon login, or embed Retool apps into existing portals or dashboards to facilitate faster building of features on Retool with the full customization of traditional code.
- External user pricing
- Retool offers varied, affordable pricing for external users who have access only to your portal.
- Spaces, on the Enterprise plan, allow for stricter built-in data isolation
- Customers on the Enterprise plan can set up isolated sub-orgs within Retool with their own users, SSO, and source control to ensure strong data segregation.
