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.

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.

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:

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:

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.

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.

Highlights

Customizable link previews

You control how TalkJS displays link previews for URLs shared in the chat. For example, you can choose to remove previews for links that contain certain blocked words. And you can now also set whether you prefer your link previews to show up large or compact. 

By default, TalkJS generates a full, large preview for any link that a user shares. However, you can also set your link previews to be more compact.

A large link preview (on the left) and a compact link preview (on the right)

If you’d like your link previews to be more compact, then you can do so by setting the compact parameter of the LinkPreview or LinkPreviews components to true.

Read more on link previews.

Effortless mentions

Mentioning someone in a chat just became more effortless. Users no longer need to manually select, or hit enter or tab to mention another user in a conversation. They can simply type @name and once the user’s name is typed out in full, the chat auto-accepts the first remaining suggested mention. 

A user is mentioned in a conversation simply by writing an @ symbol and fully typing their name

For names that include diacritics, the user can even type the letters without diacritics, and the mention still matches.

Overview of other changes

Added

• Added support for sending mobile push notifications using Firebase on iOS.
• Added customizable unsubscribe links to email notifications, to allow users to unsubscribe from email notifications. You can edit the link text. If you’re on the Growth or Enterprise plan, then you can also edit the style and placement of the unsubscribe links in your email theme. 
• React SDK (version 0.1.6): Added an asGuest prop to Chatbox, Inbox and Popup, to enable users to join a conversation as a guest.

Changed

• Changed the behavior of custom message filters and custom conversation filters. You can now also filter messages and conversations for either one custom property or another, rather than only for a combination of custom properties.
• Changed the options for selecting an emoji reaction. If there is enough space for it, selecting an emoji reaction now first shows the emoji reaction favorites bar.

Fixed

• Improved stability and performance for large chats.
  
• Fixed a bug where selecting a conversation in which the user had a draft message would crash the chat.
• Fixed an issue where SMS notifications would not get sent for identical messages sent to the same person within a two-minute timeframe.
• Fixed an issue where push notifications were not sent for large payloads.
• Fixed an issue where ActionButton params wouldn’t update when switching between conversations.
• Fixed in issue where no SVG group chat images were generated for group chats.
• Fixed a bug where, under certain conditions, the message action menu would continue to stay visible even when it wasn’t interacted with.
• REST API (version 2024-01-01): Fixed a bug related to fetching conversations for a non-existing user. Fetching a conversation for a non-existent user now returns a HTTP 404 Not found status, instead of an HTTP 200 OK status.

New guides 

• How to add a hidden user to a TalkJS conversation 
• How to add a ‘Create new chat’ button in 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

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.

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 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.

Highlights

React SDK

Are you using React for your project? Then life has just become a lot easier, with an official React SDK for TalkJS. With React components for TalkJS, you can have all the goodness of the TalkJS pre-built chat UIs inside your React web application in no time. 

TypeScript bindings are included.

Install the @talkjs/react npm package and get started.

Mark conversation as unread

Users can now mark conversations as unread. When a user marks a conversation as unread, a small dot appears inside the conversation header in their inbox to indicate the unread status. When the user switches focus back to the conversation, the unread message marker disappears.

Menu option to mark a conversation as unread

In new themes, the Mark conversation as unread feature is automatically active. For existing themes, you can follow the upgrade guide to enable marking conversations as unread.

Batch update users

Do you need to update details for multiple users? Forget making one API call after the other. You can now batch update the properties of many users at once, using the REST API. Simply send a PUT request with user objects with updated details to the /users endpoint.

Read more on how to batch update users.

Action buttons

Action buttons and action links are an easy way to let users perform quick-response actions. You can now execute custom code in your chat to create action buttons and action links.

Action buttons for color selection

You can add action buttons and links to your components in the theme editor, or apply special formatting to your messages directly. 

For security reasons, adding action buttons and action links to messages only works with messages sent via the REST API.

Read more on action buttons and action links.

Overview of other changes

Added

• Added options for customizing various components of the message field area of a conversation. This includes customizable components for the reply bar, voice recorder, audio player, emoji suggest bar, and the mention suggest list.
• Enabled message actions (such as deleting, favoriting, or reporting a message) also for users who only have read access to a conversation.
• Added a thumbnail element to themes that support a src attribute, which can be used to display image, audio, or video files that are not message attachments.

Changed

• Improved message visibility by scrolling the message field into view when it gets focused.
• Improved image previews by using the image dimensions for images that have not yet been loaded, while they are loading.
• Improved the color contrast for @mentions in the Default Dark theme.

Fixed

• Fixed an issue where the iframe background would show up light, even when the color scheme in the host webpage was set to dark.
• Fixed an issue where an audio recording playback was not properly loaded on Safari.
• Fixed a bug where focusing the message field would cause the host webpage to scroll down in Chrome and Firefox.
• Fixed a bug where email notifications for messages containing mentions would fail to send when using a templated email theme.
• Fixed several bugs where, when editing a message, the message field was not displayed correctly or the message list would have incorrect padding.
• Fixed an issue where, in the Default Dark theme, search result highlighting would make the found text unreadable.

Security

• Addressed a potential cross-site scripting (XSS) vulnerability related to uploading SVG files. When clicking on an SVG file, a user will now download the file, rather than open it directly in the browser.

👋 Thoughts? Questions? Get in touch.

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

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