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": "^4.0.32",
"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;
ArgumentTypeDescription
licenseKeyStringset your licence key
userIdentifierStringset your phoneNumber
apiUrlStringset 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