Highlight

Push notifications with Firebase Cloud Messaging

Want to keep your users engaged even when they're away from your chat? Learn how to set up web push notifications with Firebase Cloud Messaging (FCM) in TalkJS. Lucy Keer offers a step-by-step guide for adding push notifications for your website or app. 

Read more

Overview of changes

Added

• Added the option to set a referencedMessageId when importing messages with the REST API.
• Added a hook that triggers an event when a message is translated in real-time. The event includes the message ID, original message text (text), detected language, and the translated message text (translatedText). This way, you can store both the original and translated versions of the message.

Fixed

• Fixed an issue where, in the Realtime API, publishes would not be received correctly if the conversation ID of the conversation you’re subscribed to contained special characters.
• Fixed a bug where notifications didn’t pick up correctly on edits to a message text.

New resources

Real-time message translation for chat apps

Real-time chat translation reduces language barriers and allows you to offer global support. Follow this guide by Chris Meyns to set up real-time message translation for your website or app. 

Check out real-time translation 

Code samples

Want to add custom features to your chat? Refresh your chat UI? Use code samples! Whether you're building with regular JavaScript, React, Angular, Flutter, or other popular frameworks, you’ll find a wide range of ready-to-use examples. From integrating AI chatbots to adding custom features like GIF pickers or polls, we've got you covered.

Explore code samples

👋 Thoughts? Questions? Get in touch.

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

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

Added

• JavaScript SDK 0.33.0: Added AudioBlock to support audio attachments on the Realtime API.
• JavaScript SDK 0.33.0: Added VideoBlock to support video attachments on the Realtime API.
• JavaScript SDK 0.32.0: Added ImageBlock to support image attachments on the Realtime API.
• JavaScript SDK 0.32.0: Added VoiceBlock to support voice message attachments on the Realtime API.

Changed

• Improved the options to filter data in your theme, by mapping and filtering lists. 

Deprecated

• Removed the option to set a filename for a file attachment using FileBlock on the Realtime API.

Fixed

• Fixed an issue where video playback in the upload preview on iOS on Safari wasn’t working properly. 
• Fixed an issue where video thumbnails in message bodies were not showing up properly on Safari and Chromium WebView.
• Fixed an issue where, on the Realtime API, message replies didn’t show the referenced message that was being replied to correctly. 

👋 Thoughts? Questions? Get in touch.

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

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

Added

• Flutter SDK (0.15.0): Added registerBackgroundHandler property to Android Settings passed to registerPushNotificationHandlers().
• Flutter SDK (0.15.0): Added a Talk.handleFCMBackgroundMessage function.

Changed

• React SDK (0.1.11): Externalized react/jsx-runtime dependency (thanks to @KlotzJesse 🙌).
• React SDK (0.1.11): Removed react-dom peer dependency.

Fixed

• Fixed an issue where email notifications didn’t properly preserve whitespace.

💡Did you know that you can directly download over 50 TalkJS example projects? Check out the  talkjs-examples GitHub repo to get started. 

New case studies 

You’re doing amazing things with TalkJS! 

Two new case studies this month: how Caspar Health uses TalkJS to enable patients and healthcare professionals to communicate securely, and how Hotplate empowers home chefs to talk directly with their customers.

👋 Thoughts? Questions? Get in touch.

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

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

Highlights

Multiple webhooks

You can now add multiple webhooks to your app. Webhooks can be useful as part of a chatbot interface, to inspect messages as they happen, or to trigger custom domain-specific actions.

To add a new webhook, go to the Settings page of your TalkJS dashboard, and select Add new webhook. Add your webhook URL, select the events that you’d like to subscribe to, and save your settings. 

You can add up to three webhooks if you’re on the Growth plan or higher.

Read more about webhooks.

Accessibility improvements

Chat just got more accessible:

• Keyboard navigation: The scrollable area in the chatbox is now keyboard accessible. The area can get focus, so you can use your keyboard’s up and down arrow keys to scroll the container.
• Screen reader: If you’ve got a conversation in focus and someone sends a new message into that conversation, a screen reader will read out the new message.

Do you have more accessibility wishes for your chat? We’d love to hear from you! Get in touch.

Messages on the Realtime API

Messages are available on the Realtime API. That means that you can now access a continuous, up-to-date flow of data related to messages, without needing to send repeated requests or open a chat UI. 

Version 0.31.0 of the JavaScript SDK adds the following:

• ConversationRef.message: Reference to a message in a given conversation.
• ConversationRef.subscribeMessages: Subscribe to the messages in a given conversation.
• MessageSubscription: Subscription to the messages in a given conversation. 
• MessageRef: Reference to a message.
• MessageSnapshot.content: The main body of a given message. The body is a list of content blocks with entity trees, which means that you can render the message exactly as it would appear in the frontend.
• ReferencedMessageSnapshot: Snapshot of a message's attributes at a given moment in time. 
• MessageSnapshot.referencedMessage: Snapshot of the message that the given message is a reply to, or null if this message is not a reply. 
• EditMessageParams, SendMessageParams, and MessageActiveState.

Overview of other changes

Added

• JavaScript SDK (0.31.0): Added ConversationRef.send.
• JavaScript SDK (0.30.0): Added ConversationSnapshot.lastMessage.
• JavaScript SDK (0.29.0): Added ConversationRef.markAsRead and ConversationRef.markAsUnread
• JavaScript SDK (0.28.0): Added ParticipantRef to the Realtime API.
• JavaScript SDK (0.28.0): Added ConversationRef.participant to get a participant for a given conversation to the Realtime API.
• JavaScript SDK (0.28.0): Added ConversationSnapshot.joinedAt to the Realtime API.
• JavaScript SDK (0.27.0): Added ConversationRef.set and ConversationRef.createIfNotExists to the Realtime API.
• Added the option to mark conversations as read or unread to the Realtime API.
• Flutter SDK (0.14.0): Added the onUnreadsChange property to Session.

Changed

• React SDK (0.1.10): Allow null as a value for the conversationId prop.
• Changed the options for @mentioning a user. Only users who are a current participant in a conversation can be mentioned in that conversation. You can no longer mention guest users. 

Deprecated

• Flutter SDK (0.14.0): Deprecated the unreads property of Session.

Fixed

• Fixed a bug in Realtime API batching, where in some cases calls would be executed out-of-order.
• Fixed an issue where the main chat would scroll down when you scrolled in a message search.
• Fixed a bug where a participant who had been removed from a conversation could still be @mentioned in that conversation.

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.

Create and get conversations and participants with the Realtime API  ✨ preview  ✨

The Realtime API provides you with a continuous, up-to-date flow of your TalkJS data without the need to send repeated requests or open a chat UI. And the options available on the Realtime API keep expanding. From version 0.27.0 of the JavaScript SDK, you can use ConversationRef.set, which allows you to set properties of a conversation and manage a user’s participation within it. Additionally, with ConversationRef.createIfNotExists you can streamline the process of creating a conversation if it doesn’t already exist, and to automatically add the current user as a participant if they aren't already one.

Version 0.28.0 then adds ParticipantRef, which allows you to reference a specific user's participation in a conversation. This can be useful for operations such as joining or leaving a conversation, or controlling a user’s access. In addition, ConversationRef.participant offers easy access to a participant reference within a conversation, while ConversationSnapshot.joinedAt provides the date and time (as a Unix timestamp in milliseconds) that a user joined the conversation. With these updates, you have even greater flexibility in accessing and managing conversation conversations and participants of your chat.

Changed

• The CloseButton, SearchButton  and ActionMenu built-in components available in ChatHeader now accept a label prop that allows you to set your own label for these buttons. Setting your own label can be useful if you’d like to add your own custom translation for these labels.
• The count of the number of unread messages a user has in a conversation is now capped at a thousand. A user can have more than a thousand unread messages, but the count won’t increase beyond a thousand.
• Users accessing TalkJS with multiple IDs on the same device can now manage their desktop notification preference settings separately, on a per-user basis.

Fixed

• Flutter SDK (0.13.1): Fixed a stack overflow issue when comparing sessions.
• Fixed issues where Flutter webview faced a build issue on Xcode 15 and Xcode 16/iOS 18.
• Fixed an issue where the conversation actions button in the chat header didn't have an aria-label and title attribute set for screen readers.

New tutorial

👋 Thoughts? Questions? Get in touch.

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

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

Highlight

Add custom emojis

You can now add your own custom emojis to your chat 😀

Using the customEmojis option, you can add images for emojis that your users can use in their messages, or as emoji reactions.

To add a custom emoji, specify an emoji name and a url to the emoji image you’d like to add. The emoji name must be unique, and must start and end with a colon, for example :coffee-mug:, :cool-doge: or :roomba-cat:. The image URL must be a URL to an image file, such as an SVG, GIF or PNG. The image itself can be any size, as long as it’s square (that is, has the same width and height). 

You can then add your custom emojis when creating your chat UI, for example as follows:

 customEmojis: {
   ':coffee-mug:': { url: 'https://example.com/images/coffee-mug.png' },
   ':roomba-cat:': { url: 'https://example.com/images/roomba-cat.gif' },
   ':cool-doge:': { url: 'https://example.com/images/cool-doge.gif' },
 }

Read more about custom emojis.

Overview of other changes

Added

• JavaScript SDK (0.24.0): Added support for subscribing to a user via UserRef.subscribe, which returns a UserSubscription.
• JavaScript SDK (0.26.0): Added customEmojis setting to createChatbox, createInbox and createPopup.

Changed

• JavaScript SDK (0.25.0): Removed UserData from the Realtime API. Everything that previously returned UserData now returns UserSnapshot.
• JavaScript SDK (0.25.0): Changed UserSnapshot.locale and SetUserParams.role, so that these are now correctly marked as nullable.

Fixed

• Fixed a bug where UserRef.set in the Realtime API would give an error if you didn’t specify a name.
• Fixed an issue where, under certain conditions, you couldn’t add message translation for your preferred language.

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.

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 

👋 Thoughts? Questions? Get in touch.

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

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

Added

• Added an OpenAPI specification for the TalkJS REST API. The specification is available in both YAML and JSON formats for the most recent version (2024-01-01) of the REST API.
• Added a status page where you can monitor the current health status of the TalkJS infrastructure: status.talkjs.com.
• JavaScript SDK (0.22.0): Added the UserRef.set and UserRef.createIfNotExists methods to the RealTime API.
• React SDK (v0.1.9): Added a "use client" banner to build outputs.

Fixed

• Fixed an issue due to which it was temporarily impossible to batch update users using the REST API.
• Fixed an issue due to which the decimal expiry of JWT for authentication didn't work correctly.
• Flutter SDK (0.12.1): Fixed a conflict with the flutter_inappwebview package.

New tutorial

• Add chat to a Next.js 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.

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

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.

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.

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.