Let's integrate our UIKIT in few minutes

Quick Start#

UI Kit for Web#

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.

Requirements#

The requirements for chat SDK for React Web App are:

  • React Version 16.0 or above
  • Node Version v14.17.4 or above

Things to be Noted Before Making a Start#

SDK License Key#

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.

Follow the below steps to get your license key:

Step 1: Let’s Create an Account - Sign up into MirrorFly Console page (https://console.mirrorfly.com/register) for free MirrorFly account

Step 2: Create an account with your basic details including your name, organization details, work email, and contact number

Step 3: Once you’re in! You get access to your MirrorFly account ‘Overview page’ where you can find a license key.

Step 4: You can copy the license key from the ‘Application info’ section

license-key

Integrate the Chat SDK#

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.

"dependencies": {
"mirrorfly-uikit": "^1.0.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
}

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 .

import { ChatApp } from "mirrorfly-uikit/dist"
import "mirrorfly-uikit/dist/assets/scss/bundle.css"
function App() {
return (
<>
<ChatApp
lisenseKey="********************"
userIdentifier="**************"
apiUrl ="*******************"
isSandBox={true} // if you are a sandbox user it is true
/>
</>
);
}
export default App;

Initializing the chat Conversation#

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.

Sending Single Chat Message#

Once navigated to user chat screen, type your first message and click send button .

Sending Group Chat Message#

Your can also connect to more than one member in group chat conversation