TalkJS Changelog logo
Back to Homepage

Changelog

Subscribe to Updates

Labels

  • All Posts
  • Bug fix
  • Announcement
  • Improvement
  • Chat UI
  • JavaScript SDK
  • REST API
  • Dashboard
  • Deprecated
  • New
  • React Native SDK
  • Flutter SDK
  • Security
  • React

Jump to Month

  • April 2025
  • March 2025
  • February 2025
  • January 2025
  • December 2024
  • November 2024
  • October 2024
  • September 2024
  • August 2024
  • July 2024
  • June 2024
  • May 2024
  • April 2024
  • March 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • September 2023
  • August 2023
  • July 2023
  • June 2023
  • May 2023
  • January 2023
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • March 2022
  • February 2022
  • December 2021
  • November 2021
  • October 2021
  • August 2021
  • July 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • September 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
Changelog byAnnounceKit

Create yours, for free!

Bug fixImprovementChat UIJavaScript SDKDeprecatedReact Native SDK
4 weeks ago

Chat UI components preview, real-time messaging data, and more

Highlights

Chat UI components ✨ preview  ✨

TalkJS chat UI components (‘Components v2’) are now in preview and safe to use in production. 

Chat UI components give you ultimate flexibility to control the appearance and behavior of your chat. You can use the components with a ready-to-go pre-built theme, or customize your theme to get the exact look and feel you want.

Currently components are available for a chatbox UI with a range of basic features, which is continuously expanding. 

To work with chat UI components, you’ll need to combine the following two packages:

  • @talkjs/components — a library that provides both React components and web components that you can use with any frontend framework, such as Angular, Vue, or Svelte.
  • @talkjs/theme-default — a package with the default theme for @talkjs/components which lets you display a chat with any frontend framework. The default theme is fully open source, and you can fork and customize it to fit your own brand. See the default theme Github repository.

Use one of the dedicated getting started guides for chat UI components:

  • JavaScript getting started guide →
  • React getting started guide →
  • Next.js getting started guide →
  • Angular getting started guide →
  • Vue getting started guide →
  • Svelte getting started guide →

Note: Chat UI components are currently in preview. They're safe to use in production, but still offer limited features. Updates are added on a rolling basis and are always fully backward-compatible.

Real-time messaging data

You can now read, update, and subscribe to all your chat messaging data—no chat UI needed. This means that you can bring your own fully custom-built chat UI, and let TalkJS take care of the rest.

To work with real-time chat data, you have the following two options:

  • Realtime API, part of the JavaScript SDK
  • @talkjs/core, a standalone package now available on NPM

Want to get started directly? Here are some guides: 

  • 1:1 chat getting started guide →
  • Group chat getting started guide →

In a hurry? Copy a full working code example.

Overview of other changes

Added

  • JavaScript SDK (0.35.0): Added ConversationRef.subscribe to be able to subscribe to a conversation with the Realtime API. 
  • React Native SDK (0.13.0): The keyboardVerticalOffset prop is now also used in Android. This is part of the fix to ensure proper keyboard behaviour on apps targeting Android 15 and above. The default value on Android is 55 + StatusBar.currentHeight.

Changed

  • React Native SDK (0.13.0): Updated dependencies.

Deprecated

  • JavaScript SDK (0.35.0): Removed ConversationSnapshot.lastMessageAt. Use ConversationSnapshot.lastMessage.createdAt instead.

Fixed

  • React Native SDK (0.13.0): Fixed keyboard issues on Android 15 that arose due to Android's enforcement of edge-to-edge.
  • React Native SDK (0.13.0): Fixed internal event subscriptions not being cleaned up properly on re-renders.




Resources

Case study: FrostyWave is empowering young women with TalkJS messaging

Find out how FrostyWave is empowering young women to grow into their best selves with the TalkJS chat API.

Read FrostyWave's story.

Trying out TalkJS demos? Make it collaborative!

You can now use a one-click invite to try out TalkJS demos with colleagues in a shared conversation. Check out the latest demos:

  • Job board →
  • Virtual events →
  • Team collaboration →
  • Marketplace →




👋 Thoughts? Questions? Get in touch.

✨ Follow TalkJS on LinkedIn, Bluesky or 𝕏 to stay up to date.

👩🏾‍💻 Come join TalkJS! Check out the jobs page.

Bug fixChat UIJavaScript SDKREST APINewReact Native SDK
a month ago

Manage chat UI themes with the REST API, and more

Highlight

Manage themes with the REST API

You can now manage your chat UI themes using the TalkJS REST API. This includes the options to create, update, delete or export a theme. You can directly edit themes for your test environment. Once you’re happy with the updates, copy the changes to your live environment, and you’re all set.

Managing your themes through the REST API makes it easier to work with themes across multiple projects, or keep themes in your code base and update them when deploying.

Overview of other changes

Added

  • Added an endpoint to the REST API that allows you to get a user's notification reply-to email address for a conversation. Any emails sent to that email address appear in the conversation as being sent by the user.
  • JavaScript SDK (0.34.0): Added SendMessageParams that can be passed to ConversationRef.send to send a message by specifying its content directly. This allows you to send text messages with manually-specified formatting, in addition to file attachments and locations.
  • JavaScript SDK (0.34.0): Added EditMessageParams that can be passed to MessageRef.edit to edit a message by specifying its content directly. This allows you to edit text messages with manually-specified formatting, in addition to file attachments and locations.
  • JavaScript SDK (0.34.0): Added Session.uploadFile and file-subtype-specific variants. This returns a FileToken that you can use in SendMessageParams or EditMessageParams.
  • React Native SDK (0.12.0): Added the customEmojis prop to Chatbox and ConversationList. This prop adds a set of custom emoji images to the emoji picker, the emoji autocompleter, and emoji reactions. It allows users to send and receive custom emojis.
  • React Native SDK (0.12.0): Added keyboardVerticalOffset prop to Chatbox. This prop is basically identical to the one passed to KeyboardAvoidingView. The default value is 90. Note that the keyboardVerticalOffset prop is only used in iOS to fix an iOS bug. On Android, the KeyboardAvoidingView component isn’t available.

Changed

  • React Native SDK (0.12.1): Changed the default value for the keyboardVerticalOffset to 95.

Fixed

  • Fixed an issue where user IDs weren’t sent correctly, which caused user mentions to break.
  • Fixed an issue where user mentions would break when the user ID contained a pipe (|) character.
  • React Native SDK (0.12.1): Fixed a bug in iOS when New Architecture is enabled, where the whole UI would be scrollable when the keyboard is open.
  • React Native SDK (0.12.0): Fixed a bug in iOS, where opening the keyboard would cause the ChatHeader or the top messages to get hidden. 
  • React Native SDK (0.12.0): Fixed the TypeError: _messageField.getTextResolver is not a function (it is undefined), js engine: hermes. error.
  • React Native SDK (0.12.0): Fixed ref methods not working when called after a delay.

New tutorial

Send event invitations and other custom message types

Out of the box, TalkJS lets you send text, attachments and even voice clips, but what if you business has more specialized types of content to send? In this tutorial, TalkJS developer Frederik Creemers shows you a pattern to create a whole range of custom message types for your chat—from event invitations to payment requests, auction bids, and contact cards.    




👋 Thoughts? Questions? Get in touch.

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

👩🏾‍💻 Come work at TalkJS! Check out our jobs page.

Bug fixImprovementChat UIJavaScript SDKREST APIDashboardReact Native SDKFlutter SDK
8 months ago

Customizable search UI, more push notifications options, and other changes

Highlights

Customizable search UI

You can now customize the conversation list search as part of your theme, to match your own brand’s look and feel. The conversation list search allows users to search for both conversations and messages when using the Inbox pre-built chat UI. 

Components that you can customize as part of your theme include: 

  • ConversationListSearchBox
  • MessageSearchResult
  • NoSearchResults
  • SearchResultHeader 
  • SearchResultFooter

For more information about customizing your search UI, check out the documentation for these theme components.

More push notification options on the Expo SDK

Are you using the Expo SDK for React Native? Then you now have yet more flexibility when setting up push notifications. In addition to Firebase, you can now also use Apple Push Notification Service (APNs) for push notifications when working with the React Native Expo SDK. You can choose either the expo-notifications or the @react-native-firebase/messaging library for your push notifications. 

For more details on setting up push notifications for Expo, see: Mobile Push Notifications: Expo.

Overview of other changes

Added

  • Added the option to have multiple secret keys. You can also rotate your secret keys directly from your TalkJS dashboard.
  • Added the option to mark a conversation as read or unread via the REST API.
  • JavaScript SDK (0.23.0): Added a ConversationRef to fetch and manipulate data about conversations on the Realtime API.
  • JavaScript SDK (0.23.0): Added Session.conversation(id: string): ConversationRef to get a reference to a conversation by its conversation ID.
  • React Native SDK (0.11.0): Added a scrollToMessage prop to the Chatbox component.
  • Flutter SDK (0.13.0): Added a scrollToMessage property to the Chatbox component.

Changed

  • Changed the option to get a conversation on the REST API to expose isUnread for each participant in a conversation, to identify whether or not the conversation is unread for that participant.

Fixed

  • Fixed an issue with pasting lists into the chat from Google Docs on Chrome on Windows.
  • Fixed an issue where scrolling to a specific message didn’t work properly when calling select. 
  • Fixed an issue where, under certain conditions, it wasn’t possible to run multiple sessions concurrently.
  • JavaScript SDK (0.23.1): Fixed ConversationSnapshot.createdAt and ConversationSnapshot.lastMessageAt to be number instead of Date.
  • React Native SDK (0.11.0): Fixed an issue where the device token wasn’t registered properly if the Session component was used immediately after the app had been launched.
  • Flutter SDK (0.13.0): Fixed an issue where the push notification device token registration didn’t work correctly in release builds.
  • Flutter SDK (0.13.0): Fixed an issue where Session.hasValidCredentials didn’t work correctly.

New guides and tutorials 

How to add chat to a Blazor web app with TalkJS
How to build a Django chat app with TalkJS


👋 Thoughts? Questions? Get in touch.

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

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

Bug fixImprovementChat UIJavaScript SDKReact Native SDKFlutter SDKSecurityReact
10 months ago

More secure authentication, comments theme, and more

Highlights

More secure authentication

Using authentication for your chat helps you protect your user’s messages and data. You can now also enable more secure authentication on your chat using industry-standard JSON Web Tokens (JWTs). 

Token-based authentication is more secure. Because tokens can be set to expire, if a token accidentally gets leaked or stolen, any attacker only has a limited window of time in which they could carry out their attack—giving you the confidence of better protecting your chat data.

The new authentication guide walks you through the basic steps to take to:

  • Generate a token
  • Pass a token
  • Activate token-based authentication on your dashboard

You can also use token-based authentication for the REST API.

Read the authentication guide and further details:

  • Security: Authentication
  • REST API authentication

Comments theme

Two windows with comments. On the left a static comment thread in a white chat. On the right a comment box in black, where comments are actively being posted on the topic of hybrid working.

Preset themes let you select a complete look and feel of your TalkJS user interface in one go. The new comments preset theme is tailored for any in-app commenting experience, such as for a:

  • Text or code editor
  • Whiteboard
  • Media player
  • Collaboration tool

With the comments preset theme, you can seamlessly embed comments, mentions, and reactions into your app. Moreover, using ready-made components, you can customize the commenting experience to meet your exact needs.

You can enable the comments theme directly from the Themes page of your dashboard.

Learn more about the Comments preset theme.

Overview of other changes

Added

JavaScript SDK

0.21.0

  • Added support for JSON Web Token (JWT)-based session authentication, adding SessionOptions.token and SessionOptions.tokenFetcher. For more details on how to use JWT-based authentication, see the authentication documentation.

0.20.0

  • Added the first aspects of the Realtime API.
  • Added UserRef to fetch and manipulate data about users.
  • Added Session.currentUser: UserRef to get a reference to the current user for use in the Realtime API.
  • Added Session.user(): UserRef to get a reference to an arbitrary user.

0.19.0

  • Added the option messageId to Inbox.select.

React SDK

0.1.8

  • Added token and tokenFetcher props to Session. For more details on how to use JWT-based authentication, see the authentication documentation.

React Native SDK

0.10.0

  • Added token and tokenFetcher props to Session. For more details on how to use JWT-based authentication, see the authentication documentation.

0.9.0

  • Added disableZoom prop to Chatbox and ConversationList. This allows you to choose whether the user can pinch to zoom in and out of the UI. By default its value is false and the user can zoom into the UI.

Flutter SDK

0.12.0

  • Added token and tokenFetcher properties to Session. For more details on how to use JWT-based authentication, see the authentication documentation.

0.11.0

  • Added the enableZoom property to Chatbox.
  • Added the sendMessage method to Conversation.

Changed

  • Made the ReferencedMessage component customizable in the Theme editor. The ReferencedMessage component renders the contents of the message that is being replied to.

Deprecated

  • JavaScript SDK (version 0.21.0): Deprecated SessionOptions.signature. Signature-based authentication will continue to be supported indefinitely, but JWT-based authentication is recommended for new projects.
  • React SDK (version 0.1.8): Deprecated the signature prop on the Session component. Signature-based authentication continues to be supported indefinitely, but JWT-based authentication is recommended for new projects.
  • React Native SDK (version 0.10.0): Deprecated the signature prop on the Session component. Signature-based authentication will continue to be supported indefinitely, but JWT-based authentication is recommended for new projects.
  • Flutter SDK (version 0.12.0): Deprecated the signature prop on the Session component. Signature-based authentication will continue to be supported indefinitely, but JWT-based authentication is recommended for new projects.

Fixed

  • Fixed an error where a certain combination of unicode characters in emoticons could cause a page to crash.
  • Fixed an issue where, under certain conditions, updating a user’s presence (such as by typing, or focusing a window) would result in errors.
  • Fixed an issue where performing a search didn’t respect feed filters.
  • React Native SDK (version 0.9.1): Fixed a regression with messages not getting marked as read when loading the Chatbox.
  • React Native SDK (version 0.9.0): Fixed unnecessary warnings in iOS when calling MessageField methods.

New guides and tutorials

  • How to integrate chat into a Framer site with TalkJS
  • How to show a system message only to a specific user




👋 Thoughts? Questions? Get in touch.

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

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

Bug fixImprovementReact Native SDK
12 months ago

Use custom data to style your chat, and more

Spotlight

Use custom data to style your chat

To offer all your users a smooth chat experience, you might want to style your chat differently for various user groups. For example, if you run a marketplace, you could enable sellers to use different color schemes. Or in education, you could give each study cohort their own tailored chat style.

Creating dedicated themes is a fast and convenient way to style your chat for different user groups. However, another easy option is to style your theme by passing data to themes. For instance, if you pass a color value as custom data, you can access this value as a custom CSS property in your Theme Editor, and use it to style your chat.


A row with three chatboxes side-by-side. Each chatbox represents a conversation with a different person, and each also has a differently colored chat header: the header of the chat with Thomas River on the left is bright red, the header of the chat with Kirsten Doe in the center is gray-pink, and the header of the chat with James Fayland on the right is bright green.

For a detailed guide on styling your chat with custom data, read the latest tutorial: How to use custom data to style your TalkJS chat.

Overview of changes

Added

  • Added the SearchResultHeader and SearchResultFooter components to the theme editor, so that they can be customized directly as part of a theme.
  • React Native SDK (version 0.9.0): Added a disableZoom prop to Chatbox and ConversationList. With the disableZoom prop, you can choose whether the user can pinch to zoom in and out of the UI. By default its value is false and the user can zoom into the UI.

Changed

  • Changed that new users who don’t have a role assigned, have their role set to default. This change only applies to users of apps created after 2024-04-17, and so doesn’t affect existing workflows.

Fixed

  • Fixed an issue where, under certain conditions, the app would return an error when deleting a system message.
  • React Native SDK (version 0.9.0): Fixed unnecessary warnings in iOS when calling MessageField methods.




👋 Thoughts? Questions? Get in touch.

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

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

Bug fixImprovementDashboardReact Native SDKFlutter SDK
a year ago

Search all messages, a fresh activity dashboard, and more

Highlights

Search all messages and conversations

You can now include a search box in your chat, to allow users to search all their messages and conversations. 

Overview of the top of the conversation list on the left side of the Inbox pre-built chat UI. At the top is a toggle with the label ‘Browser notifications’, below that is a search box with space to add search terms and a magnifying glass to initiate the search. Below that is the first conversation from the conversation list.

If enabled, the search box appears at the top of the conversation list of the user's inbox in the Inbox pre-built chat UI. 

To enable the search functionality, go to the Settings page of your dashboard. In the Search section, check the Search enabled checkbox.

Section in the Settings page of the TalkJS dashboard with the header ‘Search’. Next to the header is a green label stating ‘Growth plan feature’ with a check mark. Below the header is a check box with the text ‘Search enabled’. At the bottom is a button with the text ‘Index all messages’, with the associated text ‘Messages since April 15, 2024 are indexed and searchable’.

Once you’ve enabled search, all new messages are directly searchable. To also be able to search older messages, select the Index all messages button.

The search messages feature is available on the Growth plan or higher.

Fresh new activity dashboard

With a fresh new Activity overview, it has just become yet easier to analyze chat activity and monitor conversations.

Overview of the Activity page of the TalkJS dashboard. At the top is a header ‘Activity’, with below that a ‘Timeframe’ dropdown menu to select a timeframe, and a list of the number of active users, conversations created, active conversation, and messages in the selected timeframe. Below that is a header ‘Conversation history’, with a table with columns for ‘ID’, ‘Last message’, ‘Subject’, ‘Participants’, ‘Messages’, and ‘Details’, the latter with a button labeled ‘View’ to view the conversation details.

On the Activity page of your TalkJS dashboard, you immediately have an overview of the number of messages sent, active users, as well as conversations created and active. 

You also have direct access to the conversation history of all conversations in your app. To access the details for a specific conversation, select View in the conversation’s row.

Overview of other changes

Added

  • Added the option to separate email notification replys based on a regular expression (regex). 

Changed

  • The sort filter in the TalkJS template language now accepts a key to sort by.
  • React Native SDK (version 0.8.1): The ConversationList no longer highlights the first conversation by default.

Fixed

  • Fixed an issue where audio playback would produce a crackling sound when using Android WebView.
  • Fixed an issue where voice messages wouldn’t correctly play back on iOS 17.3 and lower.
  • React Native SDK (version 0.8.3): Fixed an issue where getNotificationHandler was undefined.
  • React Native SDK (version 0.8.2): Fixed an issue where errors didn’t show up in debug mode.
  • Flutter SDK (version 0.10.2): Fixed an issue where push notifications didn’t work correctly on Android when an app had been terminated.
  • Flutter SDK (version 0.10.2): Fixed an issue where MessageFieldOptions didn’t work correctly.




New guides and tutorials 

  • How to integrate chat into your Softr app with TalkJS 
  • How to shard a group chat in TalkJS 
  • How to customize the popup open and close button 
  • How to make clickable tabs for conversations 
  • New JavaScript getting started guides by use case: 1-on-1 chat, group chat, and large group chat
  • New React getting started guides by use case: 1-on-1 chat, group chat, and large group chat




👋  Thoughts? Questions? Get in touch.

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

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

Bug fixAnnouncementImprovementChat UIReact Native SDKFlutter SDKReact
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 

  • How to set up the Inbox UI mode as a pop-up
  • How to create a poll in TalkJS
  • Integrate chat into your Bildr webapp with TalkJS
  • Integrate chat into a Webflow site with TalkJS

👋 Thoughts? Questions? Get in touch.

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

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

Bug fixAnnouncementImprovementJavaScript SDKREST APIDashboardReact Native SDKReact
a year ago

Customizable theme components and powerful feed filters

Highlights

Customizable theme components

The theme editor in your TalkJS dashboard lets you tailor the look and feel of the TalkJS user interface to match your brand style. You can edit the default theme directly, or create your own theme from scratch. 

Each theme comes with a large number of customizable theme components. This includes top-level components such as the chat header at the top of a chat, the user message, and the message field in which users can type messages, or send attachments and voice recordings. It also includes subcomponents that are rendered by a top level component in a theme, such as the user’s avatar and the typing indicator that shows when a user is typing.

A chatbox with a conversation and annotations for a selection of customizable theme components. Annotated components are: the chat header at the top, a user message, an avatar, a typing indicator, and the message field at the bottom.

Examples of customizable theme components

We’re continuously expanding the range of components that you can customize. Additional UI components will be available to edit soon. 

Read more on customizable theme components.

Powerful feed filters

If you’re using the Inbox pre-built chat UI, you can customize which conversations show up in the conversation list of the user's inbox by using conversation list filters. 

A conversation list with at the top a toggle for browser notifications, and below that four conversations related to job applications for engineering or data-related roles.

A conversation list with only conversations related to job applications

For example, you can set up a filter to show only conversations with unread messages, conversations that were created or updated within a specific time frame, or only conversations that match a specific string. On top of that, you can filter on specific custom properties, or combine multiple filters all at once.  

You can either use the JavaScript Chat SDK or the REST API to filter conversation lists and select which conversations you return.

Read more on conversation feed filters.

Overview of other changes

Changed

  • React SDK (version 0.1.5): Changed to output ES2015.

Fixed

  • Fixed a bug in the team_chat preset theme which caused the MessageField layout to display incorrectly.
  • Fixed a bug where autoscroll would behave incorrectly under certain conditions.
  • Fixed an issue where, on iOS, replying to a message would focus the MessageField but not resize the MessageList, with the result that the keyboard would cover both the MessageField and the ReplyBar.
  • Fixed an issue where, when replying to a message that contains a list, the body of the quoted message would be rendered incorrectly.
  • Fixed an issue where the message action menu button would stay visible when moving the mouse fast.
  • React Native SDK (version 0.7.1): Fixed a regression that would occur when selecting a conversation while onSelectConversation isn’t given. In this scenario, selecting a conversation will now show the TalkJS Inbox Mobile view.
  • React Native SDK (version 0.7.1): Fixed a bug where notifications not sent by TalkJS would be displayed twice.

New guides and tutorials 

  • How to integrate a chatbot into your TalkJS chat with the OpenAI API
  • How to add a custom typing indicator for a chatbot

👋 Thoughts? Questions? Get in touch.

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

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

Bug fixImprovementJavaScript SDKREST APIDashboardNewReact Native SDK
a year ago

Intuitive new dashboard, better push notification support, and more

Highlights

Intuitive new dashboard

Your TalkJS dashboard has just become more intuitive to use, to get you started seamlessly. 

Overview of the TalkJS dashboard navigation with the following pages listed: Activity, Chat UI, Notifications, Themes, Settings, Live log, and Docs. Plus a toggle for live mode, and a dropdown menu with account details.

From the dashboard, you can:

  • Analyze chat usage and monitor conversation details on the Activity page.
  • Update the chat UI and user permissions from the Chat UI page.
  • Update browser, email, and SMS notification settings from the Notifications page.
  • Create and edit custom UI themes or email themes from the Themes page.
  • Finetune your app-wide settings—including security settings, localization, push notifications, and webhooks—on the Settings page.
  • Get real-time insights from the Live log page.

You can now find the Roles page to create or edit user roles by clicking on ‘Edit roles’ at the top of either the Chat UI page or the Notifications page.

Overview of the section of either the Chat UI page or the Notifications page where you can find the option to edit roles, with the 'Edit roles' link singled out..

Better push notification support

Sending mobile push notifications with TalkJS just got easier, with support for Apple Push Notification Service (APNs) tokens and the new Firebase Cloud Messaging (FCM) API.

Support for APNs tokens

TalkJS now supports using stateless authentication tokens for your communication with Apple Push Notification Service (APNs). Establishing a token-based connection to APNs has several main advantages:

  • You can use the same token from multiple provider servers.
  • You can use one token to distribute notifications for all apps in your Apple Developer Team.
  • APNs tokens don’t expire, so once you have configured them you’re all set.

You can configure APNs tokens from the Settings page of your TalkJS dashboard.

Support for new Firebase Cloud Messaging API

TalkJS now supports the newer Firebase Cloud Messaging (FCM) API for sending mobile push notifications. 

Google has deprecated FCM legacy APIs. For push notifications to continue to work, you will need to generate and provide a service account private key at the earliest opportunity, and before 20 June 2024. 

To start using the new FCM API, take the steps in the following guide: Configure Firebase Cloud Messaging.

Overview of other changes

Added

  • Added a /batch endpoint to the REST API, which you can use to perform multiple operations at once with a single call. See: REST API Batch endpoint documentation.
  • Added an option to the theme editor to allow you to customize the height of the conversation list. You can find the theme editor on the Themes page of your dashboard.
  • Added the option to access the current conversation object inside the MessageField theme component in the theme editor.
  • React SDK (version 0.1.4): Added a useUnreads hook that returns conversations with unread messages, to make it easier to render a component based on the list of conversations with unread messages.
  • React Native SDK (version 0.7.0): Added onLeaveConversation, onCustomMessageAction, and onCustomConversationAction props. These props replace the methods with the same names, which have been deprecated.

Changed

  • Javascript SDK (version 0.18.0): Changed that calling .select on a UI now returns a promise that is resolved when a new conversation is selected.

Deprecated

  • Deprecated the use of Apple Push Notification Service (APNs) certificates. Your configured APNs certificates will continue to work until the certificate expires. Instead of APNs certificates, you can now use APNs tokens.
  • Deprecated legacy themes with limited CSS support. To change the look and feel of TalkJS to match your style, use custom themes instead.
  • Javascript SDK (version 0.18.0): Deprecated ConversationSelectedEvent.others and SelectConversationEvent.others. Instead, use ConversationSelectedEvent.participants and SelectConversationEvent.participants.
  • React Native SDK (version 0.7.0): Deprecated the off method in both Chatbox and ConversationList.
  • React Native SDK (version 0.7.0): Deprecated onLeaveConversation, onCustomMessageAction and onCustomConversationAction methods. Instead, use the added props with the same names.

Fixed

  • Fixed an issue where the push notification tester in the TalkJS dashboard would not send out test push notifications correctly.
  • Fixed a bug that would make the chat freeze when attaching multiple files at once.
  • Fixed an issue where email changes on the Account settings page of the dashboard did not get updated correctly.
  • Fixed a bug where, on iOS, Arabic characters would not get deleted properly when using the backspace key.
  • Fixed an issue where a race condition occurred when selecting the inbox and setting the text of a message field at the same time.
  • React Native SDK (version 0.7.0): Fixed a bug on iOS where videos in link previews would automatically play in full screen mode, instead of inline.

Fresh tutorials and guides

  • How to add chat to a Laravel app with TalkJS
  • How to use TalkJS to create a team chat with channels
  • Chat moderation essentials
  • How to add a GIF picker to your TalkJS chat

👋 Thoughts? Questions? Get in touch.

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

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

Bug fixAnnouncementImprovementJavaScript SDKREST APIDashboardReact Native SDK
a year ago

TalkJS updates for 15 July 2023

This changelog entry reflects changes to TalkJS introduced between 12 June 2023 and 15 July 2023.

Highlights

Unread message counter in REST API and Javascript SDK

You now have two new fields available in the user's conversations REST API endpoint that will provide further insight into a user's unread messages. The unreadMessageCount field in the Conversation object will allow you to retrieve the number of unread messages a user has in a conversation. This will help in tailoring badges for the user interface.

Further, the isUnread property indicates whether the conversation has been read by the user or not. isUnread offers a convenient way to determine the read status of the conversation.

Check out the updated REST API documentation for more information and usage examples.

The unreadMessageCount property is also available in the Javascript SDK.

Export conversation data from dashboard

Exporting conversation data doesn’t need to be a hassle. You can now export conversation data from your dashboard with just a click. 

To export conversation data, go to the Activity view on the dashboard. Select a conversation, and then click Export Conversation Data. You can save a transcript as a text file, or export all the relevant data as a JSON object.

The TalkJS dashboard with the conversation details of a selected conversation, highlighting a section with the following buttons: an 'Export Conversation Data' button, as well as buttons to select either a conversation transcript (.txt) or data export (.json).

The dashboard button to export conversation data as .txt or .json files

Overview of other changes

Added

  • Added several methods to Chatbox in the React Native SDK: getCurrentConversation, to retrieve the conversation currently shown in the UI; onCustomConversationAction, which triggers when a user launches a custom action on a conversation within the TalkJS UI; onLeaveConversation, which triggers when the user clicks the Leave conversation action; and sendLocation, which sends the user's current location to the currently active conversation.
  • Added the isForegroundEvent property to NotificationPressedEvent in the React Native SDK, which indicates whether the user pressed the notification while the app was in the foreground or not.
  • Added a leave method to ConversationBuilder in the React Native SDK, which removes the current user from the conversation.
  • Added support for passing data to themes in both the Chatbox and the ConversationList layouts in the React Native SDK.
  • Added Catalan (ca) to the list of languages available for localization of the TalkJS interface. A massive thank you and credit to Relab Studio for providing the translation.

Fixed

  • Fixed an issue that prevented Firebase Dynamic Links from generating link previews.
  • Fixed an issue which disabled zooming in when clicking the MessageField on iOS for the React Native SDK.
  • Fixed a bug that prevented handling notifications in the background on Android for the React Native SDK.
  • Fixed a bug where the app would not open when a notification was clicked on Android for the React Native SDK.
  • Fixed a bug where dismissed notifications were not being removed from the internal list of active notifications on Android for the React Native SDK.
  • Fixed an issue in the theme editor where navigation links in test mode would link to live mode, instead of to test mode.

Changed

  • Made the WebView transparent in the React Native SDK. With a transparent WebView, the background color you have applied to the parent View will be used in the empty areas around the TalkJS UI.
  • Changed the type of the conversation property in SelectConversationEvent from ConversationBuilder to ConversationData in the React Native SDK.
  • Upgraded dependencies for the React Native SDK.
  • Improved various UX aspects of the dashboard’s themes page, including improvements to the layout and dropdown menus, as well as adding the options to delete custom files, hide built-in (non-top-level) files, and reset a file to the preset version.