Skip to content

INTEGRATION.md

Latest commit

 

History

History
258 lines (164 loc) · 11.4 KB

INTEGRATION.md

File metadata and controls

258 lines (164 loc) · 11.4 KB

Integration Guide

Authentication

Initialization

To integrate with Q-Consultation, you first need to initialize the QuickBlox SDK.

Create session

The next step is to create a session. This must be done before login or creating a user.

After login, you can use the session token to go to any Q-Consultation page without authorization on the site.

Routes:

[pathname] is the path to a specific Q-Consultation page

[session_token] is the token from the session (https://docs.quickblox.com/reference/session-model)

Create user

Sign Up page in the client application

You can create a user on the Sign Up page in the client application, but you can also create it outside the application using the API or SDK.

Routes:

User object schema: https://docs.quickblox.com/reference/user-model

There are 2 types of users in Q-Consultation: client and provider.

To create a provider, you need to set user_tags to provider value. For a provider, you can fill in the custom_data fields (optional): description, language, avatar.

To create a client, you need to leave the user_tags field empty. For a client, you can fill in the custom_data fields (optional): address, birthdate, gender, language, avatar.

custom_data is an JSON object converted to a string.

Login user

Sign In page in the client application

Sign In page in the provider application

You can login to the application on the Sign In page in the client and provider applications, or you can do it outside the application using the API or SDK.

Routes:

To be able to work with all the data, you need to login as a user.

Waiting room / Live queue

Appointments created by client or provider are placed in a Live queue with the selected provider. The client is waiting for a response from the provider in the Waiting room.

Waiting room

Live queue

Routes:

To create an Appointment in Q-Consultation, it is imperative to create a Dialog, then create a Custom object (Appointment). If you need to notify your opponent about the created Appointment, then you need to send System messages to your opponent (for this you need to be connected to the chat).

Create Dialog

Need to create a group Dialog with the user

Create Custom Object (Appointment)

Appointment is a Custom Object class(https://docs.quickblox.com/reference/custom-objects) with the next fields:

client_id: int // Client id(QB user id) to whom this appointment is scheduled

provider_id: int // Provider id(QB user id) to whom this appointment is scheduled

dialog_id: string // QB group dialog id associated with this appointment

description: string // Contains description for appointment

date_end: datetime // Appointment end date in ISO format

date_start: datetime // Appointment start date in ISO format

priority: int // may be 0,1 or 2, 0 - lowest

notes: string // Notes created by provider

conclusion: string // The conclusion from the provider

language: string // Language conclusion

records: int[] // Array of recorded files ids

When creating an Appointment, it is necessary to specify the fields: client_id, provider_id, dialog_id, description.

Connect to Chat server

In order to send System messages and Messages to Dialog, you need to connect to the chat.

Send System message

After creating an Appointment, you can send 2 system messages to your opponent.

The first system message must be sent with the parameters: notification_type(value: "DIALOG") and dialog_id. This system message tells the opponent to get this Dialog and connect to it.

The second system message must be sent with the parameters: notification_type(value: "APPOINTMENT") and appointment_id. This system message tells the opponent to get this Appointment.

App styling

You can fully customize the application style settings. Most used colors are defined as css variables in src/variables.css in every packages.​

The main set of variables are the following:

Variable Value Description
--grey-10 rgba(0, 0, 0, 0.4) Shadow for header and notifications
--grey-11 rgba(0, 0, 0, 0.8) Backdrop color for modal dialogs
--blue-3 #CCD0D9 Border color
--blue-9 #3978FC Theme main color
--blue-5 #99A9C6 Theme secondary color
--grey-8 #333333 Primary text
--blue-7 #6C7A92 Secondary text
--red-4 red Errors text
--red-5 #FF4B4B Color for high priority button / notification
--green-5 #00C248 Color for medium priority button / notification
--orange-4 #FFBE30 Color for low priority button / notification

Svg file is used as a logo. This file can be found in "icons" directory in every packages.

The logo is only used in the Header component. When replacing a logo, it may be necessary to change the height of your logo. To change the height of the logo, you need to change the value of the css variable --HeaderLogo-height

Translations

The react-i18next library was used to implement the translations.

Translations can be found in "translations" directory in every packages.​

You can add text here with new languages. After adding new languages, be sure to include them in the i18next configuration files.

Integration pages

Integration pages are examples of how your application/website can interact with the Q-Consultation application. Now the integration pages use links that lead to the provider's profile.

Link: https://localhost:3001/providers/[provider_id]

In this link, you need to replace [provider_id] with the id of the previously created provider.

To run the integration pages locally, you need to run the command: npm run pages.

This command will run integration pages on http://localhost:8000 .

Currently, there are available two integration examples. The source code can be found in the 'packages' folder >> 'integration-pages' (/packages/integration-pages).