Let's integrate our UIKIT in few minutes

SDK UIKit for Angular#

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.

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.

To get the License Key,#

Step 1: Register here to get a MirrorFly User account. Registration is subject to verification and would take up to 24 hours.

Step 2: Login to your Account

Step 3: Get the License key from the application Info’ section

license-key

Integrate the Chat SDK for Angular#

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.

For Angular version 12 or above, follow step1 to step6..

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.7.4",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "@types/react-dom":"^18.0.11",
 "@types/react": "^18.0.28"
 }

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

The apiUrl and licenseKey details can get it from the 'Overview' section in the mirrorfly Console dashboard.

license-key

 import * as React from "react"
 // @ts-ignore
 import { ChatApp } from "mirrorfly-uikit/dist"
 function MirrorFlyUIReactComponent() {
    return (
      <>
      <ChatApp
          licenseKey="********************"
          userIdentifier="**************" 
       />
      </>
      );
  }
  export default MirrorFlyUIReactComponent;

Argument	Type	Description
licenseKey	`String`	set your licence key
userIdentifier	`String`	set your phoneNumber
apiUrl	`String`	set your base url

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 style & assets path to load our default style & images & icons.

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

Step 6: In app.component.ts file extend the 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-root',
  template: '<div [id]="rootId"></div>'
 })

export class AppComponent implements OnChanges, AfterViewInit, OnDestroy{
 title = 'angularreactapp';
 public rootId = 'rootId';
 ngOnChanges(changes: SimpleChanges){
  this.render();
 }

 ngAfterViewInit(){
  this.render();
 }

 ngOnDestroy(){

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

}

For Angular version 11 or below, follow step1 to step7.

Note :For angular version below 12 versions of react,react-dom,@types/react-dom,@types/react should be 16

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
  licenseKey="********************"
  userIdentifier="**************"
  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 = {
    licenseKey: "********************",
    callbackListeners: {},
  }
  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 : Recent Search chat feature is not available for 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.

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