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.
The requirements for chat SDK for React Web App are:
- React Version 16.0 or above
- Node Version v14.17.4 or above
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
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.
UIKit for web's Light or Dark theme can be changed using theme prop.
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'
/>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'
/>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}
/>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 |
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"
}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