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 for React#

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;

Integrate the Chat SDK for Vuejs#

Note:It supports Vue version2
Install mirrorfly-uikit (https://www.npmjs.com/package/mirrorfly-uikit) npm package by terminal command 'npm i irrorfly-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 VueJs project or Open an existing project.

Step 2: Open terminal and install below package added as mentioned below.

"dependencies": {
 "mirrorfly-uikit": "^3.2.6",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "vue": "^2.6.14",
 "vuera": "^0.2.7"
 }

Step 3:In main.js file Install vuera with npm command 'npm i vuera' and add below codes.

 import { VuePlugin } from 'vuera'
 Vue.use(VuePlugin)

Step 4: Create a file inside project with .jsx and implement the initialization function.

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

Step 5:In App.vue file import the .jsx file

 <template>
 <div >
   <MirrorFlyUIReactComponent/>
 </div>
</template>

<script>
import MirrorFlyUIReactComponent from './xxxxxx.jsx'
export default {
 name: 'App',
 components: {
   MirrorFlyUIReactComponent
 }
}
</script>

Step 6:In babel.config.js file add below codes to run .jsx file in vue.

module.exports ={
    "presets": [
    "@babel/preset-env"
  ],
    "overrides": [
  {
   "test": "*.vue",
   "presets": [
     [
       "@vue/app"
     ]
   ]
  },
  {
   "test": "**/*.jsx",
   "presets": [
     "@babel/preset-react"
   ],
   "plugins": [
     "@babel/plugin-transform-react-jsx"
   ]
  }
  ]
}

Integrate the Chat SDK for Angular#

Requirements#

The requirements for chat SDK for Angular Web App are:

Angular version 12 or above

Note:In Angular version 12 support version 17 in react,react-dom,@types/react-dom,@types/react

Step 1: Create a new Angular project or Open an existing project.

Step 2: Open terminal and install below package added as mentioned below.

"dependencies": {
 "mirrorfly-uikit": "^3.2.6",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "@types/react-dom":"^18.0.10",
 "@types/react": "^18.0.26" 
 }

Step 3: Create a file inside project with .tsx and implement the initialization function.

 import * as React from "react"
 import { ChatApp } from "mirrorfly-uikit/dist"
 function MirrorFlyUIReactComponent() {
    return (
      <>
      <ChatApp 
          lisenseKey="********************" 
          userIdentifier="**************"
          apiUrl ="*******************"
          isSandBox={true} // if you are a sandbox user it is true
       />
      </>
      );
  }
  export default MirrorFlyUIReactComponent;

Step 4: In tsconfig.json file add below codes to run .tsx file in angular

"compilerOptions": {
 "jsx": "react"
}

Step 5: In angular.json file add below styling codes.

"projects":{
 "build":{
  "options":{
    "styles":[
      "src/styles.css",
      "mirrorfly-uikit/dist/assets/scss/bundle.css"
    ]
  }
 }
}

Step 6: In app.component.ts file render react component in angular add below codes.

import { AfterViewInit, Component, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
import * as React from 'react';
import * as ReactDOM  from 'react-dom';
import MirrorFlyUIReactComponent from './MirrorFlyUIReactComponent';
 @Component({
  selector: 'app-mirroy-fly',
   templateUrl: './mirror-fly.component.html'
 })
 export class MirrorFlyComponent implements OnChanges, AfterViewInit, OnDestroy{
 title = 'angularreactapp';
 public rootId = 'rootId';
 constructor(){
  }
 ngOnInit()
 {
 this.route.params.subscribe(params => {
 this.SId = params['id'];
 this.PId = params['Pid'];
  });

 }

  ngOnChanges(changes: SimpleChanges){
     this.render();
  }

  ngAfterViewInit(){
    this.render();
  }

private render(){
 ReactDOM.render(React.createElement(MirrorFlyUIReactComponent), document.getElementById(this.rootId));
}

}

Note:In angular version below 12 support version 16 in react,react-dom,@types/react-dom,@types/react and add below steps to follow.

Step 7: In tsconfig.json file add below codes to run .tsx file in angular

"compilerOptions": {
 "importHelpers": true,
     "target": "ES5", 
     "module": "esnext", 
     "moduleResolution": "node", 
     "sourceMap": true, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "lib": ["es2016", "dom"],
     "suppressImplicitAnyIndexErrors": true,
     "plugins": [{ "name": "typescript-plugin-css-modules" }]
}

Note:To build SSR Configuration in Angular and add below steps to follow.

Step 8: The basic configuration setup for SSR, follow the below codes in server.ts file.

global['localStorage'] = localStorage;
global['WebSocket'] = ws;
global['XMLHttpRequest'] = xhr2;
(global as any).navigator = win.navigator;

// All regular routes use the Universal engine
server.get('*', (req, res) => {
  res.render(indexHtml, { req, providers: [
    { provide: APP_BASE_HREF, useValue: req.baseUrl },
    { provide: REQUEST, useValue: req },
    { provide: RESPONSE, useValue: res }
    ]});
});

Custom Chat Conversation#

If you need chat conversation page alone initialize customconversation in ChatApp component.

 const customConversation = {
  conversationValue : true,
  userId:"xxxxxxx"
 }
 <ChatApp 
  lisenseKey="********************" 
  userIdentifier="**************"
  apiUrl ="*******************"
  isSandBox={true} // if you are a sandbox user it is true
  customConversation={customConversation}
 />

chat_conversation

Web SDK Methods#

We can also import Web SDK methods from "mirrorfly-uikit/dist" below code snippet is example to import SDK methods.

import { SDK } from "mirrorfly-uikit/dist"

const initializeSDK = async() => {
  const initializeObj = {
    "apiBaseUrl": "********************",
    "callbackListeners": {},
    "licenseKey": "********************",
    "isSandbox": false //if you are a sandbox user it is true
  }
  const check =  await SDK.initializeSDK(initializeObj); 
  console.log("check", check); 
}

Note:By using Web SDK methods you can use prime functionality of mirrorfly outside of Uikit.

Initializing the chat Conversation#

Note : If Recent Chat Search feature is unavailable for your 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.

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

Attachment#

The Mirrorfly-React--uikit allows you to attach images in the message. The maximum allowed number of files are default to 5. The application can also able to preview the files that are seleted.Click on icon

and select files from chat conversation screen, so you can select files from your local

Note : If Any of the Attachment feature unavailable for your plan then it will not display in Chat Conversation Screen in Mirrorfly-Uikit.

license-key

Image Attachment#

The Mirrorfly-React--uikit allows you to attach images in the message. After Clicking on Photo option in attachments. User select the images in desired format from local, The selected images will be available on preview screen

Note : Supported Image Format : png, jpeg, jpg.

license-key

Document Attachment#

The Mirrorfly-React--uikit allows you to attach documents in the message. After Clicking on Document option in attachments. User select the document in desired format from local, The selected images will be available on preview screen

Note : Supported Document Format : doc, docx, pdf, xls, xlsx, txt, csv, ppt, pptx, zip, rar.

license-key