If you’re reading this I’m going to assume you’ve already come to understand and appreciate the benefits that come from using Chat API & SDK to add communication features to your app. You have no doubt learned how chat can increase engagement and reduce churn, and you’ve almost certainly come to understand that a good Chat API can often be more cost effective than developing in-house. Now that you’ve decided to give your users a way to interact with each other you’re faced with an even tougher challenge: how do you make it easy for them to interact with your brand new chat integration?
I’m also going to assume you’re not a UX designer. I don’t blame you: UI and UX design is not for the faint of heart! One errant choice can make your prim and polished platform look like something you’d have seen on Geocities. But whether you’d rather not pull your UX designer away from working on core functionality, or you don’t have a UX designer at all, UI kits provide an easy and affordable way to integrate chat into your app without sacrificing any of your house style.
A UI Kit (short for user interface kit) is a package of files designed to expedite the development of a user interface. UI Kits typically include important components such as fonts, CSS or HTML stylesheets, and graphical elements such as containers, input controls, navigation controls, and icons. Most UI kits, such as those offered by Weavy, are compiled for specific programming libraries such as JS and React.
Weavy’s UI Kits work in tandem with a universal Weavy theme library, and taken as a whole they contain the elements required to seamlessly integrate the UIs of our Chat, Files, and Feeds APIs, the code required to make them operate, as well as the tools and documentation required to customize them to better match your app’s appearance. Most UI kits look something like this:
But when properly integrated, it can make your app look like this:
If you’re set on using a Chat UI kit, here are a few factors you should take into consideration as you evaluate your options:
First thing’s first: you want to make sure you’ve found a solution that works not only with your app but also with the myriad ways your users may be interacting with it. On the user facing side, a good Chat UI kit will have chat components that scale well with numerous display configurations. A great element should look attractive on mobile devices as well as on the web, on high DPI screens as well as the 2004 Dell monitor that every IT department seems to have an infinite supply of. A good rule of thumb is that components should strike the appropriate balance between quality and complexity: too low quality and the components will look terrible on high resolution displays, but too complex and the components will be unintelligible on lower quality devices.
On the development side, it’s all about making sure that the UI Kit is built with components that work with the library your app or platform is built on. At the time of writing, React and React Native are the two most popular and utilized libraries for application development, so it should be no surprise that most UI kit providers offer React UI kits for Chat. This means the kits can work with React apps out of the box, and with a small amount of tinkering will work seamlessly with React Native apps. Many providers, Weavy included, also attempt to cast the widest possible net by offering a Javascript UI kit. The benefit of using JS UI kits is that javascript components can easily be made to work within several different libraries, including mobile first libraries like Swift and AndroidSDK.
There’s also compatibility with the Chat API and/or the Chat SDK you’re using to integrate Chat into your app. For the most part this is an easier thing to suss out: most paid Chat API and Chat SDK providers offer a chat UI kit that has been tailored to their API or SDK and its functionality. If you’re using an API that doesn’t have its own UI kit (or you simply don’t care for the one your provider offers), most independent UI kit developers do their best to make sure there are components for the most used chat features.
It’s important to make sure that once you have your Chat API integration up and running, that it is giving your users the best possible experience. Today’s users expect every UI element to be snappy and responsive to their interactions. Low latency, input lag, and rendering delays in a chat experience are simply unacceptable considering the ubiquity of high quality communication features across the web and app ecosystem. Despite how complex the systems underpinning real time chat APIs are, most users consider it to be a simple functionality that should “just work.”
High performance in chat experiences hinges on judicious resource management. A Chat UI kit should be designed to use system resources like memory and CPU efficiently. For example, when displaying long chat histories it would be incredibly resource inefficient to load the entire chat into system memory. The solution here is for the UI components to have what is called “lazy loading,” which only moves messages that will be in the user’s viewport into system memory. This means only the immediately necessary messages are loaded, with additional content fetched as the user scrolls. This approach not only conserves memory but also reduces initial load times, delivering a smoother user experience. Caching frequently accessed data can further accelerate response times, minimizing the need to repeatedly fetch the same information from the server.
Let’s start with the good news first: most closed source chat UI kits are available as part of the licensing agreement for the associated Chat API. If you’re happy with the chat API you’ve chosen, and you’re happy with the UI kit then great job, you’re done! With any luck that will never change and your app and your chat API can walk hand in hand into the sunset. But things do change sometimes, and when that happens you may find yourself in a position where you want to part ways with the chat API or chat SDK you had been using. This poses a dilemma if you’re happy with the UI components that came with it.
As a developer the most obvious answer would be to modify the UI kit you’re utilizing to fit whichever chat integration you’re migrating to. Unfortunately doing so would be a violation of the Chat UI kit’s license agreement and could open you up to massive legal liabilities. This creates a level of lock-in that we at Weavy don’t think is developer friendly, that’s why our chat UI kits are all offered completely Open Source under the MIT License. Though we understand that our UI kits need a bit of extra coding to work with other Chat APIs, we also don’t believe we should preclude developers from using the UI kit that works best for them, especially when it’s the one we developed ourselves.
To try Weavy's Chat API and chat UI kit completely risk free, click below:
