TalkJS as an Alternative to Chatkit

You have probably heard the news that Pusher is shutting down Chatkit on April 23rd. Leaving their customers with only 30 days to migrate to a new chat API. If you’re already searching for an alternative to Chatkit, be sure to try out TalkJS. It’s an out-of-the-box, full-featured chat you can add to your website or mobile app. It comes with ready-made UI and works with any language or framework.

If you need help with the migration, contact us at [email protected] to get support from our developers. They will make sure you have a smooth transition from Chatkit to TalkJS.

Table of contents:

  • Pusher Chatkit Migration
  • Creating the new chat UI
  • Feature comparison
  • Try us out

Pusher Chatkit migration

  1. Create a TalkJS account
  2. Follow the Getting Started guide to build & test your chat feature (note: with TalkJS the entire chat UI is included to help developers deploy faster)
  3. Export your ChatKit data from the ChatKit Dashboard
  4. Import all relevant data to TalkJS.

Creating the new chat UI

Chatkit customers have built their own chat UI from scratch on top of the Chatkit backend-as-a-service. One concern is that by migrating, you may need to build a chat UI from scratch all over again, or modify what you already have. This can end up being a lot of work with almost any chat SDK. Some providers do offer UI elements and components, but it also takes time to put all the pieces together.

On the other hand, TalkJS includes a ready-made theme that you can customize and then easily embed into your site or app.

Thanks to @ProductHunt I came across @TalkJS. It’s rather easy to use and comes with built-in customizable ui components. Took 1week to find it and 10 mins to set it up. 🤟”

—— @kharioki, on Twitter

A theme is a CSS file that allows you to tune the look and feel of the chat UI. The core UI layout stays the same, but you can make it fit the website or app design. With just a few lines of CSS, you can change the default UI (on the left) to look any way you like.

Why TalkJS chat UI will do the job

It’s fast

TalkJS loads fast and runs fast on all devices, including the slow ones.

“I really love how TalkJS works and the speed is amazing (initialising chats, sending messages, response from webhook). Keep up the good work and please keep me updated about the upcoming features!”

—— Jasper, RogerRoger

Has all the little features

  • read indicator,
  • typing indicator,
  • online status,
  • colored author names,
  • file & location sharing,
  • image previews,
  • and more

Forward compatible

New features often mean new UI elements. With TalkJS, that’s something you don’t have to worry about. The chat will keep working on future devices, new features, or future browser bugs.

Feature comparison

TalkJS supports the same features as Chatkit, as well as some advanced ones like real-time translation, ready-made theme, on-premises installation, and email-chat sync.

chatkit alternative

Try us out

The TalkJS chat API + SDK allows developers to easily add chat between users on your platform in hours instead of months. Most of the TalkJS code will live in the frontend, which means that it will work seamlessly with any language or framework. This includes JQuery, PHP, Laravel, Ruby on Rails, Python, Django, ASP.NET MVC, .NET, Java, NodeJS, and so on.

Ready to start coding? TalkJS is free for development and testing. You’ll have plenty of time to customize and integrate your chat. You pay when you decide to go live. Try it out!

Announcing Search in Conversations

One of our most requested features was the ability to search within a conversation. We’re excited to announce this feature is now live and enables our users to easily search their conversation history.

In this article you’ll learn:

  • How the search feature works
  • What plans it’s available on
  • How to enable it
talkjs chat search feature

You can find the search feature in the upper right corner of the chat UI – it works in all UI modes (inbox, chatbox & popup). To see how it works, you should try out the TalkJS demo. Just note that the search feature is available in a single conversation.

The feature is available by default on Premium and Enterprise plans.

To enable it, all you need to do is upgrade to the latest NPM package (0.14 or higher). Other than that, you won’t have to make any changes to the code. If you don’t use NPM, you should get in touch with our developer support, and we’ll tell you what changes to make.

How The Next Closet drastically reduced customer service load using chat by TalkJS

We recently sat down with Sarah Bleiker, product manager at The Next Closet (thenextcloset.com) to discuss how TalkJS has been working for them in powering buyer seller chat on their marketplace website and apps.

The Next Close is a fast-growing startup from The Netherlands, providing the sustainable marketplace for second hand designer fashion. The Next Closet’s mission is to change the textile industry by inspiring people to invest in quality and reuse what they already have.



Hi Sarah, what’s your background and current position within the company?
I am the Product Manager at The Next Closet with a background in Innovation & Entrepreneurship. Over the past years, I was working on improving as well as building from scratch new digital products, mainly focused on native apps and websites.

What Problem Were You Trying to Solve?
We are an online marketplace for second-hand designer fashion, meaning that every item is unique, only available in a certain size and most likely worn before. Even if our sellers are stating this information, potential buyers might want to know in more detail why a condition of an item has ‘signs of wear and tear’ or if the items fit rather loose/ tight, etc. 

Also after the purchase, some buyers were calling The Next Closet to ask when their item will arrive. As the shipping is handled directly by the seller too, we are able to track the shipment but we cannot anticipate the time the seller will bring the package to the post office.

How Was The Problem Affecting You?
Potential buyers were calling The Next Closet directly to ask all these questions, and since the item is owned by the seller and we do not own the stock, we were not able to immediately answer those questions but had to contact the seller and then go back to the buyer – which required a lot of time from all parties involved.

What Possible Solutions Did You Consider?
We were looking into a chat solution where the buyer is able to directly communicate with the seller to ask those product related questions and get more confidence to proceed with the purchase. We were also looking into a public chat first, however, to create more of a marketplace feeling – we decided to go for a private chat solution.


Why Did You Choose TalkJS?
TalkJS offered what we were looking for, a simple interface that allows our users to communicate with each other through all our channels; web, mobile and app. It was relatively easy to integrate and it’s customizable so it fits our branding.

What Would Have Happened If You Had Not Made The Purchase?
We had our own basic solution built, which needed to be enhanced. By having TalkJS, it was possible to take that load from our development team and made us move faster towards the solution we were wanting to go.

What Risks Did You Consider?
We are letting our users chat directly with each other without the involvement of The Next Closet. This requires trust to our users that it will be used correctly to answer the questions they have and nothing else.

What Reservations Did You Have?
Our sellers are in control of their own items and are in charge of selling it, we are supporting them in the best possible way by showing it to the right users that are interested in buying this second-hand treasure. One reservation we had was, as mentioned before, that this functionality might help our users to close deals secretly and end up selling items outside our platform directly to the buyers instead of with us. 

Sarah Bleiker. Product manager at TNC.

What Measurable Benefits Have You Seen?
The load on our customer service to answer all those questions reduced drastically since we started a collaboration with TalkJS and usually the moment these ‘last’ questions regarding the product are answered the purchase is placed – which of course increased our conversion rate.

Another positive effect was our customer happiness, creating this marketplace feeling and letting our buyers and sellers directly communicate with each other increased our net promoter score.

Thanks so much for sitting down with us Sarah!

Announcing: The TalkJS Premium plan

While a lot of our customers love using TalkJS for the pre-built chat user-interfaces that we provide, we understand that many people want more control over the look and feel of their chat solution. We are continuously looking for new and improved ways to allow you to customize TalkJS while still providing you with significant time and cost savings compared to developing your own chat solution in-house (and all the complexities that comes with it!).

We recently released the Premium plan which expands on the features currently offered as part of the Standard plan. With the new premium plan you can now create your own custom HTML and CSS email notification templates, and for the ability to send them from your own domain name instead. The new premium plan also offers priority road-map access.

An example custom HTML and CSS styled email notification

 

With the release of the Premium plan we also released the ability to pay annually instead of monthly, allowing you to save up to 15%! New customers can subscribe to an annual plan right away, whereas existing customers can contact us to swap to an annual plan.

Customizing the Chatbox UI: Adding a custom header

Default header vs custom header

It’s been a while since we added a feature to allow customers to add that extra bit of flexibility to their TalkJS chat user interfaces (UIs), through TalkJS themes. Since then, we’ve been trying to increase the customizability of the UIs while also sticking true to our mission – providing you with a full-featured messaging experience to add to your platform, with as little configuration as possible.

TalkJS easily lets you customize (or omit entirely) the chat headers that TalkJS provides out the box. This opens up the possibility to create a completely new header element for your Chatbox UIs and include custom content in them such as product/order information, additional user information or something different altogether.

Removing the default header

To remove the default Chatbox header, simply create a Chatbox as you normally would do, but also pass in the optional chatboxOptions object and set showChatHeader to false as shown below.

var chatbox = talkSession.createChatbox(conversation, {
    // Don't use the default header provided by TalkJS
    showChatHeader: false,
});

 

Creating a custom header

To create a custom header start by moving the div where TalkJS is mounted to inside a new container div which we’ll call chatbox-container. This div will be responsible for holding the custom header and the conversation UI. Next, add another div which we’ll call chatbox-header to be used for our custom header, as shown in the example below.
<!-- Container element for all TalkJS UI elements -->
<div class="chatbox-container">

    <!-- Custom TalkJS chat header -->
    <div class="chatbox-header">

    </div>

    <!-- container element in which TalkJS will display a chat UI -->
    <div id="talkjs-container" style="height: 500px"><i>Loading chat...</i></div>

</div>

 

Next, we’ll add some basic CSS so that child elements in the chatbox-container are centered horizontally and scale their width similar to how the default Chabox .

<style>
.chat-container {
    width: 420px;
    max-width: 100%; 
    margin: auto;
}
</style>

 

Now that a width has been set for the container, we can customize the header with our own styles. In this example we’ll keep things simple – make the chatbox-header a light grey color, 75px high and have cornered top edges. We’ll also add a small negative margin on the bottom so that the chatbox-header overlaps slightly with the conversation UI.

<style>
.chatbox-header {
    width: 100%;
    height: 110px;
    background-color: #000;
    border-radius: 10px 10px 0 0;
}
</style>

 

The Chatbox UI should now look like the following:
custom-header

 

And just like that the Chatbox UI now has a custom header which can be styled to your specification, and allows for additional functionality to be easily added to the header, such as adding a checkbox to toggle desktop notifications as shown below.

Adding additional functionality – Adding a desktop notifications toggle

In our newly created custom header, we’ll add a new div which will hold a checkbox to allow user’s to toggle desktop notifications.

<div class="chatbox-header">

    <!-- create a new div that will hold the checkbox -->
    <div class="toggle">
        <input type="checkbox" name="notificationToggle" class="toggle-checkbox" id="toggle">
        <label class="toggle-label" for="toggle"></label>
    </div>

</div>

Now that checkbox has been created in our custom chatbox-header, we’ll add the ability to toggle desktop notifications for the user when a checkbox is clicked. For this example, we’ll assume that desktop notifications are disabled by default. If the user changes the setting we will store their choice in localStorage so that subsequent page loads remember the user’s choice.

 

// Get the desktop Notifications checkbox element
var checkbox = document.getElementById('toggle');
// See if the notification preference has been previously set, otherwise set them as disabled
var notificationsEnabled = localStorage.getItem('desktopNotifications') || 'false';

// Set the checkbox's state to the value stored in the storage, or false (unchecked) 
// if notifications have not been eneabled previously
notificationsEnabled === 'true' ? checkbox.checked = true : checkbox.checked = false

checkbox.addEventListener('click', function() {

    // When the checkbox is clicked, get the current notification state
    var currentlyEnabled = localStorage.getItem('desktopNotifications') || 'false';

    // If they aren't enabled, enable them when the checkbox is clicked
    if (currentlyEnabled === "false") {
        localStorage.setItem('desktopNotifications', 'true');
        checkbox.checked = true;
        chatbox.toggleDesktopNotifications(true);

    // If they are enabled, disable them when the checkbox is clicked
    } else {
        localStorage.setItem('desktopNotifications', 'false');
        checkbox.checked = false;
        chatbox.toggleDesktopNotifications(false);
    }
})

 

You can read about the ability to toggle Desktop notifications in the JS SDK documentation. As an exercise for you – try customizing the checkbox to create a more traditional ‘toggle’ button similar to the one shown below, or see the code for completed custom header (as seen below) on jsfiddle or by copying the code directly from the Github gist.

Complete custom header example

 

Wrapping up

This guide highlights just one example of creating a custom header with additional functionality, how you style the header and the functionality that you add to it is completely up to you. If you want to customize the conversation UI in addition to the header, you can read how to do this by viewing the blog post or documentation on themes. As always, do get in touch with us through live chat or send us an email if you need help with anything TalkJS related!

TalkJS Changeblog: SDK error messages

At TalkJS we think that a good developer experience is one of the most important features of a well designed SDK/API. If you see a cryptic and unintelligible error message, then that’s making it unnecessarily hard to get TalkJS working. Therefore we worked on improving the error messages for a number of common scenarios in the last few weeks.

If you make a mistake while trying to integrate TalkJS, we’ll inform you about that in your browser’s Developer Tools. Our goal is to not just inform you what went wrong, but also how to fix it.

 

TalkJS Changeblog: Formatted Links for Messages and other improvements

👋Over the last years we’ve been working hard on improving TalkJS, but we never communicated all changes all too loudly. We decided that this has to change, so without further ado, here’s the first installment of our Changeblog.

1. Formatted Links for User Messages.

It’s now possible to send a message that can contain a link. It’s useful when you want to link to your customers’ products. This is what it looks like:

In order to create a formatted message you need to perform the HTTP request to TalkJS REST API.

POST https://api.talkjs.com/v1/{appId}/conversations/participants={userIds};topic={topicId}/messages
[  
  {
    "text": "Hey Bob! You can find our new product on <https://yourwebsite.com/49271|our website>.",
    "sender": "u_947271",
    "type": "UserMessage"
  }
]

Sending formatted messages from the TalkJS UI is not possible yet. You can read more about Formatted Links in our docs.

2. Extending the macros available in Email and SMS notifications

It’s possible now to use {{ conversation.id }} in the Email or SMS templates. You can reuse the id in multiple ways, e.g. in the url that redirects you back to your website.

As always, please feel free to reach out in case of any questions or new feature requests!

Add in-app chat to your web app or marketplace with TalkJS

A while back, I sat down with Kevin William David of Siftery for an interview about why we’re building TalkJS.

TalkJS is integrated messaging for every web and mobile product. Add user-to-user chat to your web app or add buyer-seller messaging to your online marketplace or social platform. You’ll have it up and running in 10 minutes.

Kevin William David interviewed Joshua Schoenaker, Founder of TalkJS to learn more.

Can you tell us about what you are working on? What is TalkJS?

TalkJS is user-to-user chat functionality for your web app, marketplace or social platform. Turn any <div>into a 2-way chat box. No need to reinvent the wheel. You’ll have it up and running in 10 minutes. It’s similar to the chat features Airbnb provides for communication between hosts and customers.

Why are you building this? What problem are you trying to solve?

We were originally working on a messaging product for a different market, when a couple of marketplace-type companies asked us the same question: can we use your messaging solution for buyer-seller chat? So, then we asked around, and 7 out of 10 marketplaces we asked, were experiencing the same problem for which they hadn’t found a proper solution yet.

Online platforms, marketplaces and other apps are rushing to add realtime user-to-user messaging to their sites. Users expect communication to be fast and direct, platform owners need it to happen on their platform and not elsewhere. This is cost intensive to get right, and so far only the largest platforms succeed (e.g. AirBnB, Booking.com, Upwork all released realtime messaging in the last 12 months).

Who are your top competitors & how is TalkJS different from what’s already exists in the market? What’s unique about what you are building & why do you think companies should use TalkJS?

Other messaging infrastructure products (e.g. SendbirdLayerTwilio Programmable Chat) only supply backend infrastructure with some UI building blocks. TalkJS is the only mature option in this space that provides a fully-featured, polished, embeddable user interface with a simple but powerful API and integrated email/sms/push fallback.

Who uses TalkJS? Can you tell us a bit about the different customer segments using TalkJS? What types of roles do your customers have at their companies ?

TalkJS works great for any web app where 2+ users touch: online marketplaces, social platforms, online communities, collaboration tools, (serious) games, and so on. Current customers include companies like designer homeware site Crowdyhouse and a Dutch site for connecting people with particular skill sets Skillseeker.

First and foremost, TalkJS is focused on the users of our customers’ products. Other than that it’s mostly the product managers, CEOs and developers who interact with TalkJS. We’re proud of how easy TalkJS is to integrate and our dashboard gives the CEOs and product managers deep insights into how their users behave on their platform.

How are your customers using TalkJS? Could you share a few different use cases?

TalkJS is being used both before a sale on marketplace sites, to ask pre-sales questions, and after, to deliver customer support. In general we hear from our customers that direct contact between their sellers and buyers increases trust, convenience, and retention.

Have there been unique use cases for TalkJS that you hadn’t thought of or expected?

We recently signed up a customer who is using TalkJS for connecting people with psychic Tarot card readers to predict their futures.

Were there any early ‘growth hacks’ or tactics that have contributed to your current success?

Because we’re essentially a developer tool, the most important thing for us is that developers and entrepreneurs both enjoy working with our product and see enough value to justify a purchase. That creates word-of-mouth which still is the most valuable marketing tool for a product like ours. Next to that, being featured on places where these folks hang out like Product Hunt and Hackernews drives significant traffic.

The other thing we’re starting to invest more and more in, is content marketing. In our case this means blogging about how to best apply our product, what kind of use cases you can cover with TalkJS, and how to technically implement the product in different platforms, programming languages and so forth. This will pay off in the long tail, but we’re already seeing the beginning of this now.

What were some of the biggest challenges while building the product early on and how did you solve them?

One big challenge was to make sure the product works reliably on virtually all devices, screen resolutions, browsers, and internet connections. Luckily, we’ve been building our messaging platform for a year prior to discovering this market, so the technology had been proven to send millions of messages in all kind of situations and all the bugs and quirks have been ironed out already.

What have been some of the most interesting integrations you’ve added? Are there any that have been particularly impactful for you?

Currently we only ‘integrate’ with email, for sending notifications when either side is not logged on to our customer’s platform at that time. It’s a full integration in that replies to these emails end up back inside the chat. We’re getting some requests for integrating with Zendesk as well as other existing messaging apps, and we’re currently exploring whether that will make sense for more of our customers.

What are the top products that you depend to run the company & how do you use them?

We rely heavily on Slack for internal communication, especially since we’re half-remote. We use Screenhero which you cannot download anymore since they got acquired by Slack, but is still better than Slack’s baked in calling feature. We love TrackJS and Papertrail for error monitoring. We use a customized Redash dashboard for real-time reporting. Dropbox Paper for all text-related stuff, which beats Google Docs for us because it forces us to focus on the content.

You can read the original article here: https://siftery.com/stories/add-user-to-user-chat-to-your-web-app-or-marketplace-with-talkjs

Thanks for reading!

Announcing Group Messaging

Make your platform more collaborative

It’s that time again, we have a new feature! TalkJS is an integrated and a real time messaging service for online marketplaces, web apps or social platforms.

We built a messaging service for private one-on-one chats, when we started getting requests from our customers to be able to add more people to a conversation. We listened to our customers and are happy to announce we are launching a new feature called Group Messaging!

Get multiple parties involved in a single discussion

As of today TalkJS allows you, online marketplaces, to add more than two users into one single conversation. This also means that you can now be a part of the conversation.

Group messaging lets your users send messages, pictures, videos, and files to other participants. Your users can keep track of their messages and whenever they leave the platform your users will always know what’s going on through our SMS or email fall-back.

Use case: act as an intermediary

One popular use case is when employees of an online marketplace, which allows users to talk to each other, wish to be part of the conversation. To be a form of an intermediary or have an active presence in the chat.

So imagine, if you will, there is an online marketplace that hosts suppliers for events, which supply tables, lights, catering, and so on. Now through this online marketplace the supplier of tables or catering and the customer can discuss the details of the event.

Additionally, if the buyer has questions about payment, shipping or delivery, which the online marketplace sometimes handles, it might be necessary for a representative of the online marketplace to be present in this conversation. Can you picture it? The buyer, the seller, and the marketplace are all present in this group message, which allows everything to be arranged at once — in one conversation.


We are sure there are many different ways to use Group Messaging that we haven’t thought of yet. We can’t wait to see what you come up with!

Reach out to us here or dive right into the developer documentation!

Get started today!

How adding direct buyer-seller chat saved Crowdyhouse 30% support time

Crowdyhouse is Europe’s leading marketplace for self-producing designers to sell their collections. By removing the obstacles between designers and design fans worldwide they’re creating a trusted, transparent, and efficient marketplace to buy and sell beautiful products.

 

The mission of Crowdyhouse

Crowdyhouse is on a mission to give independent professional designers the exposure they deserve and bring affordable design products into the homes of many. “We want to get rid of all the friction to help artists design and sell products directly.” — Mark Studholme, CEO. Recently, the ambitious founders took another step towards that goal by integrating TalkJS for the direct buyer-seller chat.

 

Crowdyhouse founders Suzan Claesen & Mark Studholme

Enhancing transparency through buyer-seller chat

At first, people on the platform were not able to get in touch with designers directly. At least it felt like they couldn’t, since the contact option was based on a cumbersome email communication and too limited in its features.

Mark thinks it is important for online marketplaces to be transparent, and the fact that buyers know they can communicate directly with sellers– and vice versa– stimulates that. The platform’s developers once built their own communication service, which was working, but was not fast and quite limited. “On our new platform we wanted to offer our users the chance to chat with each other in the same convenient way they are used to in Whatsapp or FB Messenger. So we were looking for solutions like this.”

TalkJS integration
That’s when we reconnected in the Rockstart Alumni Slack channel, and decided it made sense to swiftly integrate TalkJS before launching the new crowdyhouse.com.

Right after a customer makes a purchase they get the opportunity to ask questions and give feedback to the designer. Likewise, the designer can ask the customer about what she liked about it the product, the experience and if anything could be improved. Naturally, this makes for a more personal experience between buyer and seller, which benefits repeat purchases and retention in general.

Save 30% on repetitive customer support tasks

After their move to implement a buyer-seller chat, Crowdyhouse were surprised by the time-saving impact it had. Mark: “We now have much more extra time to put into our core business. We saved lots of time and money by outsourcing it, and now we found it saves us even more than expected in customer support. At least 30% extra time.”

“We’re saving 1,5 days a week of customer support work since adding TalkJS’ direct user-to-user messaging”

The buyer-seller chat is quickly becoming an important part in the Crowdyhouse marketplace and it only took one front-end developer one day to integrate it. “But it already makes our users happier.” he smiled. “We already get lots of people coming back because of the chat– and supporting hours are decreasing enormously.”

TalkJS in action at crowdyhouse.com

From customer support to pre-sales communication

A visible increase in customer happiness through after sales communication is amazing, but how much does it do for the bottom line of the business? Mark: “We already see an increase in return customers, but currently the chat is only available after the purchase is made. We’re planning to activate an option to allow customers to get in touch pre-sales. So designers can use it to actively sell to potential customers too”.

____

The Crowdyhouse team was able to execute so fast on this feature because they decided to use TalkJS to outsource the entire functionality. Mark: “We had it up and running in just one afternoon, production-ready. We’re confident TalkJS will be there to to help us with the next steps in messaging.”

Older Posts