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

TalkJS Unlimited

Our goal here at TalkJS is to reduce the cost of running chat in your app. Therefore, all TalkJS plans now include unlimited users and unlimited simultaneous conversations. Just copy-paste our code and get started for free.

Nice, but why?

When we first launched TalkJS, the plug&play buyer-seller chat for marketplaces, Joshua and I thought hard about a good pricing model. We wanted to be affordable even for the smallest company, but at the same time we wanted to be able to charge more from companies with more users. We settled on a small monthly fee plus a cost per conversation.

This was a mistake, and today I’m proud to announce that we fixed it! 🙂 Metered billing sounds fair, in a way. If you get more value from our service, we charge you more. But it’s what telcos do, and if there’s any company we don’t want to be like, it’s a telco.

Many of our customers are startups. They told us that even while their monthly cost was low now, they were afraid that sudden growth would make their costs explode. Fear is not the kind of emotion we want you to have when using TalkJS.

So we simply took away the per-conversation cost.

Yep, it really says “unlimited” there

Scaling our servers so you don’t have to

The TalkJS Standard and TalkJS Lite plans now include unlimited users, unlimited conversations, and unlimited messaging. The TalkJS infrastructure is tremendously scalable, so you can be confident that we can handle your load as you grow. However, if you want a guaranteed level of performance for your expected load, get in touch and we’ll draft you a custom enterprise plan.

Curious? Check out our brand new Unlimited plans and try us out today. Don’t forget, development is free forever and we have a 14-day free trial when you go live.


Please visit our website at www.talkjs.com, start a chat, and let us know what you think.

Egbert is CTO and co-founder at TalkJS, which lets you add chat to any app or site. He likes programming, italo disco and hamburgers.

Announcing TalkJS Themes

From the day we launched in beta last September, TalkJS has been all about getting a great messaging experience for users with next to no effort. We noticed that sites and apps, all over the internet, were building their user-to-user messaging from scratch, yet they all ended up with nearly the same user interface.

Building a great UI for realtime user messaging is the most work in any chat app. There’s cross-browser quirks to mind, little details, realtime view updates: it gets messy pretty fast. This is why TalkJS includes a pre-cooked UI that you can embed into your site or app as easily as a YouTube video.

We kept hearing back from our customers, however, that they needed just that little bit of extra flexibility in the look and feel of their messaging. So without further ado, we’re happy to announce: TalkJS Themes!

Good old CSS to the rescue

A theme is a CSS file with a limited set of properties, which allow you to tune the look and feel of the UI. Think fonts, borders, colors, and so on. The core chat UI layout still stays the same, but you can make it fit your site’s design seamlessly.

Same chat, different theme.

As you can see in the screenshot above, I haven’t answered my colleague Marcin in over 2 days. That’s not very nice of me. You can also see that with just a few lines of CSS, we changed our default UI (on the left) to look similar to the one Airbnb uses for their messaging interface (the right).

Forward compatibility

When we were designing the themes feature, we were very tempted to just let our customers override our CSS and be done with that. Maximum flexibility, happiest customers, right?

But this would make it very difficult to add features later on, because new features often means new UI elements (a button here, an indicator there). How would we ensure that these new features match the intended style of our customer?

We realized we needed something more involved. TalkJS themes, therefore, do not support all CSS properties: we’re trying to capture the spirit of your design language, so that we can re-use those styles in later feature development. In fact, the TalkJS backend reads the theme files out and intelligently applies changes all over the UI, in a way that we could not do with pure CSS.

This gives you the best of boths worlds: full flexibility for making things look just right, but you can still depend on us for making your messaging better and better, without having to do more styling an development every time there’s a new TalkJS feature out.

Give it a try!

Theming is supported in TalkJS Standard plan and up. Also, it’s always enabled in test mode, which you can use for free forever. So sign up or log into the admin panel, and you can get going right away. The theme settings are on the bottom of the “Config” page.

We’re curious what you think!

Why today’s leading marketplaces Airbnb, Booking, and Upwork all double down on messaging

In the last couple of months, some of the most successful online marketplaces released new and improved messaging systems. Whether you facilitate booking rooms, freelance jobs or hotels, messaging allows buyers and sellers to communicate directly; making it informal and efficient.

Let’s dive into how Upwork, Airbnb, and Booking integrated messaging in their hugely successful marketplaces, and why they did it.

Upwork, formerly Elance-oDesk, is a global freelancing platform where businesses and independent professionals connect and collaborate remotely.

Going from a slow email-back-and-forth, people can now instantly see if a person is online and can ping each other to start a conversation right away about a potential job. This enables a much speedier and enjoyable collaboration between contractors and customers.

Upwork’s messaging center to connect freelancers with customers

And tapping into the idea of messaging being one of the most sticky and persistent services of our time (something that Slack has used to extremely successful effect), Upwork is making its collaboration and chat platform completely free to use, and also available to anyone who wants it — not just those people posting jobs on Upwork or those looking for work. (Source)

Airbnb’s hosts said they heavily rely on the app because, often, hosting isn’t their full-time job. Instead, they manage much of their activity, including responding to incoming messages, while on the go, the company found.

With the new app, messaging is featured more prominently and given a smart upgrade.

Airbnb’s revamped mobile messaging is looking great

Where before, the Inbox was buried in the app’s navigation, requiring four clicks to access, it will now sit directly on the homescreen as the first button. Next to this, hosts will be able to store responses to frequently asked questions in order to answer guests’ messages more quickly without having to type out responses on their phone’s small screen, or copy and paste from a saved document. (Source)

Booking.com, the largest travel company in the world, recently released a chat communication service that allows its millions of users to interact more easily with the hotels before and after their stays.

Booking’s messaging feature includes an extensive pre-translated template directory

Users can use the chat service in two ways. First, they can start by asking a question of their host from within their Booking.com account on any device. That includes messaging directly from the desktop, mobile web, or within Booking.com apps on iOS or Android. Users can initiate any kind of conversation they’d like with the accommodation.

Alternatively, a chat can be initiated from the hotel’s side. A hotel can send a notification to the user’s phone, which pulls the user into a conversation within the Booking.com messaging service. (Source)

So why did they do it?

Why did Airbnb, Upwork, and Booking all decided to invest in an integrated user-to-user messaging service? In other words: what benefits are there to the buyers, sellers, and the marketplace?

  1. Benefits for buyers (UX)
    Real-time messaging is about a fast and informal way to ask a question, check status of an order, or get customer support after a purchase. These things make it an overall pleasant user experience; so you’ll likely come back in the future.
  2. Benefits for sellers (retention)
    Sellers on a marketplace are able to have interactions in a much more personal way. Connecting with (potential) customers over chat means they can convert prospects easier, and build a following of loyal customers. This will ultimately increase sales.
  3. Benefits for marketplaces
    Besides making their buyers and sellers happy, a great messaging experience makes the marketplace the single tool buyers and sellers need to conduct business on the internet. You remove the need for users to “escape” the marketplace to phone or other communication apps. This means more retention.

But there is another major advantage for the marketplace: because communication between buyers and sellers is now direct, your customer support team is going to have a lot less work in being a messenger in between the two sides. Many marketplace startups spend a lot of time on sending questions and answers from one party to the other. With direct messaging, they can now focus on delivering exceptional customer success or cut back on customer support work.


For us at TalkJS, it’s really cool to see leading companies like Airbnb, Upwork, and Booking agreeing on the benefits of great two-way messaging experience as a core component in their marketplace.

If you are working on an online marketplace, but lack the expertise, time, or money to build a messaging service in-house, have a look at TalkJS. It allows you to add fully featured buyer-seller chat to your online marketplace or platform. You’ll have it up and running in 10 minutes!