Web Component UI


#1

The suggestion is to create a web component (or set of web components) to encapsulate the web-based Rocket.Chat UI, allowing it to be embedded easily into other applications.

The existing iframe integration is workable for always-online use on standard websites, but integrating with offline-capable web-tech applications is not currently possible - we’d need to build our own UI.

Examples of technologies that would be able to use a web-component-ized UI:

  • PWAs
  • Cordova/PhoneGap mobile apps
  • Electron-based desktop apps
  • Any single page web app (react, VueJs, Angular, …)

Basically, anything that is built on web technologies (HTML/CSS/JS) and needs to be able to work offline too. It would also provide a nicer, more modern interface than the existing iframe integration, and, I would suggest, a significant driver for wider adoption by developers looking to integrate Rocket.Chat with their apps.

To be clear on my specific use case. We have an existing (Cordova-based) mobile app, and want to add chat/video call features to it. The open-source nature of Rocket.Chat is really appealing, as well as the full feature set. However, integrating Rocket.Chat nicely into that cordova mobile app is currently a non-starter because the UI would need to be loaded remotely from the server, or we’d need to build our own UI (and consume the API). Having a way to include the UI web component as part of the cordova app would be awesome. Then instead of including an iframe, we’d do something akin to:

<script type="module" href="components/rocket-chat-ui.js"></script>
...
<rocket-chat server-url="https://someserver.rocket.chat" authentication="..." ... />

#2

Hi there.

I need something like this… di you find anything?

cheers


#3

Nope, it looks like the only approaches currently are iframe integration or build-you-own-ui…