Final Part: GSoC 2022 | Rocket.Chat | EmbeddedChat
Tags: javascript, react, opensource, npm
Published: 2022-09-10 14:05:16

---
series: GSoC 2022 | Rocket.Chat | EmbeddedChat
---
Hello everyone, it’s the last week of **Google Summer of Code** (for medium-term projects) and it feels so amazing when I look back to the day I started it. My project was just an idea at that time; now it’s a product! I am so grateful for the love and support from the [Rocket.Chat](http://Rocket.Chat) community. My project has got whooping **12+ stars on [GitHub](https://github.com/RocketChat/EmbeddedChat) now** and some **potential users** who are eager to use it! These few months were really hard. We had to face so many challenges, so many edge cases, and so many stages. It was an amazing journey altogether!

### Some updates on EmbeddedChat:

![EmbeddedChat in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxpjk6a2lcmoedhzgz7m.gif)
This is the component I've worked on for the past few months. **_Think like it as a mini version of RocketChat that can be embedded into any web application._**

At last the component looks something like this,
```jsx
<RCComponent
  moreOpts={true}
  isClosable={true}
  setClosableState={setClosableState}
  width="100%"
  height="35vh"
  GOOGLE_CLIENT_ID={GOOGLE_CLIENT_ID}
  host={ROCKETCHAT_HOST}
  roomId={ROCKETCHAT_ROOM_ID}
  channelName="general"
  anonymousMode={true}
  headerColor='#F5455C'
/>
```
### UI/UX improvements
We added a `headerColor` property which will automatically predict if the text and icons should be dark/light. This will help EmbeddedChat get camouflaged as a native component of the parent web application. We also removed the dependency of being fullscreen to show `moreOptions` rather it can be shown at all times now.
### Pinning and starring
This feature helps to pin and star messages using EmbeddedChat and has a different UI (page-like) to showcase the pinned and starred messages of a channel.

{% embed https://www.youtube.com/watch?v=DU5C2vlUVjI %}

### Reactions to messages
This feature allows user to react to messages in real-time.
{% embed https://youtu.be/aQix55Qd7wY %}

### Handling attachments
This is in progress, we are now handling different types of attachments (video/audio/image/docs) but we are yet to work on sending attachments using EmbeddedChat.
![attachments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6as2sp8py7ylejf1cxe.png)

### Proposing an iframe solution to make it framework agnostic
This method will allow users to use EmbeddedChat without worrying about it being a React.js Component. It is now super simple to integrate EmbeddedChat within minutes.
![iframe deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/di9nnim5of5bgl9u1ohl.png)


All the coding stuff aside, I created YouTube videos to make it ever so simple for users to set up EmbeddedChat into their applications. I created some demo repositories showing the capabilities and use cases of EmbeddedChat and making it very easy for developers to integrate it.

Wiki: [EmbeddedChat/wiki](https://github.com/RocketChat/EmbeddedChat/wiki)
For YouTube Videos: [EmbeddedChat](https://www.youtube.com/channel/UCs7mpsUvJCDVEtxEw2_h0oA/videos)
Demo Repositories: [EmbeddedChat as a component](https://github.com/sidmohanty11/embeddedchat-demo-deploy) and [EmbeddedChat as iframe](https://github.com/sidmohanty11/embeddedchat-iframe-deploy)

### Presentation Day (September 8th)
Rocket.Chat organizes an internal “Demo Presentation” for all students. These presentations are attended by almost the entire Rocket.Chat engineering team including the CEO Gabriel Engel and CTO Rodrigo Nascimento. It was an amazing experience presenting the work that I had done over the past three months.
The entire recording is published at [Rocket.Chat’s YouTube channel](https://www.youtube.com/c/RocketChatApp/videos). You can also check it out here:
{% embed https://www.youtube.com/watch?v=gcB5c6cvg9w&t=21s %}

Presentation slides: [Demo Day Presentation Slides](https://docs.google.com/presentation/d/1hNO-iGlA0nnyHS5o6XlgwGaYP7IgOtcHdg--HCFNABY/edit?usp=sharing)
Work product Repository: [Google-Summer-of-Code-2022](https://github.com/sidmohanty11/GSoC-2022)
Test out EmbeddedChat here: [EmbeddedChat Demo](https://sidmohanty11.github.io/embeddedchat-demo-deploy/)

### Thanks to my mentor!
I will be forever grateful to my mentor [Rohan Lekhwani sir](https://github.com/RonLek) for being such an amazing spirit to work with. Just a secret to share here, I had my internal exams around the time of Community Bonding Period and my 4th semester exams around August (10th - 24th) and I was so much worried for them as it was my first offline semester. I had asked my mentor if I could take some days off in between to manage both GSoC and exams and he was so supportive throughout that I got 9.27 GPA in my exams. Also I used to have both personal and professional talks with him about life and career in general which were super helpful for me. He is an amazing person whom I will look up to forever.
### Thanks to the entire Rocket.Chat community!
Thank you so much to my mentors - [SingLi sir](https://github.com/Sing-Li), [Duda](https://github.com/dudanogueira) and [Debdut sir](https://github.com/debdutdeb) for all the support and guidance, it means a lot for any student to get appreciation, criticism and encouragement from their mentors to grow in life. I would also like to thank my friends for being there and making these months not just only about learning but enjoyable too. I hope we stay in touch in the future. Thanks!
### To end,
It was one journey that will stay with me for lifetime. I learnt a lot of things - not just coding but beyond it.
### What's Next?
I will continue working on adding more features to EmbeddedChat as per user requirements. Next target will be to introduce thread functionality which is the most used feature of RocketChat.

Connect with me:
Email: sidmohanty11@gmail.com
GitHub: https://github.com/sidmohanty11
LinkedIn: https://www.linkedin.com/in/sidmohanty11
Twitter: https://twitter.com/sidmohanty11

Do check out the project, and if you like it you can star ⭐ it too :)
https://github.com/RocketChat/EmbeddedChat