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

Integrate the Chat SDK

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 
         width="100%" // custom width for parent container
         height ="100%" // custom height for parent container
         licenseKey="********************" 
         userIdentifier="**************"
         apiUrl ="*******************"
         isSandBox={true} // if you are a sandbox user it is true
         enableDeviceSize={false}  // Default value false, if you added width or height enableDeviceSize will change false 
      />
     </>
     );
 }
 export default App;

You have to give custom height and width values for your container or props orelse set enableDeviceSize as true, it will automatically set height and width based on device size.

The Mirrorfly UI component is customizable on theme model. On a default Mirrorfly webchat app holds has 2 themes light and dark theme. Customized themes that fit your requirment can also be created by providing colorSet and iconSet.

Setup the default theme

UIKit for web's Light or Dark theme can be changed using theme prop.

Light theme

Light theme is a default theme which is rendered without the declaration of theme or passing theme='light'.

        <ChatApp 
            licenseKey="********************" 
            userIdentifier="**************"
            apiUrl ="*******************"
            isSandBox={true} // if you are a sandbox user it is true
            theme='light'
         />

Dark theme

The Dark theme can be applied by passing theme='dark' in ChatApp component

        <ChatApp 
            licenseKey="********************" 
            userIdentifier="**************"
            apiUrl ="*******************"
            isSandBox={true} // if you are a sandbox user it is true
            theme='dark'
         />

Basic colorSet Property

colorSet Prop is a style property which is provided with the list of variables where the seperate component layouts color can be changed. On a basic level of colorSet object the colors of the component can be changed.

        const customColorSet={
            mfBoxLayoutBg: "#0ab7921f",
            mfThemeColor: "#00a884",
            mfThemeColorBright: "#0ab792",
            mfThemeColorDark: "#008069",
            mfThemeColorRgb: "0,128,105",
            mfHeadingBg: "#008069",
            mfBgcStartchatBannerLink: "#0ab792"
        }

        <ChatApp 
            licenseKey="********************" 
            userIdentifier="**************"
            apiUrl ="*******************"
            isSandBox={true} // if you are a sandbox user it is true
            colorSet={customColorSet}
            />

Changed colorSet Props

Basic colorSet Variables

The following table lists the style components of each Components used.

| Components | colorSet Variables | | -------------|---------| |Chatapp Background Color| mfBoxLayoutBg | |Overall Theme color | mfThemeColor | |Bright theme color usage | mfThemeColorBright | |Dark theme color usage | mfThemeColorDark | |Theme color in rgb | mfThemeColorRgb | |General All Heading BG color | mfHeadingBg | |Chatapp Banner colorSet | mfBgcStartchatBannerLink |

ColorSet

The ColorSet is the set of colors provided by UIKit for Web and is fully customizable.

const customColorSet={
    boxLayoutBg: "#D8DBE3",
    parentTopGap: " 0px",
    maxParentheight: " calc(100vh - var(--parent-top-gap))",
    themeColor: " rgba(0, 168, 132,1)",
    themeColorBright: " #0cc19a",
    themeColorDark: " #0c7c64",
    themeColorRGB: " 0, 168, 132",
    headingBackground: " var(--mf-theme-color)",
    themeColorHighlight: " rgba(var(--mf-theme-color-rgb, 0.8))",
    listHoverBg: " rgba(var(--mf-theme-color-rgb), 0.09)",
    chatBadge: " rgba(var(--mf-theme-color-rgb), 0.2)",
    recentChatlistBGC: "white",
    primaryDark: "  #000000",
    secondaryDark: " #181818",
    secondaryLight: " #333333",
    dangerHightlight: " #e24848",
    chatSubDetails: " #73777e",
    textLight: " var(--mf-theme-color)",
    chatUserGroupName: " var(--mf-theme-color-dark)",
    
    // chat properties
    borderCommon: "#efefef",
    userStatusSent: " #808080",
    userStatusReceive: " #ffa500",
    chatBubbleLinkColor: " var(--mf-theme-color)",
    userStatusSeen: " rgb(0, 226, 75)",
    recentChatIcon: " rgb(118, 118, 118)",
    chatBubbleSenderStarIcon: " #fff",
    chatBubbleReceiverStarIcon: " #fff",
    chatBubbleReceiverBg: " #fff",
    chatBubbleReceiverText: " #444343",
    chatBubbleSenderBg: " var(--mf-theme-color-bright)",
    chatBubbleSenderText: " White",
    chatBadgeText: " var(--mf-secondary-light)",
    searchInputBg: " #f1f3f4",
    attachmentBg: " rgba(var(--mf-theme-color-rgb), 0.08)",
    attachmentIconBg: " #0f2a5f",
    msgTime: " var(--mf-secondary-light)",
    sendMessageTime: " #949494",
    revMessageTime: " #fff",
    recentChatConversionBg: " #fff",
    chatConversionBg: "#fff",

    // Icons color
    iconsContactinfo: " #313131",
    iconsDropdownOptions: " rgba(var(--mf-theme-color-rgb), 0.9)",
    iconsRecentchatHeader: " #828282",
    attachmentDropdownOptions: " rgba(var(--mf-theme-color-rgb), 0.9)",
    iconsContactinfoDanger: " var(--mf-danger-hightlight)",

    // active inactive option
    optionActive: " var(--mf-theme-color)",
    optionActiveLight: " var(--mf-theme-color-rgb, 0.5)",
    bgHoverCircle: "#f1f3f4",
    attachmentColorIcon: " #fff"
}

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}
 />

For more detailed explaination please out https://www.mirrorfly.com/docs/UIKit/web/Customization/theme