{"id":23878303,"url":"https://github.com/rocketchat/embeddedchat","last_synced_at":"2025-05-16T18:06:25.890Z","repository":{"id":37798086,"uuid":"499187872","full_name":"RocketChat/EmbeddedChat","owner":"RocketChat","description":"An easy to use full-stack component  (ReactJS)  embedding Rocket.Chat into your webapp","archived":false,"fork":false,"pushed_at":"2024-10-11T16:32:34.000Z","size":16718,"stargazers_count":115,"open_issues_count":108,"forks_count":231,"subscribers_count":10,"default_branch":"develop","last_synced_at":"2024-10-11T19:10:30.270Z","etag":null,"topics":["embeddedchat","javascript","npm","react","rocketchat","rocketchat-sdk"],"latest_commit_sha":null,"homepage":"https://rocketchat.github.io/EmbeddedChat/docs","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RocketChat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-02T15:21:08.000Z","updated_at":"2024-10-06T19:09:10.000Z","dependencies_parsed_at":"2024-02-24T20:22:36.177Z","dependency_job_id":"8860b9b6-bbeb-4178-88d9-40f83e8f3373","html_url":"https://github.com/RocketChat/EmbeddedChat","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RocketChat%2FEmbeddedChat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RocketChat%2FEmbeddedChat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RocketChat%2FEmbeddedChat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RocketChat%2FEmbeddedChat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RocketChat","download_url":"https://codeload.github.com/RocketChat/EmbeddedChat/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248868924,"owners_count":21174784,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["embeddedchat","javascript","npm","react","rocketchat","rocketchat-sdk"],"created_at":"2025-01-03T21:18:32.402Z","updated_at":"2025-04-14T11:21:50.299Z","avatar_url":"https://github.com/RocketChat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align='center'\u003eEmbedded Chat: A staple in excellent customer service\u003c/h1\u003e\n\n![image](https://github.com/RocketChat/EmbeddedChat/assets/78961432/574be6b4-d2f7-4bea-a7b1-4c6e840d8e22)\n\nAn easy-to-use, full-stack component (React.js + backend behaviors) for embedding Rocket.Chat into your web app.\n\n_EmbeddedChat is a full-stack React component designed to integrate Rocket.Chat into your web app. It is fully configurable, extensible, and flexible, offering various preconfigured designs, multiple login options, and more. The component is tightly integrated with the Rocket.Chat server using the Rocket.Chat SDK, and its entire UI is built using custom components._\n\n![ec-demo-image](https://github.com/RocketChat/EmbeddedChat/assets/78961432/b85c7b8a-65e2-4a90-a843-f4072c942ac0)\n\n\u003cdiv align='center' width='100%'\u003e\n\u003ca href=\"https://github.com/RocketChat/EmbeddedChat/graphs/contributors\"\u003e\n\u003cimg src=\"https://open-source-assets.middlewarehq.com/svgs/RocketChat-EmbeddedChat-contributor-metrics-dark-widget.svg?caching=true\"\u003e\u003c/img\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\n## Try It Out 🚀\n\nExplore our project in action! It's live for a sneak peek and testing at: https://rocketchat.github.io/EmbeddedChat/\n\nTest credentials:\n\n- **Username:** test_acc\n- **Password:** test_acc\n\n## Installation and Usage\n\nInstallation and usage documentation could be found here [EmbeddedChat installation and usage](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/embeddedchat_setup)\n\n## Development\n\n### Local Setup\n\nTo develop and test `EmbeddedChat`, you need a local instance of the Rocket.Chat server. Follow the guide in the [Rocket.Chat Developer Docs](https://developer.rocket.chat/v1/docs/server-environment-setup) for setting up a Rocket.Chat development environment.\n\nEnsure that the \"Enable CORS\" option is turned on in your Rocket.Chat server. You can find it under Administration \u003e Settings \u003e General \u003e REST API \u003e Enable CORS. This setting must be enabled to access the app's functionality.\n\n#### Prerequisites\n\n- **Node.js**: Version 16.19.0 is required. Use [Node Version Manager (NVM)](https://github.com/nvm-sh/nvm) for easy switching between Node.js versions.\n\n  To install and use the correct Node.js version, execute the following commands with the specific version number:\n\n  ```bash\n  nvm install \u003cversion\u003e\n  nvm use \u003cversion\u003e\n  ```\n\n  Replace `\u003cversion\u003e` with the required Node.js version\n\n- **Yarn Workspaces**: Ensure Yarn workspaces are enabled. If not, run:\n\n  ```bash\n  corepack enable\n  ```\n\n#### Install Dependencies\n\nInstall all necessary dependencies by navigating to the root directory of `EmbeddedChat` and running:\n\n```bash\nyarn\n```\n\n#### Build Packages\n\nAfter installing dependencies, build the packages (`auth`, `api`, and `react`) by running the following command in the root directory:\n\n```bash\nyarn build\n```\n\n#### Starting Storybook for React\n\nNavigate to the `react` package directory and start Storybook with the following commands:\n\n```bash\ncd packages/react\nyarn storybook\n```\n\nStorybook should now be operational. Experiment with `EmbeddedChat` and its components, observing real-time changes in Storybook.\n\n### Custom Rocket Chat Server Configuration\n\nBy default, Storybook connects to `http://localhost:3000`. To use a different Rocket Chat server:\n\nCreate a `.env` file in the `packages/react` directory.\n\nSet the `STORYBOOK_RC_HOST` variable:\n\n```bash\nSTORYBOOK_RC_HOST=\u003cyour-custom-url\u003e\n```\n\nAlternatively, run this command in the `packages/react` directory:\n\n```bash\nSTORYBOOK_RC_HOST=\u003cyour-custom-url\u003e yarn storybook\n```\n\n### Package Development Overview\n\nThe project uses a monorepo structure with three key packages: `react`, `auth`, and `api`. Each package fulfills a vital role in the application:\n\n#### React Package Development\n\nThe `react` package serves as the main frontend component, having all UI elements and views. It interfaces with the `auth` and `api` packages to manage interactions with the Rocket.Chat server, including API calls and authentication.\n\nTo develop and test changes in the `react` package:\n\n1. Navigate to the directory of the `react` package:\n\n```bash\ncd packages/react\n```\n\n2. Start Storybook to view live changes:\n\n```bash\nyarn storybook\n```\n\n#### Auth Package Development\n\nTo develop and test changes in the `auth` package:\n\n1. Navigate to the `auth` package directory:\n\n   ```bash\n   cd packages/auth\n   ```\n\n2. Start the development server:\n\n   ```bash\n   yarn dev\n   ```\n\n#### API Package Development\n\nFor development in the `api` package:\n\n1. Navigate to the `api` package directory:\n\n   ```bash\n   cd packages/api\n   ```\n\n2. Start the development server:\n\n   ```bash\n   yarn dev\n   ```\n\n**Development Workflow Notes:**\n\n- The `react` package relies on the `api` package. After making changes to the `api`, rebuild it using `yarn build` in `packages/api`, and then restart the React project.\n\n- Similarly, the `api` package depends on the `auth` package. After making changes to `auth`, rebuild it using `yarn build` in `packages/auth`, and then restart the `api` development environment.\n\nThis structured approach facilitates cohesive development and integration across all components of the application.\n\n### Conclusion\n\nThis environment offers a complete setup for developing and testing the `EmbeddedChat` component, alongside its `api` and `auth` packages. Feel free to explore and enhance the capabilities of `EmbeddedChat`!\n\n## References\n\n- **Documentation Overview**: For a comprehensive overview of Embedded Chat, including installation, usage, and advanced topics, visit our [Documentation Page](https://rocketchat.github.io/EmbeddedChat/docs/).\n\n  Below are specific sections that cover various aspects of Embedded Chat:\n\n  - Embedded Chat Development: [EC Development](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/dev_launch) – Explore development techniques for Embedded Chat.\n\n  - Embedded Chat Setup: [Setup Instructions](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/embeddedchat_setup) – Start setting up Embedded Chat in your app.\n\n  - UI Elements: [Setup \u0026 Dev Guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/ui-elements) – Integration and customization of UI elements.\n\n  - Layout Editor: [Using the Editor](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/layout_editor) – Customize the chat interface with the layout editor.\n\n  - EmbeddedChat RC Setup: [Setup Instructions](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/ec_rc_setup) – Guide for setting up Embedded Chat RC App.\n\n  - Authentication: [Guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/authentication) – Configure and manage authentication for Embedded Chat.\n\n  - Theming Guide: [Guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/theming) – Guide to theming options and customization.\n\n  - Theming Technical: [Technical Overview](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/theming_technical) – Technical aspects of theming.\n\n### Contributors\n\n\u003ca href=\"https://github.com/RocketChat/EmbeddedChat/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=RocketChat/EmbeddedChat\" /\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frocketchat%2Fembeddedchat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frocketchat%2Fembeddedchat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frocketchat%2Fembeddedchat/lists"}