With CONTUS MirrorFly Chat SDK for web, you can easily add real-time chat features to your client app within 30 minutes.
Through our client SDK, you can initialize and configure chat into your app with minimal efforts.
If you're looking for the fastest way to build your app’s UI with MirrorFly Chat SDK, you can use our sample apps. To get our sample apps, click here.
|Edge||13 or higher|
|Chrome||16 or higher|
|Firefox||11 or higher|
|Safari||7 or higher|
Skip this part if you are already having your license key.
To integrate MirrorFly Chat SDK into your app, you will need a SDK License Key. The MirrorFly server will use this license key to authenticate the SDK in your application.
Step 1: Register here
Step 2: Login to your Account
Step 3: Get the License key from the
application Info’ section
CONTUS MirrorFly Chat for react, makes the in-app chat development process easy with all the essential messaging features
Since it’s the core of all the languages - Importing react into the application is the fundamental step to proceed further before using any language.
Install mirrorfly-sdk (https://www.npmjs.com/package/mirrorfly-sdk) npm package by using the below command
Step 1: Install Mirrorfly Sdk in your application
Step 2: Import the SDK into your application where you want
Skip this part if you are already installed the SDK using NPM.
Step 1: To download the files from the React SDKs, click on the Download button.
Step 2: Extract the files from the downloaded zip file and copy them into your application.
Step 3: Once the file has been copied, include the script file into your
Step 4: Create a new file SDK.js in the project root and paste the below code,
Step 5: Import the SDK into your application
The below are the common keywords/terminologies used in SDKs with their descriptions
|Unique ID assigned for each user Ex: 12345678 (any alphanumeric). The below characters is not allowed in userId: U+0022 (") U+0026 (&) U+0027 (') U+002F (/) U+003A (:) U+003C (<) U+003E (>) U+0040 (@) userID should follow below specification: https://xmpp.org/extensions/xep-0106.html|
|userID+@+domain of the chat server Ex. firstname.lastname@example.org|
|Unique ID assigned for each group Ex: group123456 (any alphanumeric). GroupJID = groupID +@mix.+domain of the chat server Ex: email@example.com`|
To begin with the initialization process of the chat SDK you are required to have certain data that responds to the changes in the connection status in the client's app.
Now, paste the license key on the licensekey param and use the below given method to pass these data through the SDK for further processing.
When you are in the trial mode, by default the sandbox servers will be used. After purchase it will be upgraded to dedicated server.
|licenseKey||Mirrorfly's License Key||String||true|
|callbackListeners||Check here for callback listerners||Object||true|
Step 1: You can use the below given method to register a new user.
Step 2: Once you are registered, you will be provided with a username and password that you can utilize to make the connection with the server via connect method.
|Unique Id to Register the User. User identifier can only contain lowercase alphanumeric characters, hyphens (-), and underscores (_)||String||true|
|key||Name of the Key||String|
|value||Name of the value||String or Boolean or Number|
FORCE_REGISTER is false and if it reached the maximum no of multiple-sessions, then registration will not success and it will throw a 405 exception. Either
FORCE_REGISTER should be true or one of the existing session need to be logged out to continue registration.
|data||Username, Password, isProfileUpdated, isSandbox userJid||Object|
username is the unique id that allows you to connect with other users to send or receive messages.
Step 1: You can use the credentials that you have obtained while registration to make the connection with the server.
Step 2: Once you have created the connection successfully, you will be responded with an approval message as ‘statusCode of 200’ or else will get an execution error.
Step 3: With this you can also trace the connection status that you receive in connectionListener callback function.
Step 4: If you face any error while making a connection with the server, you will receive an error message with callback.
To learn more about all possible logins and profile related setup, go to Profile Section.
Finally, to send a message to another user you can use the below given method,
You can use the
const userJid = SDK.getJid(USER_ID) method, to generate a JID for any user.
|JID of the To User. username + "@" + xmppSocketHost||JID String||true|
|Text Message Body||String||true|
|data||Object of data||Object|
To receive a message from another user you must implement the messageListener function. It’s a function that will be triggered whenever you receive a new message or related event in one-to-one or group chat. Further to initialize the SDK, you need to add the below callback method during the process.
To learn more on 'message listener callbacks,' see the Message Callback Event Listener Section