Viato GmbH is a German enterprise providing Channel Management services in the hospitality industry.
The customers (hoteliers) of Viato enter information about their Hotels in the “Channel Manager” tool so that it can be pushed to the leading booking engines like Booking.com, HRS, Expedia and many more. Technically, this information is just enough to be able to generate a Website for the Hotel automatically.
The goal was to create a tool which is very simple to use for the hoteliers who don’t want to spend plenty of time and resources to create a website for their hotel (s). The tool does that in just a couple of steps: choose a theme, colors, fonts and you are good to go! You can even skip all the steps and simply publish the website with the default settings, and it will still look very good!
PHP7, MySQL, Symfony4, React, Webpack, JWT, REST
Following main features were implemented into Viato Website Builder:
Viato Website Builder is an internal product which comes bundled with Viato Suite – their new, reloaded version of the software. Yet standalone and secured, it is a part of the whole suite, therefore Users are authorized on the basis of JWT (JSON Web Token) sent along with the request to identify the User and Hotel to work with without any extra authorization hassle.
The front-end of Website Builder is based on React which communicates to REST API to fetch and update information. Live preview enables users to instantly preview changes they’ve made and is embedded in an iframe with clever CSS & JS tricks to enable us to change colors, fonts etc. without rebuilding the assets.
Live preview also includes other cool features like element highlighting (to see what elements will get affected when changing colors, for example), scrolling to the section being edited and more.
Configurable languages and missing translation & text auto-detection to ensure content and layout integrity.
We created a sophisticated theme development workflow & YAML based configuration as there was a need to be able to create themes easily and fast with enough front-end knowledge.
Possibility to change colors (primary, secondary & background), font families and font sizes. Fonts are fetched directly from Google Fonts in real-time with a live font family preview.
Each hotel can enable/disable certain modules they want to include in their website e.g. Online Booking Engine, Contacts and more. We created a dynamic module support logic and displaying based on Viato business logic. Modules can hold different related options like show/hide prices etc.
The tool allows its users to use predefined sub-domain or use their own FQDN.
We use Let’s Encrypt to generate SSL certificates automatically.
Content is fully dynamic – most parts can be edited directly via inline editing tool which also allows the use of different placeholders for dynamic hotel related values like hotel name, address, and so on.
Some parts are none-editable as the content is fetched directly from Viato CRS and therefore needs to be updated in the source directly. As soon as it is changed in the source, an automatic push trigger takes care of updating the data in Website Builder database.
Users are allowed to play around as much as they like and be safe that live website is not affected by changes until they specifically publish the current version.
Each version is stored as a revision to allow users switching between them e.g. going back to the previous version or the one created three months ago. Each version is pre-built during publishing to ensure high performance for the end users.