Blog

We live in the informational age of digital life and online communication. Information delivery is changing, and today video calls are a global trend. Using a video chat app, you can call colleagues, clients, and partners, handle online consulting sessions, and the like.

Why you need a video chat

Video chat is becoming an essential part of live chat software helping businesses enhance the customer experience. It can help a lot in improving sales provide better support. According to lifesize, video calling brings significant benefits to the working process:

• 99% of respondents think that video calling improves communication and enhances productivity;
• 90% of respondents say video calling helps them to get their point across;
• 89% of respondents agreed that video calling helps them to complete the tasks faster;
• 87% of employees that are not present for a meeting feel better engaged through a video call.

Live video chat is applicable to any business area: online commerce, consulting, finance, e-learning, etc. Healthcare industry is widely adopting video calls – global healthcare trends, like telemedicine, telepharmacy, and telepsychiatry are entirely based on it.

Let’s see how you can strengthen your business by using the custom video chat system.

Improved customer service

If a customer has a question, they visit your website and try to contact the support team via live chat. Video communication makes it fast to fix any issues because support managers can assist their customers immediately. Video calls can help them to tackle any challenges they may experience while using your product. When a customer needs you most, you’ll be right here.

Minimizing costs

Speaking about online support, we all agree that it may be challenging to explain the problem via a chat. Imagine, how much money the company loses when it is impossible to solve the issue from the first time? A video call can solve this challenge since the visual form is clearer than text instructions. Video chatting enhances remote work management. This decreases the operational costs of office management and organization of business trips.

The growth of sales

Online video chatting is erasing your geographic boundaries. You may expand your audience, explore new markets and be in touch with clients from all over the world. Surfing your e-shop, customers may experience difficulties selecting the product they need. Via a video chat app, your employees may connect with the customers and help them select the necessary product.

Enhanced teamwork and productivity

Video chatting also enables regular and clear communication between team members, even if they are not located in the same building or even the same country. This helps cut down on in-office costs and increase the productivity of remote team members. Many negotiations and conversations can happen well over a high-speed video call. In one click, you can arrange a meeting with your employees, clients, and partners without the necessity of leaving your room.

Main features of the video chat app

The video chat development process does not differ much from the development of a regular application, but there are some nuances that you should study more carefully because your success depends on them. Let’s start with the most important thing.

First, you should consider the most essential features of your application. None of video chat apps can exist without the following functionality:

User registration & profile settings

Give your users a convenient way of getting started in your video chat service. You may ask them to fill the sign-up form from scratch or allow to register via a popular social network. The video chat app should also provide an interface for managing the account details and settings.

Search and add contacts

This feature will allow your users to find people they need and start using your application.

User and message status

It is convenient to know whether your companions are online and if they have read your message. Perhaps, the chat system failed to deliver the message and you should try one more time?

Push notifications

As we’ve already mentioned, push notifications allow you to always stay in touch with your users. The users will benefit as well – thanks to pushes, they will never miss an important chat message or application update.

To enhance the capabilities of your video chat application, consider adding additional features that will stand your product out of competitors:

• End-to-end encryption – ensures the complete security of user information;
• Cloud services synchronization – storing the user attachments on your servers;
• Automatic backup – to avoid accidental loss of important information;
• Support for various data formats – text, video, audio, emoticons, pictures, photographs, stickers, etc.

This is a basic set of desired chat features based on user preferences. After promoting the MVP of your app, you will get the first reviews and see how you can improve it.

How to create your video chat app

To develop the chatting functionality, you can use one of many ready-made solutions. This will save your money and the time and effort of your development team.

Backend development

Most of the video call applications are developing using WebRTC. It is an open-source project built and maintained by Google, Mozilla, Opera, and others. It allows you to build real-time communication software in your browser and is standardized at the W3C & IETF levels.

There are two ways to develop and run a video call application using WebRTC: On-premise and using a CPaaS, or Communication-Platform-as-a-Service, provider.

• On-premise variant means that it is your job to develop the application and manage its server infrastructure.
• CPaaS provider will offer you to use their ready-made infrastructure. This will allow you to focus on the development process and save a considerable amount of time and money.

Let’s consider the ways of dealing with each strategy:

On-premise – Peer-to-peer approach

To deploy any software using the on-premise model, you will need your own physical servers. They can be located in your organization or you may rent a server in any data center.

On-premise solutions are the most secure way to store the data. You also can access any information you look for at any time you need. But you must ensure the continuous work of the servers, their maintenance, and security. In case of the P2P approach, the system capabilities are limited to 5-6 users. To implement the group calls, recording, saving the data, you will need a media server.

On-premise – Media Server approach

A media server remains between the call participants and helps them to exchange the data. This approach allows you to add some advanced features, such as recording, simulcast and multi-party calls.

Using the media server approach, you will need to add the signaling layer and STUN/TURN servers. Also, you will have to buy or rent the hardware to include the media server itself and to configure it.

Using a Communication-Platform-as-A-Service (CPaaS) Provider

It provides you its own infrastructure. Typically it includes different software tools, APIs, sample code and other out-of-box solutions. It allows you to focus on the development without setting up your own infrastructure.

UI/UX design

A good application should have an attractive and intuitive user interface and user experience. The users shouldn’t spend lots of time to understand how to perform the action they need. As for the video chat interface, it should have a clear and catching design without lots of buttons and icons.

Cross-platform video chat application

The main step of video chat development is adapting it to different platforms (Android, iOS, and web). To make a cross-platform chatting app, you may use React Native or Flutter frameworks.

Integrations

To build your own chat app, you may use third-party solutions like QuickBlox. They make it possible to real-time client-server communication and information exchange, like streaming. The necessary part of a video chat application is organizing a stable internet connection. QuickBlox solution is one of those tools that can be easily integrated into our application.

Conclusion

Video call apps give people an opportunity to always stay in touch without any effort. For businesses, it means easy communication with clients and partners, as an efficient workflow. A video chat application can be a sustainable service or part of your own infrastructure specific to your business needs.

If you are thinking of adding a video call feature to your platform or building a new video chat app, browse QuickBlox’s SDK and API documentation. This can make the development process a bit simpler since you don’t need to code from scratch. For more details, feel free to contact our sales department right now!

One of the most appealing sides of React Native framework is that you only have to build your app at once using JavaScript. React Native means two times lower costs for building and maintenance. It has a large community and a variety of libraries in native languages. It is similar in structure to React.js, so it is easy for web developers to work with it.

React Native makes use of native Objective-C/Swift and Java/Kotlin ingredients. They help native-like UI and boost performance in intensive operations. Yet, you can’t reuse native modules across different platforms.

We have recently announced the release of the Quickblox React Native SDK. Today we have prepared a step-by-step guide on building a messenger app with it. You are welcome to download Quickblox React Native SDK. It is in beta now, and we are ready to hear the feedback and improve our SDK according to your proposals.

Why do you need QuickBlox React Native SDK?

QuickBlox React Native SDK offers you all you need to build a chat messaging app. Our toolkit contains helpful methods for implementing the following functionality:

• Authentication. Upon the user logins to the application, the application starts a secure session. The token is valid for 2 hours after the last API request and is automatically renewed.
• Users. SDK has all the necessary toolset for secure storing, managing and updating the user information.
• Chat. For our messaging API, we use the XMPP protocol. Using the toolkit, you can manage the connection to chat server and managing 1-1 and group dialogs.
• Content. This module allows to store attachments and manage the content.
• Push Notifications. Push messages help you to keep in touch with the users who are not currently online. Using QuickBlox React Native SDK you can integrate push messaging into your Android or iOS app.
• Custom Objects. The Custom Objects module provides all you need to manage and update your records.

How to create a React Native app using QuickBlox SDK?

Getting started

To create a new React Native chat messaging app with QuickBlox SDK from scratch follow these steps:

1. Install Node.js
2. Install React Native
3. If you’re on MacOS – install CocoaPods
4. Run react-native init AwesomeChatApp to create a new project
5. Navigate to created project and install JS dependencies with npm install
6. Add QuickBlox SDK to dependencies with npm install quickblox-react-native-sdk --save
7. If you’re on MacOS – install Pods: enter ios folder and run pod install

You’re done with dependencies!

Launching the app

Now you can start the app with react-native run-android or react-native run-ios

But the application created is not really a chat messenger yet, right? So now you should create some UI for messages and then use our SDK to make it alive!

To make SDK work you should use your QuickBlox application account. To create a QuickBlox application, follow the steps below:

1. Register a new account at https://admin.quickblox.com/signup. Type in your email and password to sign in. You can also sign in with your Google or Github accounts.
2. Create the application clicking New app button.
3. Configure the application. Type in the information about your organization into corresponding fields and click the Add button.
4. Go to the screen with credentials. Locate Credentials groupbox and copy your Application ID, Authorization Key, Authorization Secret and Account Key. These data needed to run your application on QuickBlox server.

Now, it’s time to turn on QuickBlox SDK

import QB from "quickblox-react-native-sdk"

const appSettings = {
  appId: xxxxx,
  authKey: xxxxxxxxxx,
  authSecret: xxxxxxxxxx,
  accountKey: xxxxxxxxxx,
  apiEndpoint: '', // optional
  chatEndpoint: '' // optional
};

QB.settings
  .init(appSettings)
  .then(function () {
    // SDK initialized successfully
  })
  .catch(function (e) {
    // Some error occured
    // look at the exception message for more details
  });

Now you should sign in and connect to chat:

QB.auth
  .login({
    login: 'yourlogin',
    password: 'yourpassword'
  })
  .then(function (info) {
    // signed in successfully, handle info as necessary
    // info.user - user information
    // info.session - current session
  })
  .catch(function (e) {
    // handle error
  });

Once you signed in you can connect:

QB.chat
  .connect({ userId: 12345, password: 'passw0rd!' })
  .then(function () { /* connected successfully */ })
  .catch(function (e) { /* some error occurred */ });

Great! Now since you’re connected to chat – it’s time to send a message to someone. Let’s create a new dialog:

QB.chat
  .createDialog({
    type: QB.chat.DIALOG_TYPE.CHAT,
    occupantsIds: [12345]
  })
  .then(function (dialog) {
    // handle as necessary, i.e.
    // subscribe to chat events, typing events, etc.
  })
  .catch(function (e) { /* handle error */ });

In order to receive new messages we should tell SDK to send us events when there are new messages in chat:

QB.chat
  .subscribeMessageEvents({
    dialogId: dialog.id // something like 'dsfsd934329hjhkda98793j2'
  })
 .then(function () { /* subscribed successfully */ })
 .catch(function (e) { /* handle error */ });

But how will we handle new messages? We should probably assign an event handler:

import { NativeEventEmitter } from "react-native"

const emitter = new NativeEventEmitter(QB.chat)

function newMessageHandler (event) {
  const {
    type, // name of the event (the one we've subscribed on)
    payload // event data (new message in this case)
  } = event
}

emitter.addListener(
  QB.chat.EVENT_TYPE.RECEIVED_NEW_MESSAGE,
  newMessageHandler
)

So, now we have a dialog, we subscribed for new messages and created function to handle incoming messages. Let’s send our first message:

const message = {
  dialogId: 'dsfsd934329hjhkda98793j2',
  body: 'Hey there!', // message text
  saveToHistory: true // keep this message in chat history
};

QB.chat
  .sendMessage(message)
  .then(function () { /* send successfully */ })
  .catch(function (e) { /* handle error */ })

That’s it!

Conclusion

QuickBlox React Native SDK is here to speed up the process of messaging app development – from designing the prototype to final testing. Using our toolkit, you can integrate the messenger, voice and video calling to your app, manage the files and objects. If you have any questions or suggestions, please submit a ticket to our support team.

Push notification is a friendly reminder to your customers about your brand. It is a great marketing tool that helps you keep in touch with the users and return them to your website. Notifications will reach the user anyway, even if they are not online or use a different mobile or desktop device. Push mailing allows you to develop a more efficient and responsive marketing strategy. It is easy to adjust it to user behavior, so it is more efficient than PPC advertising and bulk mailing.

To send the push messages, it is enough to get the permission of the user. They don’t even need to provide personal information, like a phone number or email address. This is the first step to creating the experience of positive interaction with the user.

What is a push notification and how is it different from a text message?

Today, push notifications increasingly replace SMS messages. You can plan mailings and segment the recipients, customize the notifications, create interfaces. You can analyze the effectiveness of the distribution, as well as user interaction with notifications. Push alerts provide more segmentation capabilities and are much cheaper than SMS.

Why should you use push notifications?

First of all, push messaging is a great way of communication with the customers, engaging and reactivating them. It allows you to encourage users for performing the necessary actions, and track their behavior. You can analyze their interests, preferences, customize the content and choose the right time to send it.

While the emails are often left unread, push notifications always reach the customers. They are also less annoying then bulk mailing. You send push reminders to the loyal audience since the recipients have agreed to get them. The information in the push messages is brief, so the users don’t have to spend a lot of time understanding it.

Push notifications exist as a marketing channel for reaching customers, but they are also convenient for the users.

It is a good way to follow the updates of their favorite resources: Hot Sale alerts, new publications, tips, promotions, price updates. They remind to complete some actions: continue the game, finish the purchase, do the exercise, take medicine, etc.

You can use push notifications as targeted advertising. They do not broadcast bulk messages yet communicate with each separate user. Let’s consider the main push notifications advertising campaigns.

Types of push notification campaigns

You can use push notifications as targeted advertising. They do not broadcast bulk messages yet communicate with each separate user. Let’s consider the main push notifications advertising campaigns.

Geo-targeting

Geo-targeting is also known as local PPC. It refers to communicating with the customers located near the advertised company. To send the most relevant push notifications, customize the campaign according to the time zone and location of users.

Promotional and discount messages

This is the simplest and most common type of push campaigns. Its main rule is to make an adequate frequency of notifications. If the promotion is available for a limited time, make sure that the client has enough time to use the offer.

Reminder notifications

Based on user activity and the data from external sources, an app sends reminders. It helps them not to miss the opportunity and not forget to do something. If the user left the application with an unplaced order, the company sends a push notification with an offer to complete it.

Surveys

Personal user interaction improves campaign performance and increases loyalty. You may create personalized survey interfaces asking for feedback. The replies will go to the servers which process them.

How do push notifications work with business apps?

Push notifications are good for applications of different business areas: Synoptics, Cooking, Banking, Travel, E-commerce. In specialized business applications, push notifications can perform official, informative functions, for example:

• a notice of money transactions (from financial apps)
• notification of a received letter or personal message
• information about updates or program crashes, etc.

How to add push notifications to an application?

Each mobile application platform has its own OSPNS (Operating System Push Notification Service). To add push notifications to an application, you need to register it with the OSPNS. The OS service provides an application programming interface (API) to the app publisher. The app publisher then adds the SDK to the app, then uploads the app to the appropriate app store.

Despite this, the correct tuning of notifications is a time-consuming process. It requires extra research – reading documentation, case studies, and implementation guides.

QuickBlox notification toolkit

QuickBlox provides the opportunity to install push notifications without spending lots of effort. We also provide clear and extensive documentation and flexible processing tools.

Using our tools, you can send cross-platform notifications from the Android app to an iOS device. This ensures the synchronization of actions across many mobile devices.

Wrap-up

Push messaging is communication with the users already interested in your business. Sending well-considered, relevant, and timely messages is a great marketing strategy. By focusing on your business goals, you will develop and maintain your customer base.

QuickBlox can help you organize notifications across platforms, devices, and users for better engagement and delight of your customers. Contact our team to learn more about QuickBlox push notifications solutions.

Any communication solution provider needs a communication protocol. There is a bunch of them at the market and one needs to give a good thought before they understand the way they work and opt for the one most relevant in their particular case. We at QuickBlox chose XMPP protocol once and the time has come to spread a word about it.

What is XMPP (jabber)?

XMPP is quite an old technology. Launched under the name Jabber, it was an open-source project for developing a protocol capable of supporting instant messaging solutions. Jabber also became the name of an instant messaging service based on XMPP.

What is the XMPP protocol? If we decipher the abbreviation, we will get extensible messaging and presence protocol, and this is exactly what XMPP is. It is a protocol for a messaging service based on extensible data exchange that can show the user’s “presence” – their ability to send and receive messages.

During two decades of its existence, it has got a reputation of a reliable solution and even earned the trust of such industry leaders like Google and Facebook that used XMPP in their messaging services – Google Talk and Facebook Messenger.

At QuickBlox, we opted for XMPP as it has always been chat-oriented, and chats and instant messaging are the primary focus of our service. XMPP is perfectly suited for real-time messaging including all types of instant communication – private, public or group messaging, video and audio communication, data exchange. Let’s look at XMPP strong suits to see why it became our protocol of choice and you may consider it your choice in 2019.

Why use XMPP in 2019?

Open Standard

XMPP uses an open standard published by IETF. Any provider that complies with this standard can implement an instant messaging solution using XMPP. Therefore, XMPP supports a free choice of the IM vendor.

Decentralized architecture

There is no central server that supports communication via XMPP. All communication is processed via servers with no direct connections between clients, but anyone can launch and maintain their own XMPP server. This ensures server independence, increases security, and provides additional customization opportunities.

Operating system and device independency

XMPP is not limiting you in the choice of operating systems or devices on which you run your IM solutions.

Great support

Compared to other communication protocols, XMPP wins points in the support category. As one of the oldest protocols, it has one of the most effective support services that, thanks to the contributions by Google and other companies, has evolved into an efficient and reliable function.

Disadvantages of XMPP

As everything, XMPP has its weaknesses of which we are aware of. For the time being, however, we believe that its advantages outweigh its drawbacks, and XMPP remains a working component of our communication solutions.

High overhead

XMPP transmits lots of redundant data. Sometimes, as much as 60% of data is repeated creating huge amounts of unnecessary traffic.

Mandatory XML format for IM

In XMPP, messaging is done in an XML document with no option to send unmodified binary data. This restriction makes it impossible to send files without using additional communication protocols.

What XMPP features does QuickBlox implement?

In our communication solutions, we implement a set of the most important features that are necessary for a chat application:

RFC-6120

This document defines the basic specifications and standards describing, among others, the security and encryption mechanisms used in XMPP-based instant messaging applications. Particularly, RFC-6120 refers to the TLS 1.2 security protocol that QuickBlox uses in its solutions.

RFC-6121

RFC-6121 is another standard that governs the management of rosters (contact lists of the user) and presence information (the user’s status in the context of their ability to participate in the conversation).

XEP-0045

XEP-0045 is an XMPP extension for a highly customizable multi-user chat. With XEP-0045, you can enable conversations in chat rooms as well as exercise user management functions. However, XEP-0045 does not support establishing a system of user roles and privileges or changing a role or privilege for a particular user.

XEP-0280

XEP-0280 is used to send carbon copies of instant messages to different resources to maintain the uninterrupted conversation flow. This extension allows users to continue conversations from different devices with no messages lost.

XEP-0016

The XEP-0016 extension provides the ability to block communication with a particular user based on personal preferences. With XEP-0016, you can block users both in private chats and in group conversations.

XEP-0198

XEP-0198 is an XMPP extension that supports the management of data streams. The functionality of XEP-0198 allows resuming the stream after an interruption.

XEP-0333

With XEP-0333, you get the ability to set chat message markers, such as “delivered”, “received” or “acknowledged”. This way, users get visual confirmation that their messages have reached their recipients.

XEP-0012

XEP-0012 allows providing information about the user’s last activity or presence in the chat. In QuickBlox solutions, the presence data is shown in seconds.

XEP-0352

This extension enables displaying the user’s status. With XEP-0352 implemented, the chat shows whether the particular user is online or not.

What XMPP features can be implemented upon request?

XEP-0060

The XEP-0060 extension allows implementing the publish-subscribe service. In our case, we may develop the service with Telegram channels.

XEP-0191

XEP-0191 is a blocking command extension. It is used to block communications and can be implemented faster and easier than XEP-0016.

Within the functionality of XEP-0191, the following features are also available:

• Edit message
• Delete message
• Self-destructing messages

XEP-0033

XEP-0033 enables sending messages to multiple recipients simultaneously. On the other hand, it allows sending user presence information to multiple servers at the same time.

Gateways

We can build integrations with the gateways between the XMPP network and legacy messaging services. Particularly, we can create integrations with proxy gateways that act as an XMPP client on a non-XMPP instant messaging service.

Integration with email and message queue

QuickBlox could provide you an option to integrate your email with the XMPP network. This will allow you to receive the messages that were left unread for a while. The messages will be sent to the chat through the Simple Mail Transfer Protocol that is SMTP.

QuickBlox can also ensure you with the message queue integration. A message queue is an integration pattern for the information exchange while being connectionless. The messages you receive will be redirected to your MQ service for further analysis. You’ll also have a dynamic configuration for several message queues.

Conclusion

XMPP is a reliable communication protocol used by numerous companies including Google and Facebook. It’s specifically made for instant messaging and, thus, eventually became our choice.

QuickBlox is ready to provide you with the standard chat features but can also add customizable ones upon request.
If you are interested in setting up a multi-functional chat application or need more details about the available QuickBlox SDKs, contact us, and we will be glad to help.

Cross-platform development has been a trend in mobile development in recent years. The desire to reduce the time and money spent on developing mobile applications on two platforms at once has provoked the active development of technology to achieve this goal. Some tools, though, are so similar to each other that it might sometimes be very difficult to make a choice. The difference, as always, lies in details.

Today we’re looking at Flutter and React Native, what their purposes are, why using them for this or that project so that you’d be able to choose the best app development solution.