Mirrorfly UIKit Sdk is a set of prebuilt UI components that allows you to easily integrate an in-app chat with all the essential messaging features.
The requirements for chat SDK for React Web App are:
- React Version 16.0 or above
- Node Version v14.17.4 or above
Before integrating CONTUS MirrorFly Chat SDK, you need to have a SDK license key for your MirrorFly application. This SDK needs to be authenticated by the MirrorFly server using the license key for further processing.
Step 1: Register here
Step 2: Login to your Account
Step 3: Get the License key from the
application Info’ section
Install mirrorfly-uikit (https://www.npmjs.com/package/mirrorfly-uikit) npm package by terminal command 'npm i mirrorfly-uikit'. Now the node_modules will have a mirrorfly-uikit folder and package.json is added with the mirrorfly-uikit dependency.
Step 1: Create a new React project or Open an existing project.
Step 2: Open terminal and install mirrorfly-uikit with npm command 'npm i mirrorfly-uikit' and check package.json whether the dependency is added with mirrorfly-uikit as mentioned below.
Step 3: Import ChatApp component from the mirrorfly-uikit package in node modules.
Step 4: Import bundle.css from the mirrorfly-uikit package in node modules .
licenseKey details can get it from the 'Overview' section in the mirrorfly Console dashboard.
|licenseKey||set your licence key|
|userIdentifier||set your phoneNumber|
|apiUrl||set your base url|
If you need chat conversation page alone initialize customconversation in ChatApp component.
We can also import Web SDK methods from "mirrorfly-uikit/dist" below code snippet is example to import SDK methods.
Note :By using Web SDK methods you can use prime functionality of mirrorfly outside of Uikit.
Note : Recent Search chat feature is not available for your easy plan then it will not display in Recent Chat Screen in Mirrorfly-Uikit.You can now run the application with single React Component. To send a message, you must first start a conversation by clicking on the add new chat icon Then, you can select the user you wish to chat from your contact list.