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.

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.

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

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

Intuitive new dashboard

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

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.

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.

Highlight

Action buttons and action links in the conversation list

You can now use action buttons and action links inside the ConversationListHeader and ConversationListItem theme components in the Inbox UI, giving you yet more control in customizing your chat. 

For example, you could add a custom action button to your ConversationListHeader to allow users easily to create a new chat, or add a custom action link to a ConversationListItem with relevant information for each conversation in the list.

A ConversationListHeader with a custom action button and a ConversationListItem with a custom action link

Read more on action buttons and action links.

Overview of other changes

Changed

• Changed the number of patches that you can send in a single call to the batch user update endpoint of the REST API to a maximum of 100 patches at a time.

Fixed

• Fixed an issue where deleting a message with an attachment did not properly delete the associated file on Cloud Storage for Firebase.
• Fixed an issue with uploading attachments when replying to a conversation via email.
• Fixed an issue in the Flutter SDK where links in Android would open in the user’s external browser by default, instead of in the WebView.
• Fixed a bug where Conversation.otherIds would return the current user (me) if that user was the only person in the conversation.
• Fixed bug that caused CustomMessageAction events to have message.id set to null for newly sent messages.

👋 Thoughts? Questions? Get in touch.

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

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

Highlights

Filter by creation time

Need to get all of a user’s messages sent last week? You can now filter both conversations and messages by their creation date.

Using the createdAt predicate, you can select exactly those messages or conversations that were created within a particular time interval.

Read more on filtering by creation time for messages, and for conversations.

Edit app metadata from your dashboard

You can now edit metadata for your application directly from your dashboard. 

With the app metadata editor, you can easily store and edit custom metadata for your app, for example the app’s name, or a custom website URL. Once stored, you can make these app metadata variables available in other places throughout your app, such as in roles, themes, or in your email notification templates.

Edit your app’s metadata directly from your dashboard

You can find the metadata editor under the Settings tab of your TalkJS dashboard, and access your custom app metadata in roles, themes, and notification settings with {{app.custom.}}. 

Multi-line inputs are supported.

Read more on using app custom fields.

Flutter SDK v0.9.1

The Flutter SDK just got better. With the release of version 0.9.1, you can use the Flutter SDK to pass data to themes, and to automatically sync the keyboard color of the chat interface based on your app's theme. 

The Flutter SDK now also has support for custom conversation actions, and ensures that various properties and methods are available for a Session object, including methods for setting, unsetting, and clearing push registrations, and for tracking the number of unread conversations in a session.

Get started with the Flutter SDK.

Overview of other changes

Added

• Added participant access right information (that is, whether a participant has read-only or read-and-write access) in a conversation to that conversation’s ConversationData in the JavaScript SDK.
• Added the option to define custom message actions that are available only for messages from other conversation participants.

Changed

• Simplified adding emoji reactions to themes. You can now pass the Reaction object as a whole to the EmojiReactionButton subcomponent in themes.

Deprecated

• Deprecated InboxOptions.selected. Instead, use Inbox.select from the JavaScript SDK.

Fixed

• Fixed an issue where the REST API batch user update did not handle invalid input data correctly.
• Fixed an issue where having multiple tabs open for a conversation would send multiple browser notifications.
• Fixed a bug where, when using the Flutter SDK, messages would only get marked as 'read' after clicking the message field, rather than when loading the chatbox.
• Fixed a bug where a custom sub-component with the same name as a top-level component would get treated as a top-level component, and hence would not be deletable.
• Fixed an issue where a failed authentication was unable to distinguish between failure due to connection issues, and an expired authentication token.

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