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.
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.show
prop to Popup
, that allows you to specify whether the pop-up widget pre-built chat UI should be shown or hidden.onMessage
and onUnreadsChange
props to the Session component.hasValidCredentials
, clearPushRegistration
, setPushRegistation
and unsetPushRegistration
methods to the Session component.Chatbox
and ConversationList
.themeOptions
property in ConversationList
.AndroidChannel
interface to AndroidSettings
, and the IOSPermissions
interface to IOSSettings
.ConversationList
no longer highlights the first conversation by default.photoUrl
is invalid.Session
when user synchronization is disabled.MessageField.setText
and MessageField.typeText
that would cause a crash when given certain strings.HTMLPanel
wouldn’t load.👋 Thoughts? Questions? Get in touch.
✨Follow TalkJS on 𝕏 and LinkedIn to stay up to date.
👩🏾💻We’re hiring! Check out our jobs page.
]]>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
.
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.
asGuest
prop to Chatbox
, Inbox
and Popup
, to enable users to join a conversation as a guest.ActionButton
params wouldn’t update when switching between conversations.HTTP 404 Not found
status, instead of an HTTP 200 OK
status.👋 Thoughts? Questions? Get in touch.
✨Follow TalkJS on 𝕏 and LinkedIn to stay up to date.
👩🏾💻We’re hiring! Check out our jobs page.
]]>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.
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.
team_chat
preset theme which caused the MessageField
layout to display incorrectly.MessageField
but not resize the MessageList
, with the result that the keyboard would cover both the MessageField
and the ReplyBar
.👋 Thoughts? Questions? Get in touch.
✨Follow TalkJS on 𝕏 and LinkedIn to stay up to date.
👩🏾💻We’re hiring! Check out our jobs page.
]]>Your TalkJS dashboard has just become more intuitive to use, to get you started seamlessly.
From the dashboard, you can:
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.
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.
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 configure APNs tokens from the Settings page of your TalkJS dashboard.
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.
/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.MessageField
theme component in the theme editor.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.onLeaveConversation
, onCustomMessageAction
, and onCustomConversationAction
props. These props replace the methods with the same names, which have been deprecated..select
on a UI now returns a promise that is resolved when a new conversation is selected.ConversationSelectedEvent.others
and SelectConversationEvent.others
. Instead, use ConversationSelectedEvent.participants
and SelectConversationEvent.participants
.off
method in both Chatbox
and ConversationList
.onLeaveConversation
, onCustomMessageAction
and onCustomConversationAction
methods. Instead, use the added props with the same names.👋 Thoughts? Questions? Get in touch.
✨Follow TalkJS on 𝕏 and LinkedIn to stay up to date.
👩🏾💻We’re hiring! Check out our jobs page.
]]>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.
Conversation.otherIds
would return the current user (me
) if that user was the only person in the conversation.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.
]]>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.
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.<fieldName>}}
.
Multi-line inputs are supported.
Read more on using app custom fields.
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.
ConversationData
in the JavaScript SDK.Reaction
object as a whole to the EmojiReactionButton
subcomponent in themes.InboxOptions.selected
. Instead, use Inbox.select
from the JavaScript SDK.👋 Thoughts? Questions? Get in touch.
✨ Follow TalkJS on 𝕏 and LinkedIn to stay up to date.
👩🏾💻 We’re hiring! Check out our jobs page.
]]>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.
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.
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 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.
src
attribute, which can be used to display image, audio, or video files that are not message attachments.@mentions
in the Default Dark theme.👋 Thoughts? Questions? Get in touch.
✨ Follow TalkJS on 𝕏 and LinkedIn to stay up to date.
👩🏾💻 We’re hiring! Check out our jobs page.
]]>You can now edit the data of any participant in a conversation directly from your TalkJS dashboard.
To edit a participant’s data, go to the Activity section of the dashboard. From the Conversation history section of the activity landing page, select a conversation that contains the participant whose details you would like to edit. A page with conversation details will open. Click on the name of the participant whose details you would like to edit to open their User details page.
User details page with the option to edit a conversation participant’s data
You can edit any participant detail apart from the ID
, which acts as a stable, unique identifier of the participant.
Image or video files now have improved thumbnail previews. Instead of cropping an image to fit, the preview thumbnail will resize to match the aspect ratio of the message attachment you sent.
Image previews automatically resize to fit the aspect ratio of the file you sent
If you have previously edited the MessageBody
component in your theme, you can follow the upgrade guide to add full support for improved attachment thumbnails.
*
, +
or -
at the start of a new line, and your unordered list will automatically be formatted with bullet points in the sent message..ts
, .tsv
, .tsa
, or .m2t
). When you upload an MPEG-TS file, a preview with player options will automatically appear.@mentions
would break when they contained markup.syncThemeForLocalDev
in the JS SDK. Instead of using this method, you can use custom themes, which give you full control over the HTML and CSS of chat messages.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.
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 dashboard button to export conversation data as .txt or .json files
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.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.leave
method to ConversationBuilder
in the React Native SDK, which removes the current user from the conversation.Chatbox
and the ConversationList
layouts in the React Native SDK.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.MessageField
on iOS for the React Native SDK.View
will be used in the empty areas around the TalkJS UI.conversation
property in SelectConversationEvent
from ConversationBuilder
to ConversationData
in the React Native SDK.For more information on the counter and how to enable it in existing themes, see our docs on Adding new features to existing themes.
The new team_chat
preset theme
There are now three new preset themes to go with our existing default
and group_chat
themes:
- team_chat
: see this in action in our Team Chat demo
- default_dark
: see our Marketplace demo
- livestream
: see our Livestream demo
The TalkJS JavaScript SDK now lets you pass data to your theme when you create a widget:
session.createChatBox({
theme: {
custom: {
productTitle: "Pink flip-flops",
accentColor: "#1A1ACF"
}
}
})
Variables you pass this way are also made available as CSS custom properties. So you could do something like this in your component's HTML and CSS:
<div class="productHeader">{{theme.custom.productTitle}}</div>
.productHeader {
background-color: var(--theme-accentColor)
}
Check out our documentation on passing data to themes to learn more.
The TalkJS default theme has a new look! You can customize TalkJS's UI to your heart's content, but we want the out-of-the-box experience to be top-notch as well. So we went through all of the components that make up the TalkJS interface, and where needed, gave them a facelift.
We want to make sure that we don't make unexpected changes to TalkJS that might affect your customer experience, so we've ensured that all existing themes are staying as they were. But if you're creating a new theme (or even a brand new project), you'll get this new look.
The keen-eyed among you may have spotted another new feature in the image above. A little "three dots" menu in the conversation header. This is a menu for conversation actions.
Just like with message actions, you can define which conversation actions a user has access to in the role editor. We currently have one built-in conversation action to leave a conversation, but you can define your own custom conversation actions too.
If you're using a theme based on the default preset, and you haven't made changes to the ChatHeader component, the conversation actions menu will show up for users who have available actions. If you did make changes, check the themes upgrade guide to learn how to add the menu to your theme.
You can now filter conversations in the conversation list of the inbox based on when the most recent message was sent, and the conversation's subject.
The graphic we use to represent a group chat is now themeable. By default, it shows two avatars of participants in the conversation and the total number of participants. You can completely change the way this component looks, but this also gives you more control over which users' avatars are shown.
We're always making changes under the hood to fix bugs and improve performance and reliability. But there have been some even more significant changes recently. There's been an overhaul of our backend architecture to better handle large loads. The way conversation list filters are handled internally has been redesigned to improve performance for users with a lot of conversations, especially in cases where the filter matches very old conversations. And lastly, we're moving more of our UI components to our template system in preparation to make them customizable via themes.
Just like UI themes, you can create and edit email themes within the theme editor of the TalkJS dashboard, using the same template language to define the markup and styling. For more information, check out our documentation.
You can now see a preview of changes to your theme, right as you're editing it!
You can even use a specific conversation or user to use when loading the preview.
loadingComponent
prop, for a component to be rendered while content is loading.@react-native-async-storage/async-storage
as a peer dependency. If you don't already depend on the package be sure install it by running: npm install @react-native-async-storage/async-storage
or yarn add @react-native-async-storage/async-storage
depending on your package managersendMessage
where a message would get sent multiple times in certain scenarios.captureKeyboardEvents
prop in Chatbox
not working.In our Flutter SDK, we've fixed several issues related to recording voice messages and uploading files. Upgrading to this version does require some small updates to your Podfile for IOS apps, and your Androidmanifest.xml for Android apps. Check out our Flutter SDK Changelog for more info.
As we announced in our previous changelog entry, you can now edit conversation details directly from the activity view of your TalkJS dashboard. We've been hard at work making this even easier to use.
at_least
and at_most
let you make sure that a number is at least or at most a certain value.remove_last
and replace_last
let you remove or replace the last occurrence of a some text.where
lets you filter an array of objects based on a single property.setPresence
({visible: false})
before a widget is mounted wouldn't work.After selecting a conversation from the activity viewer in the dashboard, you can now edit properties like its subject, photo, and welcome messages. If you want to get rid of the conversation completely, deleting all messages and removing it from the inbox's conversation list, you can do that too.
Contact Suppression
We've also given you much more control over what content is automatically suppressed in chats, and allowed you to specify the replacement text. So if you want to ban phone numbers but allow links, you can! If that's not enough, you can even specify your own patterns to be suppressed.
We're working on a lot more moderation tools, so here's a sneak preview of the features we're working on adding to the dashboard:
Is there anything we're missing that would help you moderate conversations? Get in touch and let us know! Leave a comment below, get in touch via our live chat, or email dev@talkjs.com
It has been 3 months since our last changelog, so read on to learn about everything else we've been working on behind the scenes. First a few smaller features and changes you might have noticed:
With your help, we tracked down and fixed a lot of little bugs, like:
And my favourite customer-reported bug: A kind Spanish user explained that the word Save should be translated to Guardar and not SaveGuardarThe 😂
However, our main focus since last time has been on improving the performance and stability of our servers. It's all a bit too technical to discuss here, but keep an eye out on our blog for posts taking a technical deep-dive into the improvements.
The important part is that our servers run faster, return less errors, and experience less downtime. We're not done yet, but we're confident that your TalkJS experience will be better than ever.
We're excited to be working on more user-visible features again, and hope you're excited too! Please do get in touch and let us know what you want to see in TalkJS this year, because everything we do is driven by your feedback!
]]>Sometimes, it's quicker to say something than to type out a long message. At other times, you really want to make sure your tone and emotion comes across right, which isn't always easy with text. That's where voice messages shine, and your users can now send them with TalkJS.
You can enable them in the role editor of your TalkJS dashboard. Note that this only changes whether someone can send voice messages. Receiving voice messages works for any user, regardless of their role.
If you've edited the default theme, you may need to make some changes for voice messages to show up nicely. To see the changes we recommend, take a look at our themes upgrade guide.
You can enable whether status indicators are visible to users via the role editor.
If you've created/edited a theme before September 28th 2022, you may need to make some changes to your theme's ChatHeader component to make these status indicators show up.
Our Rest API now has a better endpoint to find out which users are currently online. It lets you filter based on whether the just have an active session, or have an actual chat UI open, and even which conversation they're looking at. Learn more in our documentation
forloop
object, which you can use to get information about the current loop iteration. Emoji reactions let you quickly show excitement, laughter, gratitude and much more, without it needing to be a separate message. This is especially useful if a large number of people are reacting to a message, because you see everyone's reactions at a single glance, and it doesn't clutter up the conversation.
You can enable emoji on a per-role basis via the TalkJS dashboard. If you have an existing theme, you may need to make changes to have the reactions show up. Check out this guide on updating your theme.
You can now play audio attachments right inside the chat! It works right out of the box, but there's a small tweak you may want to make to existing themes to adjust the height.
Every project within TalkJS comes with a test, and a live environment, but there are cases where you may want an extra environment. Maybe for testing, or experimenting with new features, without messing with your existing project. From the "project settings" page of the dashboard, you can now clone your project's test or live environment into a new project.
Just like for the other builtin message actions like "edit" and "delete", you can configure which roles are allowed to reply to a message. Newly created roles will have such a setting enabled by default. Currently used roles will have this feature disabled, so if you're using TalkJS in production right now, head to the dashboard to enable replies!
All REST API endpoints that return Message objects in the response now contain a referencedMessageId
field which refers to the message referred to by a reply. Message related webhook events (message.sent
, message.updated
etc) now contain this field too.
Just like with deleting messages, you can configure which roles are allowed to edit messages. You can even allow users to edit all messages in a conversation, which can be useful for moderation. All new roles will allow users to edit their own messages by default. Existing roles have this permission turned off so that nothing changes without you enabling it.
As you can see in the animation above, once a message has been edited, it is labelled with "(edited)" in the chat. If you haven't made any changes to the UserMessage and MessageBody components in the theme you're using, this will work out of the box. If you did make changes there, you can learn how to add the edit indicator in our documentation on message actions.
We've added an editedAt
field to messages returned by the API. When a message is first created, this field is null
. When the user edits a message it'll be set to the timestamp of the most recent edit.
When updating a message via the REST API, you can now pass a markEdited
field (defaulting to false
). When set to true
, the message's editedAt
field will be updated to the time of the update, and in our default theme, the message will show up with "(edited)".
notify
field on Participant. It is now of type ParticipantNotification
, an enum with the supported notification settings.We're constantly improving performance and fixing issues under the hood. Here's an overview of just some o the issues we've fixed recently.
With the addition of mentions also comes a new option for notifications. When adding/updating a participant to a conversation, you can now set the "notify" option to "MentionsOnly" to only be notified when someone mentions the user. You can learn more about the different notification settings in our documentation on participants.
Note that both methods still open the confirmation dialog, so the user can confirm or cancel sending the message.
React Native SDK TalkJS for React Native v0.4.0
With this release, we have updated the SDK's dependencies and peer dependencies to keep them up to date and also fix bugs in some of them. As of npm v7, peer dependencies are installed by default so upgrading the TalkJS SDK should also upgrade the peer dependencies accordingly. For yarn users, you may have to update the packages individually as shown:
yarn upgrade @notifee/react-native@^5.3.0 @react-native-community/push-notification-ios@^1.10.1 @react-native-firebase/app@^14.11.0 @react-native-firebase/messaging@^14.11.0 react-native-webview@^11.21.2
These libraries are defined as peer dependencies rather than dependencies since they contain native code and currently, React Native does not auto link transitive dependencies.
The new version of the notifee library also eliminates the need to add the local maven repository manually to your project. You can remove the section below. (Your app will still build and run if you don't remove it)
maven {
url "$rootDir/../node_modules/@notifee/react-native/android/libs"
}
Push notifications are a critical part of what we offer and we are very excited to make it available on our Flutter SDK. Similar to our React Native SDK, we have abstracted registering of the device token among other things to make adding push notifications a fairly straightforward thing. You can check out our documentation for a step by step guide on what you'll need to do to setup push notifications on Android and iOS through Firebase and Apple Push Notification service respectively.
We are continuously working on improving our push notification implementation to make sure we properly cater to our users needs. Feel free to reach out to us with your suggestions and feature requests.
improvement File Upload on Android
Due to the nature of the WebView implementation on Android and limitations of the Flutter equivalent, we had initially shipped the Flutter SDK without support for file uploads on Android. At the time of writing, various factors prevent the maintainers of the Flutter Webview plugin from shipping this feature. We believe file upload is a core component of TalkJS and so we forked the plugin and added it to cater to our Flutter SDK.
Other than your users on Android being able to upload files, there's nothing to be done from your end. Remember, you can always enable or disable file attachment for a specific role through the dashboard.
]]>For most websites, the preview will show the title and a description of the page, but for media sites like YouTube, we'll embed the media right inside the message.
If you haven't made any changes to the UserMessage or SystemMessage component of the theme you use in TalkJS, they should start working automatically. If you did already change these templates, head over to our docs to learn how to add link previews to your theme.
The Flutter SDK also has some new goodies in store:
For a long time now, TalkJS has let you use your own domain for sending emails, and handling email replies, but up until recently, this required contacting support. Now, you can easily do this yourself.
To add a custom email domain, click the account menu in the top right of the TalkJS dashboard, then click "Email domains". After adding the domain, click "details". You'll see some instructions on how to set up the necessary DNS records. Lastly, you'll want to go to the Settings page of your dashboard, and under Email Domain, select the domain you just added.
We've fixed several bugs since our last changelog entry, including:
We added the ability to add custom actions to the message menu. This lets you build features like reporting, favouriting or quoting messages. When a user selects a custom message action, an event is triggered in the JavaScript SDK. Check out our documentation on message actions for more info.
New event handlers in the JS SDK
The TalkJS JavaScript SDK emits events in many situations, so you can react to things that happen within our systems or in the chat UI. For instance, we fire an event when a conversation is selected in the inbox. The code to listen for such an event used to look like this:
inbox.on("conversationSelected", function(event) { console.log(event); });
This style of event handlers is now deprecated. Instead, you can now this:
inbox.onConversationSelected(function(event) { console.log(event); });
These new event methods return a Subscription object that you can use to unsubscribe from events. This replaces the "off()" methods, which are now deprecated too. We never want to break existing code, so even though they're deprecated, the old methods will always continue to work.
For a full list of deprecated methods and their alternatives, see the deprecated methods sections on Session and its associated Unreads object, Chatbox, Popup and Inbox.
]]>To properly support users of Expo's Managed Workflow, we have released a new package: @talkjs/expo. This package is identical to @talkjs/react-native except it has push notifications disabled. This is because the push notification libraries used have native code which make them incompatible with the Managed Workflow.
If you need push notifications, you can send them from your own backend using our webhooks or you can use @talkjs/react-native and create a development build for your project using EAS Build or eject to the bare workflow.
The versioning for this new package will be identical to @talkjs/react-native
We have changed the libraries we use for push notifications which has allowed us to greatly improve notifications, particularly on Android. Notifications are now shown as Conversations and grouped accordingly. Applies only to devices running Android 7.0 (API level 24) and up.
Images sent will also appear in the notifications. (Android only).
The function, registerPushNotificationHandlers
, now allows for more configuration options when creating Android's Notification Channels. It also supports providing iOS notification related permissions you want your app to have.
As part of these changes you'll need to update your android/build.gradle
file by adding the following block to the repositories
section of allprojects
:
maven { url "$rootDir/../node_modules/@notifee/react-native/android/libs" }
It should now be clearer what is wrong with your code. Should you encounter a scenario where an error has occurred but React Native's Logbox doesn't show, notify us via our livesupport.
asGuest
prop in Chatbox
.captureKeyboardEvents
and onKeyup
props.getText
and typeText
to MessageField.oneOnOneId
to also accept User
Objects.showFeedHeader
default to false
.feedConversationTitleMode
, thirdParties
, onBlur
and onFocus
.chatSubtitleMode
, chatTitleMode
, thirdParties
, translateConversations
, onBlur
and onFocus
.Want to add chat functionality to your Flutter app? We made that a lot easier with the TalkJS Flutter SDK. To get started with it, check out our docs. With the release of this new SDK, we're expanding our support for mobile app platforms. We released an SDK for React Native last year, and we've always supported embedding TalkJS in a WebView in Ionic and native mobile applications.
Invite your team to the TalkJS dashboard
It used to be that one TalkJS account was linked to one TalkJS instance with a test and live environment. We've heard from many customers that they'd like to give members of their team access to the TalkJS dashboard, without needing to share login details. Now you can!
If you open the account menu in the top right of the dashboard, you'll see some new items. The first set of menu items is related to your project, which is what we call these TalkJS instances now. Each project still has a test environment and a live environment. Billing settings are also saved on a per-project bases.
If you click Manage members, you'll be able to invite your team members to your project. We've also created a set of roles that can limit which sections of the dashboard they can access.
On that same page you'll be able to see and manage current project members and pending invitations.
An account can be associated with multiple projects now too. So if you'd like to make another project to have an extra separate environment for staging or testing, or you work in an agency where you use TalkJS with multiple clients, you can create new projects under the same account.
Bug Fixes:
For now, "Delete message" is the only action in there, but watch this space for more to come.
If you've customised your theme, you'll need to modify the UserMessage or MessageBody component to add the MessageActionMenu component to it. The code for it should look something like this:
<ActionMenu class="action-menu"> <Icon type="horizontalDots" /> </ActionMenu>
Feel free to reach out to customer support if you need help setting it up.
If there are no actions that the current user has permission to perform on a message, then the menu won't show up at all there. Speaking of permissions...
🎄Happy holidays from the TalkJS team!
]]>New message field in 2 flavours
Emoji picker
Emoji auto-suggest
And more:
- File attachment confirmation dialog
- Better accessibility
- Better keyboard navigation
Read more on our blog.
New We have some exciting news! We have shipped a React Native SDK 😄.
Prior to this release, getting TalkJS running in React Native applications required developers to perform multiple tasks like creating an HTML file for the webview, passing parameters from the app to the JavaScript running in the webview and sometimes even adding handlers so the code in the webview could call back to the app.
With the React Native SDK you can get TalkJS running in your React Native application with a few lines of code:
<TalkRn.Session appId='YOUR_APP_ID' me={me}> <TalkRn.Chatbox conversationBuilder={conversationBuilder} /> </TalkRn.Session>
The new SDK makes it easier to use TalkJS in React Native applications by providing React Native Components that will feel natural to anyone using React Native.
Developers will now write significantly less code, save time and also make their code less error-prone. Additionally by using the SDK developers are guaranteed of backwards compatibility, meaning their code will always run even as TalkJS evolves.
So go ahead and check out our React Native Getting Started Guide.
We can't wait to see the cool stuff you are building!
]]>
Conversation List Item component: Theme your inbox list items with the new component.
Idempotency keys: Ensure exactly-once delivery of messages - Read more.
Webhooks: message.deleted
added to the webhooks list in the dashboard.
API: Fully delete participants when leaving a conversation - Read more.
Push notification tester: You can now test your push notifications via the dashboard UI.
Android Push Notifications: Priority changed to high, which helps apps that aren't running in the background.
Emojis 😲: Updated to include newer emojis.
Dashboard Settings: Improved layout to give saving settings more visible.
Improved UX for autoscrolling new messages.
Security and performance improvements.
System messages suppressed in emails: Fixed a bug where system messages containing contact information were incorrectly being suppressed.
]]>Themeable inbox conversation list header component, allowing more customization on your chat's UI.
Triggering of on("conversationSelected") was being called inconsistently.
]]>chat.yourcompany.com
). This way, no network requests go to talkjs.com at all. (Enterprise plan only - get in touch if you're interested).Improved:
Fixed:
showChatHeader: false
was ignored in some cases, making it impossible to hide the header.Fixed: Issue with headers not expanding when the Panel style has higher padding than the default.
Fixed: Issue where the inbox would show no conversations when a feed filter was applied, even when there were conversations that match the filter.
Several other bug fixes.
]]>Added: New themeable component, No Chats view - customize the messaging and layout of the view when there aren't any chats with the new HTML & CSS template.
Added: Autofocus the message field on desktop devices, new option to toggle this behaviour with messageField.autofocus
.
Fixed: When a user has been removed from a conversation, it will no longer be reported as unread when new messages come in.
]]>createdAt
and lastActivity
via the API when using the API version 2021-02-09.Added: New pricing model for customers signed up after March 24 2021. If you have signed up before this, then you can remain on the pricing plan you signed up with. View new pricing.
Added: New SDK event for when a user clicks on a desktop notification generated by TalkJS. Docs.
Fix: Link colors in email notifications now inherit their text color.
]]>Fix: The 'Show more messages' action in the message list now has an inherited color to fit in with the active theme.
Performance optimizations.
]]>Added: Themes sub-component boilerplate - it's now easier to add sub-components to your themes, with a boilerplate template for each new file created.
Fixed: Issue that would cause resetting app data to not work correctly.
Several bug fixes.
]]>Added: Live Event Log - Get a clear view of what's going on inside TalkJS in realtime. Did my REST call not arrive at all, or am I looking at the wrong user's Inbox?
Added: Saving indicator whilst editing themes.
Improved: Dashboard navigation redesign which includes a clearer way to see if you're on Test or Live mode.
Several bug fixes.
]]>Note – Your old themes will continue to work with the new upgrade.
]]>It is now possible to toggle which webhook events you want to subscribe to, allowing you to only listen for events that are useful to your use case.
]]>
If you use Themes, both features will automatically adjust to your existing settings. The dot uses your "highlight" color, so it will automatically fit your design. Similarly, the marker for new messages uses the same style as day markers.
]]>This is a setting for each role in our dashboard. In order to enable it, you need to choose “Enabled” option.
null
), or with the latest conversation (undefined
). See select, session.createInbox, session.createChatbox and session.createPopup.font-size
property of the message field in your custom themeAdded: methods to get UIs, namely getPopups, getInboxes and getChatboxes (https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/Session.html#Session.getInboxes)
(edited)Even though we work on TalkJS all the time, sometimes it may seem that not much is happening. This changelog is here to improve that very important part of the communication between you and us.
Going forward all the things we change will now be centralized here on our changelog. You can also subscribe to receive updates right to your inbox.
]]>