Let's integrate our UIKIT in few minutes

Quick Start

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

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.

import * as React from "react"

// @ts-ignore

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

function MirrorFlyUIReactComponent() {

return (

<>

<ChatApp

licenseKey="********************"

userIdentifier="**************"

apiUrl ="*******************"

isSandBox={true} // if you are a sandbox user it is true

/>

</>

);

}

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="**************"

apiUrl ="*******************"

isSandBox={true} // if you are a sandbox user it is true

customConversation={customConversation}

/>

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 : 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