Viato Website Builder

Steven Welz
Steven Welz
CEO of Viato GmbH
“While I can’t compare Arkbauer SIA to other web development vendors, I’m satisfied with the experience. The team is responsive via Slack and a range of communication platforms. They also book meetings efficiently. Luckily, the time difference is only one hour. That short distance enabled the team to onboard at our office for two weeks. As a technical partner, they are highly skilled. Their software expertise is slightly ahead of mine. I enjoy talking to them about their past experience.”

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!

Technologies

PHP7, MySQL, Symfony4, React, Webpack, JWT, REST

Main Features

Following main features were implemented into Viato Website Builder:

JWT based authorization

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.

Live preview

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.

Internationalization

Configurable languages and missing translation & text auto-detection to ensure content and layout integrity.

Pre-defined theme support

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.

Design customization (colors, fonts, font-sizes)

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.

Module system (for Online booking, Rooms, Arrangements, Statistics/reviews, Contact form)

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.

Domain registration

The tool allows its users to use predefined sub-domain or use their own FQDN.

Automatic SSL generation

We use Let’s Encrypt to generate SSL certificates automatically.

Inline editing for texts and images

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.

Revision history

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.

Let's Talk
First name
Last name
Phone
Phone number entered is invalid.
Message*
Message must not be empty.
preloader