PROFI MAKE
Luxury real estate company in the UAE
- 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.
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:
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:
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:
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:
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:
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:
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):
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:
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:
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] => 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.
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:
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:
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:
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:
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 ) )Client projects
-
Website for Renting Luxury Real Estate in the UAE
-
Team:
4
-
Cases:
0
-
Reviews:
0
-
-
Application in the Telegram Chat Bot for Parcel Delivery
-
Team:
1
-
Cases:
0
-
Reviews:
0
-