Changelog

a year ago

Control the style of absolutely anything with CSS overrides, and more

Highlight

Control the style of absolutely anything with CSS overrides

You can now style absolutely any aspect of your TalkJS UI, using the global CSS overrides tab in your theme editor. 

Global CSS overrides complement the ability to edit and style chat components. A vast number of parts of the TalkJS UI are currently exposed as components that you can edit directly in your theme editor. However, if that’s not enough, the global CSS overrides tab gives you full control to customize your chat UI. 

For example, with a global CSS overrides you can customize the background of a chat panel however you like, such as by setting an image as the background:

.Panel {
   background-image:url('https://example.com/image.jpg');
   background-size:cover;
}

With the following result:

A TalkJS chat UI with a custom image background. The custom background shows a landscape with luscious green hills and a cloudy sky. The chat itself contains a link to a video about hiking in the Lake District, and posts asking about an upcoming hike.

Chat UI with an image set as the background of a chat panel

Using global CSS overrides, you could for instance also hide the day marker that separates messages sent on different days, by setting DayMarker to display: none:

.DayMarker {
   display: none;
}

The difference between showing and hiding the day marker would be as follows:

Two instances of the same chat conversation side by side. On the left, a message sent on February 14 and a message sent just now are separated by a line, with at the center the word ‘Today’. On the right, the same messages are shown directly following one another, without a day marker separator.

Chat UI with and without a day marker 

You can find the global CSS override tab in the Themes section of your dashboard when editing a theme.

Overview of the theme editor in the TalkJS dashboard, with the Global CSS override file indicated in the sidebar navigation, above the list with built-in components. Inside the global CSS override file is a code comment that reads: ‘This file can be used to override default TalkJS styling outside your components. Any styles that you add here will be applied globally to the entire TalkJS UI.’

Global CSS override the the theme editor of the dashboard

Any CSS styles added to the global CSS overrides section of the theme editor get applied globally, to all parts of the TalkJS UI. To add a style only to a specific component, update that component directly in your theme editor.

For more information, see: Global CSS overrides.

Overview of other changes

Added

  • Added support for rich text shortcodes in the message editor. Ctrl-B (on Windows) or Cmd-B (on MacOS) now adds markup for bold text, while Ctrl-I or Cmd-I adds markup for italics.
  • React SDK (version 0.1.7): Added a show prop to Popup, that allows you to specify whether the pop-up widget pre-built chat UI should be shown or hidden.
  • React Native SDK (version 0.8.0): Added support for push notifications via Firebase on iOS. Note: For push notifications to iOS on Expo, we currently only support using Firebase, not APNs.
  • React Native SDK (version 0.8.0): Added onMessage and onUnreadsChange props to the Session component.
  • React Native SDK (version 0.8.0): Added hasValidCredentials, clearPushRegistration, setPushRegistation and unsetPushRegistration methods to the Session component.
  • Flutter SDK (version 0.10.0): Added support for Firebase push notifications on iOS.
  • Flutter SDK (version 0.10.0): Added compound predicates to Chatbox and ConversationList.
  • Flutter SDK (version 0.10.0): Added a missing themeOptions property in ConversationList.

Changed

  • React Native SDK (version 0.8.0) Removed an implicit push notification permissions request. Users of this library must explicitly request for push notification permissions on iOS and Android 13+.
  • React Native SDK (version 0.8.0): Removed bounce in iOS when the UI reached the edge of the content.
  • React Native SDK (version 0.8.0): Renamed the AndroidChannel interface to AndroidSettings, and the IOSPermissions interface to IOSSettings.
  • React Native SDK (version 0.8.1): The ConversationList no longer highlights the first conversation by default.

Fixed

  • Fixed an issue where a group chat with only guests wouldn’t show usernames alongside messages in the default preset themes.
  • Fixed an issue where external links would open inside an app even when Cordova InAppBrowser is used.
  • Flutter SDK (version 0.10.0): Fixed a push notification error when a sender's photoUrl is invalid.
  • Flutter SDK (version 0.10.0): Fixed a build issue on Android Gradle Plugin (AGP) 8.0+.
  • React Native SDK (version 0.8.0): Fixed bug in Session when user synchronization is disabled.
  • React Native SDK (version 0.8.0): Fixed bug with MessageField.setText and MessageField.typeText that would cause a crash when given certain strings.
  • React Native SDK (version 0.8.0): Fixed bug where, under certain conditions, the HTMLPanel wouldn’t load.

New guides and tutorials 

👋 Thoughts? Questions? Get in touch.

✨Follow TalkJS on 𝕏 and LinkedIn to stay up to date.

👩🏾‍💻We’re hiring! Check out our jobs page.