qcons-logo QuickBloxQuickStart Guide for Q‑Consultation Lite

Q-Consultation Lite is our free teleconsultation source code that enables you to build a stunning private video consultation app with instant messaging.

Our software is ready for web and mobile, and is compatible with iOS, Android, and the Web. Plus, if you choose to host the app with the QuickBlox HIPAA cloud, it is also HIPAA-compliant!

qcons-main QuickBlox

source QuickBloxOpen Source Software for Chat and TeleConsultation

Q-Consultation Lite open source code makes it easy and convenient to create your own private video consultation app with online chat !

This web application is built on React JS and consists of three major parts: QuickBlox back-end and two web applications for Client and Provider.

Client application interface

Main QuickBlox

Main screen

Waiting QuickBlox

Waiting room

Video QuickBlox

Video call

Provider application interface

Main QuickBlox

Main screen

Video QuickBlox

Video call

source QuickBloxRequirements

Before you start, there are a few things you need to know ahead.

  • Supported operating systems
  • Node
  • Supported browsers (current and previous versions*)
  • Windows 10

    macOS Mojave

    Ubuntu LTS/Debian 9.x

  • NodeJS >= 16 <= 18

    NPM >= 8.x

  • Desktop






  • Mobile




*We support the current stable version of the browser and the version that preceded it. For example, if the current version of a browser is 24.x, we support the 24.x and 23.x versions.

Q-Consultation Lite may work on other browsers and operating systems, but these are not tested nor officially supported at this time.

 QuickBloxReady to get started?

Step 1. Install NodeJS

In order to run this project, you will need NodeJS and npm (shipped with NodeJS). We suggest NodeJS version 16+

Step 2. Install Dependencies

Next, you will need to visit the QuickBox GitHub Repository and clone the repository or download it as a zip archive.

Once this has been completed, you need to install dependencies by running the following command in cmd:

  • > npm install

Step 3. Sign-in to your QuickBlox Account

To run the source code you will need a QuickBlox account. Sign-in to your existing account, or if you don’t have one, register for free.

Step 4. Create a QuickBlox Application

Once you are in your QuickBlox account, you need to create a QuickBlox application. This will allow you to connect the Q-Consultation Lite application to the QuickBlox server.

On the main page of the QuickBlox account, create an application by clicking the “New app” button

guide screeenshot QuickBlox

Fill in the required fields including app "Title" and app "Type", and select “Create app”

guide screeenshot QuickBlox

On the “Overview” page of your newly created application, you will find application credentials necessary to connect the Q-Consultation Lite application to the QuickBlox server. We will get back to this later.

guide screeenshot QuickBlox

Step 5. Configure the Application

Now, let’s get back to your application credentials which you can find in the QuickBlox admin panel. In order to work correctly, your application needs to know a set of configs.

You can create a configuration file by running this command and following the instructions in the terminal:

  • > npm run init:config
guide screeenshot QuickBlox

You can also manually update the "config.json" variables in the "qconsultation_config" folder.

You will need to update the following keys with your credentials.

  • {
  • // [Required] QuickBlox application Id
  • // [Required] QuickBlox application Auth Key
  • // [Required] QuickBlox application Auth Secret
  • // [Required] QuickBlox account key
  • // Should QuickBlox JS SDK work in debug mode (logging enabled)
  • "QB_SDK_CONFIG_DEBUG": false,
  • // [Optional if you use QuickBlox Shared Cloud Plan] QuickBlox JS SDK custom API endpoint
  • // [Optional if you use QuickBlox Shared Cloud Plan] QuickBlox JS SDK custom chat endpoint
  • // [Optional if you use QuickBlox Shared Cloud Plan] QuickBlox JS SDK custom ICE servers
  • // enable redux-logger
  • // URL of the client application. Used by Share Link modal. (If not set, then Share Link will not be displayed in the application)
  • "CLIENT_APP_URL": "",
  • // [Required] userId of the provider that will be opened by default on the main page
  • // [Required] Default language (en / ua)
  • // [Required] File upload limit in bytes
  • "FILE_SIZE_LIMIT": 10485760,
  • // [Required] Available for upload expansion files
  • "FILE_EXTENSIONS_WHITELIST": "gif jpeg jpg mov mp4 png csv docx pdf pptx txt xls xlsx zip webm heic heif"
  • }

[Required] denotes that these variables must be set. Without them, the application will not work correctly.

[Optional if you use QuickBlox Shared Cloud Plan] denotes that these variables do not need to be set when using the QuickBlox Basic/ Starter/ Growth/ HIPPA Cloud Plan. If you are on the Enterprise plan, these variables are required.

“FILE_SIZE_LIMIT” is used to initially check the size of uploaded files and display an error if it is exceeded. Modify it according to the limitations of your QuickBlox Plan.

  • Basic
  • Startup
  • Growth
  • Enterprise
  • 10 Mb
  • 25 Mb
  • 50 Mb
  • 50 Mb
  • Custom

Contact our sales team if you wish to upgrade plan

If you have a QuickBlox Basic/ Starter/ Growth/ HIPPA Cloud Plan (Shared server), you can skip the following step.

If you have a QuickBlox Enterprise plan, to specify custom Ice Servers instead of default ones you can set value for key "QB_SDK_CONFIG_ICE_SERVERS":

  • [
  •  {
  •   "urls": "stun:stun.services.mozilla.com",
  •   "username": "louis@mozilla.com",
  •   "credential": "webrtcdemo"
  •  },
  •  {
  •   "urls": ["stun:stun.example.com", "stun:stun-1.example.com"]
  •  }
  • ]

For more details on the format, see RTCIceServerdocs.

Step 6. Import Appointment Schema

To make online appointments work in the Q-Consultation app, it’s necessary to import an appointment schema file to the QuickBlox admin panel.

You can add the schema automatically by running this command and following the instructions in the terminal.

  • > npm run init:schema
guide screeenshot QuickBlox

You can also add a scheme manually through the Admin Panel. (If you've created a QuickBlox account via Google or GitHub and you don't have a password, then you will need to use this manual method.)

You will find the "schema.yml" file in the "q-consultation_config" folder of the project directory.

To import this file to the QuickBlox admin panel, follow the steps below:

  • 1.  If you have the QuickBlox application open in the admin panel, go to the “Custom” tab.
  • 2.  In the top-right corner, you will find the “Import” tab.
  • 3.  There, click “Browse” for the “Import schema File”.
  • 4.  Once the file is added, click “Import Schema”.
guide screeenshot QuickBlox

If something goes wrong, you can also manually create a custom class in the way described below:

  • 1.  In the top-right corner, choose “List” of the “Custom” tab.
  • 2.  There, click “Add” and choose “Add new class” from the drop-down menu. guide screeenshot QuickBlox
  • 3.  A modal window will appear where you need to specify the class name “Appointment” and create the following fields:
    • provider_id: Integer
    • description: String
    • priority: Integer
    • notes: String
    • dialog_id: String
    • records: Integer_add
    • conclusion: String
    • language: String
    • date_end: Date
    • client_id: Integer
    • date_start: Date
    guide screeenshot QuickBlox
  • 4.  After all the fields have been added, click “Create class”.
  • 5.  Once done, the modal window will close. You need to choose “Edit permission”, set the permissions as shown on the screenshot below, and click “Edit permissions” guide screeenshot QuickBlox
    • **provider_id** - QuickBlox user Id to whom Appointment is assigned to
    • **dialog_id** - QuickBlox dialog Id created for this Appointment
    • **records** - array of QuickBlox Content object Ids (call records for this Appointment)

Step 8. Create Users

In order to test how the Q-Consultation Lite application works after the launch, you can now create users - a Provider and a Client.

A Client user can be registered directly via the Q-Consultation application via the “sign-up” option.

However, the app does not provide a self-registration option for the Provider user. Instead the Provider needs to be created by the QuickBlox admin user via the admin panel.

Currently, you need to create one Provider as the default Provider. If there is no default Provider, then the Client web application will constantly send API requests to the QuickBlox server for the Provider to show as a default. Later, you can change this logic.

Follow the steps below to create a Provider:

1.  Open your QuickBlox application, and go to the ‘Users’ tab.

guide screeenshot QuickBlox

2.  Select “Add new user”.

guide screeenshot QuickBlox

3.  Fill in user data (Full Name, Email, Password, Confirm) and set a Tag “provider”, choose “Yes” for “I’m over 16”, and click “Add user”.

guide screeenshot QuickBlox

Now you will be able to log into the Q-Consultation Lite provider app with this user.
Each newly created user is assigned a unique ID. You will need this user_id later.

guide screeenshot QuickBlox

Step 9. Run the Code

Once you have completed the preparation steps listed above you are now able to run the project.

We provide the following scripts in the project directory to help you run the project.

Start dev server

  • > npm start

This script runs the app in development mode.
The application will automatically open in the browser after running the `npm start` script.

  • Provider:
  • Client:

The page will reload if you make edits.

NOTE: The Q-Consultation application uses a self-signed ssl certificate, so your web-browser will likely warn you about untrusted certificates.

Build application for production

  • > npm run build

This script builds the app for production. Artifacts will appear in the `build` folder.

See the section about deployment for more information.

NOTE: Be sure to use HTTPS on the server, otherwise video calls will not work for you.

Launch integration pages

  • > npm run pages

This script allows you to run integration pages on http://localhost:8000. You can read more about how to work with integration pages here.

​Check code

  • > npm run lint

This will run code linting using ESlint which will analyze code to find problematic patterns or code that doesn't adhere to certain style guidelines.

check QuickBloxWell Done !

Once you have completed the steps and run the project, the Client and Provider apps should be automatically open in your default browser.

Your Q-Consultation app has now been successfully set up!

What’s next ?

For additional information on how to proceed with app integration, see Integration Guide.
Learn about: