Website for Quest Rooms on WordPress with Booking
About the project
The Webnauts team took on an interesting Black Room project from a client from the German city of Karlsruhe. The scope of the customer’s activity is the organization of intellectual leisure, namely the provision of themed quest rooms for collective games, in which there is a joint solving of puzzles and overcoming difficulties.
At the time when our team took the project to work, the customer already had five categories of quests and eight rooms completely ready for the game. And the number of Black Room guests by this time amounted to more than 1025 people.
The objective
We were required to create a website, the main purpose of which is to attract customers with the subsequent sale of tickets / gift vouchers and, as a result, online booking of quest rooms. The target audience of the project is residents and guests of Germany who want to have fun and spend their free time entertainingly.
To do this, we had to develop an architecture, build a website according to the provided layout, implement an administrative panel and integrate payment systems for online payment.
What have we done?
To develop a website for booking quest rooms, we chose a not quite standard technology stack. To work on the back-end, we decided to use WordPress and the WooCommerce plugin.
WordPress is one of the most popular content management systems in the world. With its help, developers can create websites of any complexity with minimal time. It is easy to set up for clients, so you do not need to have special knowledge to edit and contribute content. Thanks to this simplicity and responsiveness, almost 30% of all sites on the Internet use this CMS.
We decided to implement the front-end on the «reactive» Vue.js framework, which interacts with the back-end part via the REST API.
On the one hand, this combination provides the convenience of managing and administering the site, with support for the “admin panel” interface familiar to the client, and on the other hand, the impressive performance and quality of the front-end component on Vue.js.
And now let’s talk about everything in more detail.
Front-end development with Vue.js
At the initial stage, we had a series of joint discussions with the client, during which we planned all our further work. We also approved a certain stack of technologies that we had to use in the process of creating the site.
The next step was coding. We made it in full accordance with the rendered design layout and adapted it to all the most common devices and displays of various widths.
In order to achieve the goal of the project and attract customers with the subsequent sale of tickets and vouchers, we had to work on ensuring that web pages were indexed by search robots. To do this, we had to guarantee high-quality rendering of the page on the server side. For this purpose, we used the high-level Nuxt.js framework with SSR technology.
Nuxt.js is a framework for building Vue.js apps. It is designed to simplify the development of one-page services and sites. This is achieved due to the speed of optimization, the modularity of the architecture and the convenience of developers working with the framework. Nuxt.js generates the static version of the site itself and transfers the pages into separate JavaScript files that contain only the code needed to run.
Back-end development on WordPress
Since the customer was well acquainted with the WordPress CMS, the entire back-end component was built on this content management system. We implemented the future functionality of the site not directly through the CMS, but using the API. Thus, we were able to implement more complex ideas, such as purchasing vouchers on the site.
Thanks to this, site visitors have the opportunity to purchase a voucher for a fixed amount of 25, 50, 100 or 150 euros, or for any other amount that the user can enter manually.
Implementing a WooCommerce Booking System
In order for everyone to be able to pre-book their favorite quest room on the site, we used the WooCommerce booking system and the WooCommerce Bookings plugin during development. This is one of the most popular platforms that has allowed us to implement a way to book leisure activities. It makes it possible to choose the date and time of visiting the quest room, set the number of participants, and it displays the final amount “for payment”. Additionally, the system automatically reduces the cost of participation in the quest for players in groups of three to seven people.
We also used additional features from WooCommerce Bookings:
- The confirmation is intended to allow the member to review and clarify all the details before finalizing the room reservation.
- Automatic reminder of the upcoming visit to the quest to minimize the number of rejections and collect all the participants in the game in time.
Role differentiation and a new notification system
In the process of work, we have created the ability to differentiate the roles of employees. This is necessary so that managers have access to the administration of only the quest rooms assigned to them, and not to all rooms at the same time.
The next step was the implementation of notifications about booking quest rooms through the Telegram messenger. Prior to this, all such messages came to the manager’s email. By connecting this instant messaging service, we ensured that employees were quickly informed about the event.
Payment systems integration
The next considerable layer of work on the back-end part is the implementation of services that, in our opinion, cover all payment methods as much as possible:
- PayPal is the largest debit electronic payment system. Today it is popular in different regions of the world and provides contactless payments in twenty-five types of currencies.
- Stripe is an international secure online payment system. It allows you to accept payments from both individuals and companies, while the commissions remain quite acceptable.
Thus, visitors have the opportunity to pay for the cost of the quest on the site both with the help of payment cards and through the Apple Pay and Google Pay mobile payment systems.
And, of course, we implemented booking when paying on the spot.
Development features
Since the website for booking quest rooms in Germany had to be available in English and German versions, the next task that we successfully completed was multilingualism. To implement interface translation, we used the i18n library — it was the one which provided a comprehensive solution for product localization and further scaling.
We moved static texts for each language version into separate JSON files. Getting all dynamic content is configured through the interaction of information objects with the API. Such generation is carried out when passing the selected language in the request parameters.
Implementation of the process of booking quest rooms
The process of booking quest rooms deserves special attention. It is based on the principle of sequential passage of several stages:
- City selection.
- Location selection.
- Quest selection.
- Selecting date and time.
- Selecting the number of players.
- User data entry.
- Completion of payment.
At the same time, we wanted to provide a convenient user interaction with an extremely clear and simple interface, so that the collection of data based on the choice of the visitor goes as correctly and accurately as possible.
We divided the whole process into three screens. Each screen consists of two steps that appear one after the other when filled in sequentially. For example, it could be making a certain selection or entering data into a field.
As you progress through the stages of the booking, at the top of the page, each completed step is displayed dynamically as so-called «progress of filling out the form».
At the same time, dynamic tips appear at the bottom of the form, where you can see the actions that have already been performed by the user. When you complete the two current steps, you will be able to proceed to the next screen.
The stage where the process of choosing the number of players and the date of visiting the quest rooms is implemented is divided into three blocks:
- at the top of the form there is a dynamic counter that calculates the total cost when entering the number of participants;
- immediately below it is a graph that, in accordance with the dates, displays the available time for booking;
- on the right — brief information about the quest.
At the final stage, visitors can choose a convenient way to pay for the quest. Next to it, we have created a special field for entering a promotional code. If it is available and activated, the total cost is automatically recalculated, and participants are provided with a discounted price.
Summary
Thanks to the professional and well-coordinated work of our developers, the customer received a functional and fully adaptive website in English and German with full functionality for ordering, paying and booking escape rooms. The resource allows from any device to:
- view quest rooms available for order;
- find out detailed information about each quest;
- receive information about ongoing events;
easily and quickly book a quest room; - contact the organization to host your own event.
Comments