From 592e32998ff383589783893d381b113dc1a575f3 Mon Sep 17 00:00:00 2001 From: coderboy-yash <109899959+coderboy-yash@users.noreply.github.com> Date: Thu, 17 Aug 2023 22:46:11 +0530 Subject: [PATCH] changes made to readme.md and added steps for windows (#225) * Updated README.md * added screenshot to README.md * ss corrected README.md * added steps for windows user in README.md * added installation steps for windows users * removed some errors README.md * added mock image to README.md --- README.md | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 51 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4e538812c..284099729 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,7 @@ -# EmbeddedChat +

Embedded chat: A staple in excellent customer service

+ +![image](https://github.com/coderboy-yash/EmbeddedChat/assets/109899959/b2961a35-4300-48df-b674-8a128c73e838) + An easy to use full-stack component (ReactJS + backend behaviors) embedding Rocket.Chat into your webapp. @@ -12,6 +15,14 @@ _EmbeddedChat is a full-stack React component node module of the RocketChat appl +## Wiki and FAQs +Check out our [Wiki](https://github.com/RocketChat/EmbeddedChat/wiki) and [FAQ](https://github.com/RocketChat/EmbeddedChat/wiki/FAQs) page for in-depth guides and answers to common questions. Whether you're a newbie or an expert, you'll find valuable insights to enhance your experience. + +![image](https://github.com/coderboy-yash/EmbeddedChat/assets/109899959/af6ea4b4-8499-4f9d-aa83-56c2cf8123c8) + +## Understanding the Internals +For those of you who love diving into the technical details, we have a [Roots of EmbeddedChat wiki](https://github.com/RocketChat/EmbeddedChat/wiki/Roots-of-EmbeddedChat) that delves into the project's internals. Gain a deeper understanding of how everything works behind the scenes and unlock the full potential of the project. + ## Installation ```bash @@ -63,7 +74,9 @@ Read this [wiki page](https://github.com/RocketChat/EmbeddedChat/wiki/Roots-of-E | anonymousMode | if the user can see the chat without logging in | | showAvatar | show the user's avatar in the chat component, defaults to false | | showRoles | show the user's roles in the chat component, defaults to false | -| enableThreads | enable RocketChat's style thread messages, defaults to false | +| enableThreads | enable RocketChat's style thread messages, defaults to false | +| headerColor | sets the background color of the chat header, providing visual customization.| +| toastBarPosition | defines where the toast bar appears in the chat interface, allowing you to control its position for better user experience.| ## Setting up Authentication @@ -80,13 +93,49 @@ npm run dev # at the root folder --> EMBEDDEDCHAT ``` + + It will open up a playground react app at `http://localhost:4000`. Make a `.env` file in the playground directory following the `.env[example]` file. +### Setup for `Windows` user + +Above command might not work if you are a `Windows`user because in package.json the scripts are written according to Linux environment so do these steps :- +```bash +step 1:- clone the forked repo in your vs code +step 2:- go to EmbeddedChat -> package.json + change + "scripts":{ + "build": "NODE_ENV=development rollup -c --context=window", + "build:prod": "NODE_ENV=production rollup -c --context=window", + } + to ------> + "scripts":{ + "build": "set NODE_ENV=development && rollup -c --context=window", + "build:prod": "set NODE_ENV=production && rollup -c --context=window", + + } +step 3:- go to embeddedChat -> playground->package.json + change + "scripts":{ + "start": "PORT=4000 node ../node_modules/react-scripts/bin/react-scripts.js start", + } + to ------> + "scripts":{ + "start": " set PORT=4000 && node ../node_modules/react-scripts/bin/react-scripts.js start", + } + + + +``` +### note +if `npm i` gives error try `npm i --legacy-peer`and error might be solved.

Gitpod Setup

Make a `.env` file in the playground directory following the `.env[example]` file. + +