Let's integrate our UIKIT in few minutes
#
Quick Start#
SDK UIKit for AngularMirrorfly 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 KeyBefore 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, link to download UIKIT, and Api base Url.
#
Integrate the Chat SDK for AngularInstall 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.
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.
Argument | Type | Description |
---|---|---|
lisenseKey | 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
Step 5: In angular.json file add below style & assets path to load our default style & images & icons.
Step 6: In app.component.ts file extend the react component in angular add below codes.
- 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
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.
#
Custom Chat ConversationIf you need chat conversation page alone initialize customconversation in ChatApp component.
#
Web SDK MethodsWe can also import Web SDK methods from "mirrorfly-uikit/dist" below code snippet is example to import SDK methods.
Note:By using Web SDK methods you can use prime functionality of mirrorfly outside of Uikit.
#
Initializing the chat ConversationNote : 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.

#
Once navigated to user chat screen, type your first message and click send button . Sending Single Chat Message
#
Your can also connect to more than one member in group chat conversation Sending Group Chat Message
#
The Mirrorfly-uikit allows you to attach files 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. AttachmentClick on icon and select files from chat conversation screen, so you can select files from your local
Note : If the Attachment feature is not available on your plan then you will not be able to view it in the Chat Conversation Screen on the Mirrorfly-Uikit.
#
The Mirrorfly-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 Image AttachmentNote : Supported Image Format : png, jpeg, jpg.
#
The Mirrorfly-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 document will be available on preview screen Document AttachmentNote : Supported Document Format : doc, docx, pdf, xls, xlsx, txt, csv, ppt, pptx, zip, rar.
#
The Mirrorfly-uikit allows you to attach audio in the message. After Clicking on Audio option in attachments. User select the document in desired format from local, The selected images will be available on preview screen Audio AttachmentNote : Supported Document Format : wav, mp3, aac.
#
The Mirrorfly-uikit allows you to attach video in the message. After Clicking on Video option in attachments. User select the video in desired format from local, The selected video will be available on preview screen Video AttachmentNote : Supported Video Format : .webm, .mp4, .x-m4v, video/x-m4v.