Vitalii Hoida

Vitalii Hoida

Front-end Developer

Download CV

There is room for creativity in every job.

From IT recruits to real experts!

There is an opportunity to become a pro in the Webnauts team in any field — for example, in SEO, SMM, web development, or any other.

Training on real tasks is 40% faster and more efficient.

Vitalii came to us as a Junior specialist with a willingness to learn and explore new areas.

Now Vitalii is a cool multifunctional specialist. He is an experienced and certified integrator for the cloud and boxed versions of Bitrix24.

Vitali also works with sites on 1C Bitrix and has a hand in creating and implementing content for various projects.

Vitaly also actively helps new employees to familiarize with Bitrix24.

Stack

  • CSS

    CSS

  • HTML 5

    HTML 5

  • PHP

    PHP

  • Bitrix framework

    Bitrix framework

  • Laravel

    Laravel

  • Git

    Git

		Array
(
    [0] => WP_Post Object
        (
            [ID] => 16635
            [post_author] => 10
            [post_date] => 2022-08-26 09:42:07
            [post_date_gmt] => 2022-08-26 06:42:07
            [post_content] => 

About the project

Profi Make is a villa rental company on the Palm Jumeirah in the UAE.

The company is no less than 12 years old, and of course, during this time it managed to acquire a corporate website. However, over time, the client decided to promote their services under a new brand and create another site. This is how Profi Make met the Webnauts team.

Read about what happened as a result of our cooperation in our case.

The objective

Profi Make is represented on various online accommodation booking services, in particular Booking.com and Airbnb. But the main platform is a corporate website that attracts customers with the help of contextual advertising.

So we had the task of developing a website for the company that would fully correspond to its activities: with an attractive design and competent presentation of content. That is, to make sure that all pages of the site are not just convincing, but obviously emphasize the company's rich experience in the field of luxury real estate.

Technological solution

To develop the Profi Make website, we used the Bitrix 24 CMS constructor. The decision was justified by the fact that the client had already used Bitrix24 as a CRM, and the creation of a site within the same CRM came in handy.

Why is Bitrix24 so good? This is a convenient constructor that allows you to:

  • create a design from ready-made blocks and elements;
  • create additional web pages;
  • optimize the site for promotion;
  • get detailed statistics;
  • collect customer contacts using built-in CRM forms;
  • integrate the site with payment and other external services.

In addition, the speed and cost of developing a site on Bitrix24 is simply pleasing.

Banner

Website design and navigation

As we intended, the design of the site turned out to be minimalistic, neat and elegant, as a project for renting luxury villas should be. The color scheme is restrained and consists of 3 colors:

  • white is the main background color of web pages. It gives the site elegance and airy lightness;
  • sand — an additional warm color with a direct reference to the desert landscapes of Dubai;
  • black is the accent color for the main text, header and footer of the site. It is associated with professionalism, maturity and allows you to focus on what is important.

Main page structure

We placed only 3 elements in the site header: a logo and two contacts in the form of a phone number and a link to an Instagram account.

The main screen also has a photo of the Dubai skyline, a laconic slogan and location. All of them aptly and concisely broadcast the activities of the company:

Banner

An animated pop-up in the lower right part of the screen unobtrusively reminds you of the opportunity to write to a consultant, and clicking on it instantly brings up a chat window:

Banner

By the way, all messages sent from the site instantly get into the Bitrix24 CRM system which our client uses for their further and prompt processing.

Catalog

The very first site of the company had a catalog with a solid block structure and 2 search filters: location (an unnecessary item due to the fact that there is only one option) and the number of rooms. Such a catalog lacked logic, visual appeal and ease of perception.

This time, when developing the catalog, we completely abandoned the navigation bar and immediately structured the villas by the number of rooms. This is the main parameter when searching for apartments, which often determines the cost of rent. We presented the sections of the catalog in the form of a circular slider:

Banner

Location Description

As mentioned earlier, all villas have a one and only location — Palm Jumeirah on the coast of Dubai. Copywriters enthusiastically made a laconic description of the island, illustrating it with colorful photographs. To describe the location, we have dedicated a separate screen:

Banner

About Us

This is not just a site block, but a brand mirror. It reflects the history, activities and experience of the company. It is able to create an image that deserves the trust of customers, but only with competent text. As you guessed, here, too, it was not without the skillful thought of a copywriter. As a result, the story about the founder and the Profi Make team turned out to be simple, businesslike and restrained:

Banner

FAQ

The FAQ block is often underestimated. So, this section was missing in the previous project of our client. Very much in vain, because in fact it is mandatory for sites offering complex services. And Profi Make is one of those.

Our copywriters have clearly, specifically and concisely formulated answers to the most frequent questions of clients, and now the FAQ section is fully consistent with its tasks — it brings the client closer to the target action, closes objections, reduces the load of consultants and allows to increase the usability of the site in the future.

We implemented this block as a drop-down list with a hover effect:

Banner

Villa description pages

Like the entire site, they are made in the best traditions of minimalism: a photo card, the main characteristics in infographics and a button that opens a window with an application form. Below is a gallery of photographs, a description and a detailed description of the apartments.

And while the copywriters were writing inspiring texts, our developer also wrote something — a custom js script that allows you to open the villa page when you click on its card (and not on the link):

Banner

The concise feedback form is the crowning achievement of the page design. Let's look at it in more detail.

Feedback form

It is presented in a static form at the end of the main page of the site and individual pages with a description of the villas. This type of form is simple and unobtrusive, besides, we have already used 1 dynamic element in the form of a pop-up window.

In addition to the required fields for the name and contact number, the form has fields for the dates of the villa booking. But even despite this, the window turned out to be clear and concise:

Banner

Site adaptability

All blocks and elements of the Bitrix platform are fully responsive, which means that the site perfectly adapts to different screen resolutions and is equally convenient from all mobile devices — from selection to booking apartments:

Banner

Animations

The Bitrix platform provides ample opportunities for animation without the use of third-party libraries. In this project, we relied on simple effects of appearing and moving away, lifting and shifting elements to the center of the screen, changing colors when hovering over the cursor (on buttons, links, list items and photos of villas), as well as a pulsating online chat button.

Results

In cooperation with developers and copywriters, we managed to create a convenient minimalistic website with a well-thought-out structure, inspiring texts and unobtrusive animation effects. Neat, convincing and solid site perfectly reflects the activities of the company for the rental of luxury real estate.

[post_title] => Website for Renting Luxury Real Estate in the UAE [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-for-renting-luxury-real-estate-in-the-uae [to_ping] => [pinged] => [post_modified] => 2023-09-17 15:53:08 [post_modified_gmt] => 2023-09-17 12:53:08 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=16635 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [1] => WP_Post Object ( [ID] => 16983 [post_author] => 13 [post_date] => 2022-09-28 12:13:45 [post_date_gmt] => 2022-09-28 09:13:45 [post_content] =>

Recently, we have been working on another interesting real estate project — SEZAVI PROPERTY. The main wish of the client was to create an attractive, simple and fast website for a real estate agency in the UAE. And the main technical task was the integration of the resource with the CRM system to control incoming leads.

https://wnauts.com/wp-content/uploads/2022/09/sezavi-property.-main-page.mp4

About the client

SEZAVI PROPERTY provides a wide range of property management services in Dubai, short and long term rental of villas, providing professional service and peace of mind to clients at any time. The agency is based in Dubai Marina, but the rental properties can be located both in Dubai and outside of it. In addition, Sezavi Property takes on the responsibility of managing portfolios of all sizes — from managing a few properties to over a hundred.

WordPress development

The proposed site should not be very capacious and bulky, so it was decided to make it on the WordPress platform.

WordPress is one of the most popular CMS today. The main advantages of the engine are fully consistent with the wishes of the client, and the main one is that WordPress has the simplest, most convenient and very functional administrative panel. It takes a couple of hours to master it.

It is also important that the platform is free and at the same time, with a large number of free updates and additions, which is also suitable for customers who plan to manage the site themselves in the future.

We used Elementor as the visual editor. This is a WordPress site builder. Elementor is a feature rich page builder. It is used for coding large websites, landing pages, long reads, articles, etc. Coding takes place using ready-made elements, which are selected by simple drag and drop and making the necessary settings through a convenient admin panel.

Design

As our practice shows, a beautiful and harmonious design is very important for such sites. The further behavior of the user directly depends on its appearance.

Banner

Therefore, our design specialists decided to focus on high-quality photographic materials and images.

Banner

Simple navigation on the first screen immediately allows the visitor to go to real estate rental offers or fill out a form and get feedback on any issue.

Banner

To ensure communication with site guests, we used the Contact Form 7 tool.

Contact Form 7 is one of the most popular plugins for creating contact forms on the site. The plugin allows you to create forms of any kind, is very flexible and easy to set up, has been developing for many years and contains a lot of improvements. The plugin can manage numerous contact forms, where you can flexibly customize the content of forms and mail with fairly simple markup. Forms have built-in support for Ajax submission, CAPTCHA, Akismet's spam filter, and more.

Banner

The search function offers the visitor in a few clicks to select suitable options for renting a villa, apartment or penthouse. For popup cards on the site, we used the visual editor Popup Builder.

Popup Builder is a tool that will help you increase your conversion rate. It is a responsive WordPress tool with many different features: customization options, different types of popups, popup scheduling, animation effects, integrations and plugins supported by 3rd party developers.

Banner

Cards of offers for rent are placed as colorful photo gallery. From the photo you can immediately go to a detailed description.

Each card contains a maximum of high-quality photos and information about the object offered for rent. The reserve button is also on the card page.

Filling with content

All content on the site was written by our company's copywriters and posted by content managers.

Banner

Each offer for rent contains a maximum of high-quality photos, a description and a list of pleasant bonuses.

Banner

We paid special attention to the description of real estate objects, because the conversion on the cards of specific objects largely depends on their informativeness and persuasiveness.

Banner

Integration with CRM system

CRM is a system that simplifies the control of incoming leads. Instead of complex tables, instant messengers and other sources, one single service remains. It minimizes the resources spent and makes it possible to quickly respond to all requests from the site.

The advantages of using such a system:

  1. A single customer database that stores all collected data.
  2. Transparency and control of work.
  3. Accounting and analysis of leads.

After integrating the CRM system with the site, our customer can independently process the list of users, segmenting them according to the required parameters. The entire list of resource visitors who left their data can be placed in CRM, processed and analyzed. The functionality of the system will also help to organize and analyze data on contacts, orders placed and deals.

Summary

After the work on design, content filling and improvement of technical characteristics, we received a high-quality Internet product with good performance indicators. Now the website of the real estate agency SEZAVI PROPERTY (UAE) contains a complete system for choosing housing for rent, and also provides a wide range of property management services in Dubai with simple and understandable information administration.

Refinement and improvement of the functionality of Internet resources is a task that we face quite often. If you think that improving and expanding the functionality of the site will help your business develop, then our team of specialists will be happy to advise and take on the solution of even the most difficult task.

Banner [post_title] => Website of a Real Estate Agency in the UAE [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-of-a-real-estate-agency-in-the-uae [to_ping] => [pinged] => [post_modified] => 2023-09-13 17:01:24 [post_modified_gmt] => 2023-09-13 14:01:24 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=16983 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [2] => WP_Post Object ( [ID] => 17285 [post_author] => 14 [post_date] => 2023-01-13 16:17:30 [post_date_gmt] => 2023-01-13 13:17:30 [post_content] =>

About the pet project

Our client represents a real estate agency in Dubai. We have previously collaborated on the Profi Make web project and we were happy to be chosen again, only this time to develop a Telegram bot application (web app), the task of which is to help people find passengers to transfer packages from Dubai or to Dubai.

Why, it would seem, if there are many delivery services. But in fact, this is a topical issue, because international courier services are not cheap, and for many people it is not hard work to transfer a small package during a trip (and even make money on it). Usually, thematic chats and forums on the Internet help in finding such travelers. But in order to find the right one among thousands of messages, driving keywords into the search, you can spend a lot of time and effort. Not to mention making a deal, because it's not easy to contact a forum member when you only have a mysterious nickname at your disposal.

Knowing about this problem, our client decided to automate this process and see what happens.

Web app for bots — a new Telegram technology

In the spring of 2022, Telegram introduced a new generation of bots. If earlier these little helpers were able to process payments, convert files and send notifications, now their capabilities have reached a fundamentally new level. Thanks to one of the most popular programming languages, JavaScript, developers can create full-fledged web applications right inside the chat. As you guessed, we did not fail to take advantage of the new technology: we equipped the Telegram bot with a flexible interface and with functions that are in no way worse than any website.

Banner

How a chatbot works

DP_4h_bot is a program for finding a traveler from or to Dubai who is able and willing to deliver a small package.

Let's use an example to show how the product works from the side of the performer and the sender.

You are a performer

Let's say you live in Dubai, and on October 15th you plan to fly to Paris for the weekend. Your baggage allows you to take a parcel up to 5 kg with you and earn some money on it. You open Telegram and launch the DP_4h_bot chatbot, which greets you with a welcome message and an invitation to press the «Start» button:

Banner

When you click the «Open Application» button, the bot will prompt you to go to the web application, warning you about getting access to the IP address and basic information about the device. By clicking «Cancel», you can continue working in the usual Telegram chat, and by selecting «OK» you can switch to a separate application:

01

/ 02

Next, you should choose what you want to do with the luggage: «SEND» or «TRANSPORT». Since, hypothetically, you would like to send the package to Paris, you need to click on the «TRANSPORT» button, fill in the data (Telegram login, point of departure and arrival, type of package and date of departure) and click on the «SUBMIT» button:

Banner

Thus, you have actually created an application that is sent to the database and stored until a person who needs to send a package to Paris responds to it.

You are a sender

Now let's take on the role of the sender. Let's imagine that you need to transfer documents from Dubai to Paris on October 15th. The search for a perfomer using a chatbot works in a similar way, only when choosing actions with baggage, you must select the «SEND» option.

When you fill out and submit the application form, the bot will start searching the database for all passengers on the Dubai-Paris flight on October 15, and at the end will suggest nicknames of potential couriers. This completes the task of the bot. Next, you can click on the user's login and continue chatting with him in the Telegram chat:

Banner

Built-in chat with the operator

The chat bot has a permanent button with which you can open another chat bot at any time and chat with the operator:

Banner

On the server side, the bot is an encrypted layer that allows you to anonymize contact with our customer. Thus, any appeal from the chatbot arrives in the form of an application to Bitrix24 CRM, within which the client's website is created.

Technical realization

To create a web app in Telegram, we used several technologies. The interface is made using the Vue.js JavaScript framework, and the program-administrative part is made using the Laravel PHP framework.

Let’s look at the development process in order:

  • We first created a chatbot using the @BotFather internal bot. This is a technology that makes it easy to register, configure and manage other Telegram bots.
  • Using Vue.js, we designed a web application interface (a form for a client and a form for a performer) and connected it to the Telegram API.
  • Applied components for selecting the date of the trip (datepicker), multiple selection (multiselect) for the type of baggage and the usual selection (select) for the destination and size of the baggage.
  • With the help of Laravel, we created a database, and API methods were used to access data (write, read, and return filtered information about trips).
  • We set up and tested methods for accessing the database using Axios, a client-side JavaScript library for making HTTP requests.
  • We placed the client (front-end) and server (back-end) parts of the program on the hosting.
  • We set up the chatbot by adding a button to call the built-in application.

Summary

An easy-to-use Telegram bot with simple design, where the interests of users come first. This is what the result of the work of the Webnauts developer looks like. But despite its simplicity and relative affordability of development, the web-app chatbot for Telegram can be called a full-fledged replacement for a functional website or mobile application that collects data, selects information and attracts potential customers.

[post_title] => Application in the Telegram Chat Bot for Parcel Delivery [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => application-in-the-telegram-chat-bot-for-parcel-delivery [to_ping] => [pinged] => [post_modified] => 2023-09-17 15:53:46 [post_modified_gmt] => 2023-09-17 12:53:46 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=17285 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [3] => WP_Post Object ( [ID] => 17754 [post_author] => 14 [post_date] => 2023-01-09 14:51:28 [post_date_gmt] => 2023-01-09 11:51:28 [post_content] =>

About the project

GT Real Estate GmbH is an international real estate agency with headquarters in Germany and a wide range of services: from the selection of residential and commercial properties to the legal registration of the purchase / sale or lease / lease of real estate.

Initially, we were approached for SMM services, but during the negotiations we came to the conclusion that the company's website needs to be upgraded before promotion, especially since the client plans to actively expand in the European market.

So, we faced the following tasks:

  • transfer the site-catalog of the real estate agency to the popular WordPress platform, while keeping the corporate design;
  • implement multilingualism and basic SEO optimization;
  • fill web pages with clear and compelling articles about the company and its services.

Did we manage to adequately present the agency on the Internet? We are telling you what we did step by step.

Banner

Website navigation

First screen

The company's website is designed in a minimalistic style in three colors — blue, white and turquoise. The main page greets us with a thematic photo cover and headline, a laconic header and a filter bar, as well as a list of related company services. In words, the first screen seems a bit cluttered, but in reality it looks very light, neat and presentable:

Banner

Search filter

Special attention should be paid to the horizontal filter with the CTA-button «Search», which makes it easy to sort real estate for purchase / rent by type, location (country / city) and price.

Users can go to a more advanced search and filter objects by additional criteria: location radius, number of rooms, profitability, minimum and maximum area and cost. And the found options, in turn, can be sorted by recommendations, price (from low to high) and date (from new to old):

https://wnauts.com/wp-content/uploads/2022/11/gt-real-estate-gmbh-site-development-with-property-search-filter.mp4

An interesting feature: if you hover over one of the found objects, it is displayed on the map on the left:

https://wnauts.com/wp-content/uploads/2022/11/gt-real-estate-gmbh-search-filter-on-site-real-estate-agency.mp4

Services

I must say that GT Real Estate GmbH is proud of its exclusive range of services, so this section is on the first screen, immediately indicating the high professionalism of the company. By the way, all services are described in a concise, meaningful and accessible manner by our copywriter:

https://wnauts.com/wp-content/uploads/2022/11/gt-real-estate-gmbh-real-estate-company-website-services-page.gif.mp4

Real estate

Scrolling down, we see a well-structured and visually appealing block with 2 types of properties in the form of photo cards. If the user did not start looking for their dream home at the very beginning, the choice of a residential or commercial property can begin with this section:

Banner

Blog

«News and Articles» is an important section in terms of SEO-promotion. It also has a block structure with cards containing a cover photo, title, and heading. By filling blog pages with useful and SEO-optimized articles, you can achieve impressive results and gradually bring your site to high positions in Google search results.

The most relevant objects are collected in a separate block of the same name in the form of a compact circular photo gallery with important information: price, title, address and area. And the «buy / rent» labels in the upper right corner of each card makes it clear to the user whether the object is for sale or for rent.

Also, each card has the function of listing, previewing and adding an object to favorites. This is a very convenient and fast technique that saves the user from having to move from page to page:

https://wnauts.com/wp-content/uploads/2022/11/gt-real-estate-gmbh-development-circular-photo-gallery-on-site-wordpress.gif.mp4

The site footer has a dark blue background and contains the usual company contacts and user agreement:

Banner

Functionality and technical realization

As we have already said, the basis for the site was the easy-to-manage WordPress platform. The unique design was not a key requirement of the client, so we settled on a ready-made solution within the platform — Houzez, which is a special theme for placing real estate ads:

Banner

At the request of the client, we have hidden the possibility of placing ads from unregistered users on the site. To do this, sellers and tenants can contact the agency through the application form:

Banner

At the same time, we have provided site administrators with the simplest process of placing ads due to a convenient control panel:

Banner Banner

Multilinguality of the website

The main and most labor-intensive task of the project was the implementation of multilingualism. We abandoned automatic Google Translate translation and translated the site into 5 languages ​​using the PolyLang plugin, customizing it a bit using the PHP programming language:

Banner

The plugin perfectly integrates into the admin panel interface and duplicates all content in German, English, Polish, Ukrainian and Russian:

Banner

When all pages are translated and published, the user can only switch the language in the site header in the usual way:

Banner

After translating the content, we took care of multilingual SEO and performed basic internal optimization, as a result of which the site was open for search and successfully indexed by Google robots.

Text content of the pages

When the interface has made a first impression, the user is ready to get acquainted with the content — capacious and concise, understandable and structured. Our copywriter worked on the text content of the site, presenting complex information in a simple and understandable language:

https://wnauts.com/wp-content/uploads/2022/11/gt-real-estate-gmbh-text-filling-site-pages-copywriting.mp4

The result

The team of developers, copywriters and Seo-specialists of Webnauts did everything so that after the development the website of the real estate agency not only looked elegant and professional, but also inspired absolute confidence and reliability, and in 5 languages of the world. If you look at the site through the eyes of an administrator, you will see a convenient and understandable control panel that allows you to easily edit information, create pages and place real estate ads without the help of a developer.

[post_title] => Website Development for a Real Estate Agency in Germany [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-of-a-real-estate-agency-in-germany [to_ping] => [pinged] => [post_modified] => 2023-09-13 16:48:27 [post_modified_gmt] => 2023-09-13 13:48:27 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=17754 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) )