Announcing TalkJS Themes
From the day we launched in beta last September, TalkJS has been all about getting a great messaging experience for users with next to no effort. We noticed that sites and apps, all over the internet, were building their user-to-user messaging from scratch, yet they all ended up with nearly the same user interface.
Building a great UI for realtime user messaging is the most work in any chat app. There’s cross-browser quirks to mind, little details, realtime view updates: it gets messy pretty fast. This is why TalkJS includes a pre-cooked UI that you can embed into your site or app as easily as a YouTube video.
We kept hearing back from our customers, however, that they needed just that little bit of extra flexibility in the look and feel of their messaging. So without further ado, we’re happy to announce: TalkJS Themes!
Good old CSS to the rescue
A theme is a CSS file with a limited set of properties, which allow you to tune the look and feel of the UI. Think fonts, borders, colors, and so on. The core chat UI layout still stays the same, but you can make it fit your site’s design seamlessly.
As you can see in the screenshot above, I haven’t answered my colleague Marcin in over 2 days. That’s not very nice of me. You can also see that with just a few lines of CSS, we changed our default UI (on the left) to look similar to the one Airbnb uses for their messaging interface (the right).
Forward compatibility
When we were designing the themes feature, we were very tempted to just let our customers override our CSS and be done with that. Maximum flexibility, happiest customers, right?
But this would make it very difficult to add features later on, because new features often means new UI elements (a button here, an indicator there). How would we ensure that these new features match the intended style of our customer?
We realized we needed something more involved. TalkJS themes, therefore, do not support all CSS properties: we’re trying to capture the spirit of your design language, so that we can re-use those styles in later feature development. In fact, the TalkJS backend reads the theme files out and intelligently applies changes all over the UI, in a way that we could not do with pure CSS.
This gives you the best of boths worlds: full flexibility for making things look just right, but you can still depend on us for making your messaging better and better, without having to do more styling an development every time there’s a new TalkJS feature out.
Give it a try!
Theming is supported in TalkJS Standard plan and up. Also, it’s always enabled in test mode, which you can use for free forever. So sign up or log in to the admin panel, and you can get going right away. The theme settings are on the bottom of the “Config” page.
We’re curious what you think!
