Forem: Andrew

How to create a channel list in TalkJS chat

Andrew — Wed, 04 Aug 2021 17:05:11 +0000

Channel lists are common features of popular chat applications like Discord and Slack. In this article, we’ll show you how to create your very own fully functional channel list that will work with TalkJS.

For your own applications, it is likely that you will retrieve the list of relevant channels for a user from a database or as an API Channel lists are common features of popular chat applications like Discord and Slack. In this article, we’ll show you how to create your very own fully functional channel list that will work with TalkJS.

For your own applications, it is likely that you will retrieve the list of relevant channels for a user from a database or as an API response, but for the sake of this tutorial, we’ll be using a hardcoded list of channels.

Let’s get started!

Creating a channel list like Slack or Discord in HTML

We’ll be populating our channel list using an array. But first, we need a div to contain our channel list. Add the following HTML:

<div id = "channel-list">
    <h2>Channels</h2>
</div>

Great! Now we can populate this container with our list.

Create a new asynchronous function called makeList. The next thing we’ll do is create our array of channels like so:

const makeList = async function () {
    await Talk.ready;

    // Establish the array which acts as a data source for the list
    const channelData= [
    {name: "#general", id: 1},
    {name: "#dev-team", id: 2},
    {name: "#random", id: 3},
    {name: "#qa-team", id: 4},
    {name: "#release-tickets", id: 5},
    {name: "#demo-env", id: 6}
    ]
}

As you can see, each element has a name (the name of the channel) and an id(A unique identifier for each channel). The id of each channel will play an important role later on.

We now have our channel data. But how do we create a clickable list from this? Simple! We’ll dynamically create our list based on the number of elements inside that list, and place it inside of our channel-list container.

Just below your channelData array, add the following code:

    // Get the container element for the list
    const listContainer = document.getElementById('channel-list');

    // Make the list
    const listElement = document.createElement('ul');

    // Add the list to the container
    listContainer.appendChild(listElement);

    // Set up a loop that goes through the items in channelData one at a time
    for (let channel of channelData) {
// create a list item for each channel
const listItem = document.createElement('li');

// Add the channel text and id to the list item
listItem.innerHTML = channel.name;
listItem.id = channel.id;

// Add the list item to listElement
listElement.appendChild(listItem);
}

Add a call to the makeList method outside of the function itself.

// Usage
makeList();

If you run your program you should now see an HTML like so:

Our list is populating correctly! However, it looks very basic at the moment. Let’s add some style to our list. Add the following code to a linked CSS file, or directly to <style></style> tags.

#channel-list{
            width: 300px;
            font-family: arial;
      margin-right: 1rem;
        }
        #channel-list h2{
            position: relative;
            color: #fff;
            background: #1C2833;
            padding: 10px 20px; 
            font-size:20px;
            font-weight: 700;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            margin: 0;
        }

        #channel-list ul{
            background:#212F3D; 
            margin-top: 0;
            margin-bottom: 0;
        }

        #channel-list ul li{
            left:0;
            list-style: none;
            background: #212F3D;
            color: #999;
            transition: 0.5s;
            cursor: pointer;
            padding: 5px;
        }

        #channel-list li:hover {
            color: #fff; 
        }

Change the color scheme as needed to fit the theme of your application. Run your application again to see the results:

That looks much better! It looks like the type of channel list we would see in an application like Slack or Discord.

Make a HTML list clickable

We have to make our list clickable, and enable it to swap between TalkJS conversations.

Go back to our makeList function. Modify the existing code from the snippet below:

listItem.innerHTML = channel.name;
listItem.id = channel.id;

To the new code that includes addEventListener:

listItem.innerHTML = channel.name;
listItem.id = channel.id; 
listItem.addEventListener('click', clickList, false);

This adds an event listener to each item in our list, where it will call a function called clickList.

Let’s create this function:

function clickList() {
    console.log(this.id);   
}

For now, this method just prints out the id of the list item you clicked. Run your application and ensure that the method works. Each time you click an item in the list, it should print out the associated id value, which in this case is a number between 1 and 6.

Great! Our list is now clickable. Let’s add our TalkJS chatbox, and have the channel list change the currently selected conversation that appears in the chatbox.

Setting up TalkJS conversations

Follow this Getting Started guide to set up a simple conversation. You may also want to change the photoUrl of each user to an actual image address. You can find free images here to act as the profile pictures of your users.

For this tutorial, we’ll need to create multiple conversations and multiple users. We also need to change the id of the conversations, to match the id values of our channelData. Here are the conversations I have created:

            //#general
            conversation1 = session.getOrCreateConversation("1");
            conversation1.setParticipant(me);
            conversation1.setParticipant(user1);
            conversation1.setParticipant(user2);
            conversation1.setParticipant(user3);


            //#dev-team
            conversation2 = session.getOrCreateConversation("2");
            conversation2.setParticipant(me);
            conversation2.setParticipant(user1);
            conversation2.setParticipant(user2);

            //#random
            conversation3 = session.getOrCreateConversation("3");
            conversation3.setParticipant(me);
            conversation3.setParticipant(user1);
            conversation3.setParticipant(user2);
            conversation3.setParticipant(user3);

            //#qa-team
            conversation4 = session.getOrCreateConversation("4");
            conversation4.setParticipant(me);
            conversation4.setParticipant(user3);

            //release-tickets
            conversation5 = session.getOrCreateConversation("5");
            conversation5.setParticipant(me);
            conversation5.setParticipant(user1);
            conversation5.setParticipant(user2);

            //#demo-env
            conversation6 = session.getOrCreateConversation("6");
            conversation6.setParticipant(me);
            conversation6.setParticipant(user1);
            conversation6.setParticipant(user3);

            chatbox = session.createChatbox(conversation1);             
            chatbox.mount(document.getElementById('talkjs-container'));

When setting up actual conversation id’s, it is not wise to use simple numbers as we have here as it poses a security risk. Check out the TalkJS documentation on setting up secure conversation id’s.

Mounting a channel list to a TalkJS chatbox

Let’s make our channel list appear beside our TalkJS chatbox. From the Getting Started guide, you should have added a div called talkjs-container. To get our channel list appearing beside the TalkJS chatbox, modify your HTML code like so:

<!-- Container element for all TalkJS UI elements-->
<div style="display: flex; width:100%;">
    <div id = "channel-list">
        <h2>Channels</h2>
    </div>

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

Run our application again to see if our changes were successful. You should see the channel list displaying next to the TalkJS chatbox.

At the moment, our channel list has no functionality. Before we add the ability to switch between conversations using the channel list, let’s populate each conversation with some actual text.

Run your application, ensuring the chatbox is being created with conversation1 selected:

chatbox = session.createChatbox(conversation1);
chatbox.mount(document.getElementById('talkjs-container'));

Write some text in the chat.

Repeat this process for each conversation from 1 to 6. For example, run your application again, this time with conversation2 selected:

chatbox = session.createChatbox(conversation2);
chatbox.mount(document.getElementById('talkjs-container'));

Repeat this until every conversation has some messages being sent back and forth.

With our conversation data in place, it’s time to add the final piece of functionality, making our channel list switch between the conversations.

Switch between TalkJS conversations using chatbox.select

Return to the clickList method. Add the following line of code:

function clickList() {
   console.log(this.id);
   chatbox.select(this.id.toString());
}

We’ve added a call to the chatbox.select method. This method allows us to easily switch between the conversations in our channel list. It’s as simple as that, no further changes are needed!

Relaunch our application and click on each channel. It should open up the relevant conversation.

There you have it! We’ve replicated the channel lists that are typically used in modern chat applications. This list is built dynamically, creating a channel for each element in your array of data. This tutorial is only the beginning. You can continue to tweak and build out this application, which will result in a fully-fledged, scalable, and robust chat application.

How to add audio and video calls to a TalkJS chat by using the Daily API

Andrew — Fri, 16 Jul 2021 15:58:55 +0000

In this post we’ll explore how we can add video call functionality to a TalkJS chat. With remote work more popular than ever, video calling is in high demand and considered a must-have feature for many chat applications. We’ll be making use of the Daily video API, which will allow us to get up and running quickly!

Setting up a simple TalkJS chat

First of all, we’ll set up a simple conversation. Follow this Getting Started guide. You may also want to change the photoUrl of each user to an actual image address. You can find free images here to act as the profile pictures of your users.

For this tutorial, we will use a chatbox (a single conversation) instead of an inbox that allows you to swap between conversations. You can learn more about a TalkJS chatbox here. Make sure you change this code from the Getting Started guide from:

const inbox = session.createInbox({selected: conversation});
inbox.mount(document.getElementById("talkjs-container"));

To the new code for a chatbox:

var chatbox = session.createChatbox(conversation);
chatbox.mount(document.getElementById("talkjs-container"));

Run your application, it should look something like this:

Perfect! Let’s move on to adding a button to the chat header that will allow us to make video calls.

Adding a video call button to TalkJS chat

We want to add a video call button to our chat header. We will use the button to toggle whether the video call dialog is shown. Unfortunately we cannot use the in-built ChatHeader component that comes with the chatbox out-of-the-box. TalkJS does not allow click handlers to be added to buttons there. To get around this we can use custom headers as described by this documentation here. This blog post also describes the process excellently.

Let’s get started!

Using a custom chat header in TalkJS

First, change our chatbox code to not use the default chat header.

Change the code from:

var chatbox = session.createChatbox(conversation);

To the new version that won’t use the default header:

var chatbox = session.createChatbox(conversation, {showChatHeader: false});

Incorporate the talkjs-container div into the structure shown below. As you can see we have a div for our entire chatbox, and a separate div for our header. We also have a div called button-container where we’ll add our video call button.

<!-- Container element for all TalkJS UI elements -->
   <div class="chatbox-container">

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

        <div id="header-bg"></div>
         <div id="user-avatar"></div>
         <p id="header-subject"><span id="header-username"> Username</span></p>


        <div class="button-container">
            <div class="call-button">
                <!--input type="checkbox" name="notificationToggle" class="toggle-checkbox" id="toggle"-->
                <input type="image" name="videoCallButton" id="videocall" src="https://img.icons8.com/material-sharp/24/ffffff/video-call--v1.png"/> 
            </div>
        </div>
    </div>

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

</div>

Adding a username and picture to a TalkJS custom chat header

Add the following code to incorporate your user’s name and profile picture into the custom header:

// Add the participant user's name and photo to the custom header
var headerUsername = document.getElementById('header-username');
headerUsername.textContent = other.name;      
document.getElementById('user-avatar').style.backgroundImage = "url(" + other.photoUrl + ")";

Styling a custom chat header in TalkJS

Finally, 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 Chatbox.

<style>
/* Container for everything TalkJS*/
.chatbox-container {
    width: 420px;
    max-width: 100%; 
    margin: auto;
}

/* Custom header for the chatbox*/
#chatbox-header {
    height: 110px;
    position: relative;
    background-color: #000;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    /* Slightly curve the top of the header */
    border-radius: 10px 10px 0 0;
    margin-bottom: -3px;
    padding: 10px;
    position: relative;
}

#header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: inherit;
  opacity: 0.6;
}

#user-avatar {
  position: absolute;
  height: 50px;
  width: 50px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  border: 2px solid #eee;
}

#chatbox-header p {
  font-family: "Helvetica", sans-serif;
  color: #eee;
  margin: 0;
}

#header-subject {
  position: absolute;
  font-size: 32px;
  left: 70px;
  top: 7px;
}

/* Notification toggle */
.button-container {
    text-align: right;
    position: absolute;
    bottom: 15px;
    right: 10px;
}

.button-container p {
    display: inline;
    font-size: 10px;
    padding-right: 10px;
    vertical-align: middle;
}
.call-button {
    vertical-align: middle;
    display: inline-block;
    position: relative;
    width: 51px;
    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select: none;
    user-select: none;
    height: 18px;
}
    </style>

After these changes your chat should resemble the following screenshot:

Wow, we’ve made a lot of progress. You can see our new video button, but it currently does not have any functionality.

Time to hook up the Daily API and have this button open the video call dialog.

Setting up the Daily API

Sign up for the Daily API here. Their free plan allows you to get building and prototyping straight away, without adding any form of payment!

Creating a Daily room by following this guide. Each Daily room has an associated URL, we will need this to have our video call.

To hook up our button to the Daily API we will have to make two additions to our current code:

Simply add these script tags to your html page:

<script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>

Add the following code, make sure to use your own Room URL we set up here

```javascript
var callButton = document.getElementById('videocall');

    callButton.addEventListener('click', function() {
        callFrame = window.DailyIframe.createFrame({
            showLeaveButton: true,
            showFullscreenButton: true,
        });
        callFrame.join({ url: 'https://talkjstest.daily.co/{your-video-call-room-id}' })
    });

```

You can see we passed in some additional properties like showLeaveButton and showFullscreenButton. Check out this guide for more information on what you can do with the premade Daily UI.

Let’s run the application and check out our brand new video call functionality!

Perfect! Note, if you would like to change anything about how the video call dialog behaves, try changing your Room settings.

Adding regular audio calls to a TalkJS chat

We’ll also add another button, this time for regular audio calls. The main difference here is the user will be placed directly into the call without being shown an option to set up their microphone and camera.

Go back to your Daily API dashboard and create a new room. Select settings that are typical of regular calls like:

Turning off the Prejoin UI
Turning off video by default
Turning off screen share by default.

Here are the settings I have selected:

Now that our room is set up let’s add the actual call button icon. Update our button-container div to the following:

<div class="button-container">
            <div class="call-button">
                <input type="image" name="videoCallButton" id="videocall" src="https://img.icons8.com/material-sharp/24/ffffff/video-call--v1.png"/> 
            </div>
            <div class="call-button">
                <input type="image" name="audioCallButton" id="audiocall" src="https://img.icons8.com/material-rounded/24/ffffff/phone-disconnected.png"/>
            </div>
</div>

That will add the call icon to our custom chat header panel, but the button will have no functionality. Let’s add functionality by following similar steps as before. Make sure your new code looks as follows:

var callButton = document.getElementById('videocall');
    var audioCallButton = document.getElementById('audiocall');

    var callFrame; 

    callButton.addEventListener('click', function() {
        if(callFrame != null){
            callFrame.destroy();
        }
        callFrame = window.DailyIframe.createFrame({
            showLeaveButton: true,
            showFullscreenButton: true,
        });


        callFrame.join({ url: 'https://talkjstest.daily.co/{your-video-call-room-id}' })
    });

    //audio button listener
        audioCallButton.addEventListener('click', function() {


        if(callFrame != null)
        {
            callFrame.destroy();
        }

        callFrame = window.DailyIframe.createFrame({
            showLeaveButton: true,
            showFullscreenButton: true,

        });
        callFrame.join({ url: 'https://talkjstest.daily.co/{your-audio-call-room-id}' })
    });

You can see that we now destroy the callFrame Chat frame each time the button is pressed, and proceed to load the new audio or video UI depending on what button was clicked. This will ensure only one frame is displayed at any one time.

Try out your new audio call button. You should be placed directly into a call without having to set up your microphone or camera. It should be similar to having a call on Microsoft Teams, Slack, or Facebook Messenger.

There you have it, both audio and video calls integrated with a TalkJS chatbox! Don’t be afraid to take this project further. This JSFiddle project from TalkJS, along with this sample project from Daily, are great resources that show you even more functionality.

How to create a chat similar to Discord with TalkJS

Andrew — Thu, 01 Jul 2021 13:54:56 +0000

In this article, we’ll look at how we can use the TalkJS chat API and TalkJS Themes to mimic the appearance and functionality of Discord. Themes allow you to change the look and feel of user interfaces to match your site or app's particular style. Let’s set up our project.

Setting up our project

There are a few steps we need to complete before we can start playing using themes. We need to do the following:

Create a simple conversation
Create a role
Create a theme for that role and activating that theme.

Creating a simple conversation

First of all, we’ll set up a simple conversation. Follow this Getting Started guide. You may also want to change the photoUrl of each user to an actual image address. You can find free images here to act as the profile pictures of your users.

const inbox = session.createInbox({selected: conversation});
inbox.mount(document.getElementById("talkjs-container"));

To the new code for a chatbox:

var chatbox = session.createChatbox(conversation);
chatbox.mount(document.getElementById("talkjs-container"));

You will also need to change the role of both users from “default” to “discord”. Your end result will look like this:

const me = new Talk.User({
    id: "123456",
    name: "Alice",
    email: "alice@example.com",
    photoUrl: "https://demo.talkjs.com/img/alice.jpg",
    welcomeMessage: "Hey there! How are you? :-)",
    role: "discord"
});

Add some more users so we can have a realistic conversation. You will want to update the photoUrl of each user to an actual image address. You can find the free images here to act as the profile pictures of your users.

Another feature we should add is a group chat. Follow this documentation to set up your group chat.

Creating our role

Now we need to create this role in our dashboard. In the header of the dashboard click Roles and add a role called “discord”:

Activating a theme

Which theme is used when displaying the TalkJS UI depends on the current user's role. When a user has no role set, the TalkJS default theme will be used.

To configure a theme for a role, go to the dashboard, and click Roles. Then, create or select a role, and scroll down to the "UI Theme" section:

Next, navigate to the Theme Editor and click the Create new theme button:

Create a theme named “discord”. To make this theme active, go to the dashboard, and click Roles. Then, create or select a role, and scroll down to the "UI Theme" section, and select your new theme.

Run your program to ensure it works. After all of this work you should have a chat resembling the screenshot below:

We are now ready to start customizing our theme!

Make a chat like Discord using TalkJS themes

For those unfamiliar with Discord, it is a popular chatting application like Skype or Telegram. A chat in Discord looks like the following screenshot:

We will be using themes to make our existing TalkJS chat look like this. Let’s get started!

First, go to the Theme Editor and make sure you have our new “discord” theme selected.

Changing the fonts

We will make our first set of changes in the layout section.

Click on Global under Layout Settings and make the following changes:

Change the value of webFontUrl from https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese to https://fonts.googleapis.com/css?family=Uni+Sans:400,400i,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese
Change the value of fontFamily from "Open Sans", "Helvetica", sans-serif to "Uni Sans", "Helvetica", sans-serif.
Change the color from #111 (black) to #fcfcfc (a grey-ish white).

We’ve updated the font to the exact font used by discord. You should now have the following values for the Global section:

Let’s see what our app looks like now:

We made it look worse! Don’t worry we’ll fix this with the next set of changes. Discord is known for its dark theme, and use of purple and grey colors. Let’s update our theme to feature these darker colors.

Changing Panel colors

In the Panels section of Layout Settings, update the value of backgroundColor to #3d4454.

In Discord, the panel header is the same color as the panel itself, separated by a black border.

We will replicate this. In the Panel headers section of Layout Settings, make the following changes:

Change the value of backgroundColor from #e7ecee to #3d4454.
Change the value of borderBottomColor from transparent to black.

We’ll make similar changes to the Panel footer. In the Panel footers section of Layout Settings, change the value of backgroundColor from #e7ecee to #3d4454.

Let’s see the effect of these changes by launching our application again:

Wow, that looks much better! However, there are still some things we need to address.

The message bubbles are not needed at all, Discord does not have these.
The input box (showing the prompt Say something) should be a light grey, not white.

Let’s start making these improvements!

Removing the chat bubbles in TalkJS

The properties of the messages are handled by the UserMessage component. Under the Top-level Components section, click on UserMessage. This will open the CSS for this component. Navigate to the .message class and make the following changes:

Delete border-style: solid;
Delete border-color: #E7ECEE;
Delete background-color: #E7ECEE;
Change color from color: #111; to color: #fff;

After making these changes your final code should look like the following snippet:

.message {
    white-space: normal;
    overflow: hidden;
    border-radius: 1.5rem;
    border-width: 1px;
    word-wrap: break-word;
    position: relative;
    display: inline-block;
    max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
    color: #fff;
}

Let’s see the effect this has on our chat:

Fantastic! This is what we wanted. However, you can see the bubble still appears for the messages that we send. The message also appears on the other side of the chat. Discord displays all messages on the left side of the chat, so we need to change this. Let’s make these changes:

To make all messages appear on the left side of the chat, open the UserMessage component and find the class .message-row.by-me. Remove the line flex-direction: row-reverse;
In the UserMessage component, find the class .by-me .message. Delete border-color and background-color.

Open our application again.

That’s more like it!

Changing the text input box in TalkJS

The next change concerns the input box (showing the prompt Say something) should be grey, not white. To change this, select layout in the left pane and click on the Message field dropdown. Change the backgroundColor and borderColor to #81858f. Change the color to #fcfcfc.

Let’s launch the application again, and see our new input box:

Great, this is what we wanted! So far our chatbox has been small, taking up only a portion of the screen. What if we wanted to make it bigger, and have it act as a full-screen application?

Making the TalkJS chatbox bigger

The first thing that influences the size of the chat inbox is the div you instantiated to act as the container for the inbox. For example, when following the guide we used the following div:

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

You can see we’ve set the width and height here. Change this code to:

<div id="talkjs-container" style="width: 100%; height: 100%">
        <i>Loading chat...</i>
</div>

Our height and width will no longer be restricted.
Go back to our Theme Editor. Click on ‘layout’ in the left pane. Click on the chatbox dropdown.

Customize these heights as you see fit. For this example, I changed the maxWidth of the chatbox from 420px to 1680px.

Relaunch the application to view the effect of this change:

Fantastic, it’s even closer to Discord! You can continue to remove margins and make panels even wider if you want the application to take up more of the screen.

Another feature of Discord is how it always displays the usernames in the conversation. The default for TalkJS is to only show the user names of other people in group chats. Let’s update this user name setting.

How to always show user names in a TalkJS chat

To have the usernames constantly showing in a TalkJS chat, click on the UserMessage component under the Top-level Components heading in the left pane.

Find the code:

<div t:if="{{ sender.isMe == false and conversation.others.length > 1 }}"
                 class="message-author"
                 style="color: {{ sender.id | random_color }}">
                {{ sender.name }}
            </div>

You can see the conditions being checked, the default being to only show the usernames of other people in group chats. Change this by updating the code to:

<div t:if="{{ conversation.others.length > 0 }}"
                 class="message-author"
                 style="color: {{ sender.id | random_color }}">
                {{ sender.name }}
            </div>

The new condition will show a username as long as there is a single user in a conversation. It doesn’t matter if it is a group chat or not.

Let’s see the effect of this code change on our application:

Our usernames are always on display, in both 1-on-1 conversations and group chats. This is exactly what we wanted!

Adding a channel list

Channel lists are common to applications like Slack and Discord. Let’s introduce a channel list to our application. For your own applications, it is likely that you will retrieve the list of relevant channels for a user from a database or as an API response, but for the sake of this tutorial, we’ll be using a hardcoded list of channels.

We’ll be populating our channel list using an array. But first, we need a div to contain our channel list. Change your existing HTML code to the following:

<div style="display: flex; width:100%; height:100%">
        <div id = "channel-list">
            <h2>Channels</h2>
        </div>


        <div id="talkjs-container" style="width: 100%; height: 100%">
            <i>Loading chat...</i>
        </div>
    </div>

Great! Now we can populate this container with our list.

Create a new asynchronous function called makeList. The next thing we’ll do is create our array of channels like so:

const makeList = async function () {
    await Talk.ready;

    // Establish the array which acts as a data source for the list
    const channelData= [
    {name: "#general", id: 123},
    {name: "#gamer-squad", id: 456}
    ]
}

As you can see, each element has a name (the name of the channel) and an id(A unique identifier for each channel). The id of each channel will plays an important role. It must match your conversion id’s exactly. For example, When adding my earlier conversation I used the followings id values:

            const conversation2 = session.getOrCreateConversation("123");
            conversation2.setParticipant(me);
            conversation2.setParticipant(other1);
            console.log('conversation ID: ' + conversation.id);

            const groupchat = session.getOrCreateConversation("456");
            groupchat.setParticipant(me);
            groupchat.setParticipant(other);
            groupchat.setParticipant(other2);
            groupchat.setAttributes(
                {
                    photoUrl: "https://upload.wikimedia.org/wikipedia/commons/e/e0/Rocket_League_coverart.jpg",
                    subject: "Rocket League Squad"
                });

Note how the values of 123 and 456 match the values I provide to channelData:

const channelData= [
    {name: "#general", id: 123},
    {name: "#gamer-squad", id: 456}
]

Our data is now in place. Just below your channelData array, add the following code:

    // Get the container element for the list
    const listContainer = document.getElementById('channel-list');

    // Make the list
    const listElement = document.createElement('ul');

    // Add the list to the container
    listContainer.appendChild(listElement);

    // Set up a loop that goes through the items in channelData one at a time
    for (let channel of channelData) {
         // create a list item for each channel
         const listItem = document.createElement('li');

         // Add the channel text and id to the list item
         listItem.innerHTML = channel.name;
         listItem.id = channel.id;

         // Add the list item to listElement
         listElement.appendChild(listItem);
    }

Add a call to the makeList method outside of the function itself.

// Usage
makeList();

If you run your program you should now see an HTML like so:

Our list is populating correctly! However, it looks very basic at the moment. Let’s add some style to our list. Add the following code to a linked CSS file, or directly to <style></style> tags.

        #channel-list{
            width: 300px;
            font-family: arial;
      margin-right: 1rem;
        }

        #channel-list h2{
            position: relative;
            color: #fff;
            background: #1C2833;
            padding: 10px 20px; 
            font-size:20px;
            font-weight: 700;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            margin: 0;
        }

        #channel-list ul{
            background:#212F3D; 
            margin-top: 0;
            margin-bottom: 0;
        }

        #channel-list ul li{
            left:0;
            list-style: none;
            background: #212F3D;
            color: #999;
            transition: 0.5s;
            cursor: pointer;
            padding: 5px;
        }

        #channel-list li:hover {
            color: #fff; 
        }

Change the color scheme as needed to fit the theme of your application. Run your application again to see the results:

That looks much better! It looks like the type of channel list we would see in an application like Slack or Discord.

We have to make our list clickable, and enable it to swap between TalkJS conversations.

Go back to our makeList function. Modify the existing code from the snippet below:

listItem.innerHTML = channel.name;
listItem.id = channel.id;

To the new code that includes addEventListener:

listItem.innerHTML = channel.name;
listItem.id = channel.id; 
listItem.addEventListener('click', clickList, false);

This adds an event listener to each item in our list, where it will call a function called clickList.

Let’s create this function:

function clickList() {
   inbox.select(this.id.toString());
}

Now run your application again, and use your channel list to select the active conversation.

There we have it, our final result! We will make no further changes in this post. We have gotten very close to the appearance and functionality of Discord by making some very simple changes to our existing theme. You can see the flexibility of themes and how they can be quickly configured to fit your needs.

How to show different email notifications for different types of users in a TalkJS chat

Andrew — Mon, 14 Jun 2021 14:21:23 +0000

Roles allow you to change the default behavior of TalkJS for different users. You can assign roles to a certain group of your users and have full control over which user gets which role. Email notifications can then be customized for different roles. In this post, we will look at how we can set this up.

TalkJS Roles

TalkJS allows different groups of users to have different settings by assigning them a specific role. You have full control over which user gets which role.

For example, you may want one group of users to receive email notifications if they have a new message, or give another group of users the ability to share files. You can do all of this using roles.

A role allows you to define the following settings for a group of users:

Allow/disallow file or location sharing
Create custom email notification templates
Configure SMS settings
Configure text/contact information suppression
Configure how links in chat messages will be opened
Customize the standard TalkJS user interface using themes

You can create roles from the TalkJS dashboard. Let’s create two roles, with each receiving a different type of email notification.

Creating a role in TalkJS

Creating a role in TalkJS is simple, and can be accomplished using the dashboard.

1. Add a role in the dashboard

To add a role, click on Roles at the top left corner of your dashboard.

Next, click on the Create new role button and put “buyer” as the name of the role. You can decide if the role will copy data from previous roles or use the default role setting.

After this, you can manage the settings for the role by using the checkboxes next to each setting.

2. Assign a role to a user

You assign a role to a user when you create the user. For example, if the name of the role you created on the dashboard is buyer, you can assign this role to the user "Alice" in your code like this:

const me = new Talk.User({
    id: "123456",
    name: "Alice",
    email: "alice@example.com",
    photoUrl: "https://demo.talkjs.com/img/alice.jpg",
    welcomeMessage: "Hey there! How are you? :-)"
    role: "buyer" // <-- that's the one!
});

Make sure the role matches the role name you chose in the dashboard, in this case, “buyer”.

For the purpose of this example, you may want to set the email to an email address you have access to. This will allow you to access the email that gets sent.

Repeat this process, except this time create a new role called “seller”. Create another user and set the role to be “seller”. At this stage, you should have two roles, “buyer” and “seller”, and a single user set up with each role.

How Email notifications are Sent

If a user has a role set and has at least one email address, they will automatically start receiving email notifications when they are offline. Users can have more than one email address and TalkJS will notify all email addresses on record.

Email notifications are not sent with each message but rather grouped and sent after a period of inactivity to avoid spamming the user's inbox.

The TalkJS notification system has been carefully designed to send notifications as quickly as possible while ensuring your users do not feel like they’re being spammed. We use a number of heuristics to get this balance right.

There are a few conditions that must be met in order to send notifications:

The user is offline.
The user is online but has a different conversation selected in the UI.
The user is online, has the current conversation selected in the UI, but the browser tab/window does not have focus.

In other words, a notification is not sent out when the user has the current conversation selected in the UI and the tab containing TalkJS is focused.

To keep the email count low, subsequent messages are grouped together. After a user sends a message, TalkJS tracks whether they continue typing. A notification is sent when the user has stopped typing for several seconds. This notification will contain all of the messages they sent since they first started typing.

This also holds for group conversations. if two users have a quick real-time interaction, then the notification sent to the other participants will include all messages sent since the first user started typing until the last user stopped typing.

TalkJS is designed to be a slow chat solution, which supports reply-via-email functionality. When a user replies to a notification email, their reply will show up in the conversation.

Managing your email notification settings through the dashboard

To modify the email notification that TalkJS sends, first head to the TalkJS Dashboard and then click on Roles in the top left corner, inside of the role editor you'll see a section for Email settings.

The first option you’ll see is the Enable Email notifications checkbox. When enabled, you have the option to change the subject, theme, and template for your email

The next option you’ll see is the Enable replying to email notifications via email checkbox. This allows recipients of email notifications to reply directly to the email that they receive, and have the response sent back to the chat.

You can also decide whether users can send attachments with their replies. However, no images are allowed to be sent no matter what. This is due to being unable to determine the difference between purposefully attached images, and those automatically include in the footer such as company logos.

Use these role settings to send different emails to users depending on whether they are buyers or sellers.

Complete control over the emails your users receive

The concept of roles allows you to easily set up different email templates for different types of users. We have covered how to create roles, how to add a role to a user, and finally how to configure the notifications that are sent for a role. This provides you with a highly configurable system that can be tailored to your specific needs. It also ensures your users are getting relevant notifications that are genuinely helpful and address their unique situations.

How to connect a chatbot to a TalkJS chat

Andrew — Tue, 08 Jun 2021 12:55:23 +0000

In this post, I will demonstrate how you can connect the TalkJS Chat API with a chatbot service like Dialogflow. A chatbot is a software application used to conduct an online chat conversation via text or text-to-speech instead of providing direct contact with a live human agent.

Chatbots can be a fantastic way to add rich functionality to your chat integration by enabling automatic and application-aware responses to user inquiries.

While TalkJS doesn't provide an out-of-the-box AI chatbot that can interact with your users without any further operations, we provide a way for chatbots to interface with the chat by combining our webhooks feature which allows you to create a URL to monitor events from users.

For example, when a user sends a message, our REST API can be used by your chatbot to directly interact with your users by sending messages. It is up to your application to appropriately process incoming events and generate relevant responses.

Prerequisite

Before going any further, complete our Getting Started guide to set up a simple conversation between two users.

Dialogflow Setup

Let’s set up a simple Dialogflow project that will allow us to integrate with TalkJS.

Step 1 - Go to https://dialogflow.com/ and select Dialogflow ES, the standard agent type suitable for small and simple agents.

Thankfully the documentation for this application is excellent. Finish the setup as instructed, which involves:

Step 2 - Build your agent using this guide. Finish the required steps to create your intent. I added a training phrase of “What is the best Chat API and SDK?” with the response being “TalkJS is the best Chat API and SDK!”.

This concludes our Dialogflow setup. Let’s set up our webhook in TalkJS, which will allow us to receive messages.

Using webhooks to receive messages in TalkJS

So, what exactly is a webhook? A webhook (also called a web callback or HTTP push API) is a way for an app to provide other applications with real-time information. A webhook delivers data to other applications as it happens, meaning you get data immediately.

Before we can use webhooks we need to set up a server for our application. If you have a server URL already set up, you can move on to Enabling the TalkJS Webhook.

Setting up our server

We will be using Node.js, and ngrok to set up our server.

You may be wondering, what is ngrok?

Your development machine may be connected to a secure network behind a firewall. To work around access restrictions, ngrok runs a small client process on your machine which creates a private connection tunnel to the ngrok cloud service. Your localhost development server is mapped to an ngrok.io sub-domain, which a remote user can then access. There’s no need to expose ports, set up forwarding, or make other network changes. The connection tunnel established by ngrok is secure and can only transmit data to the localhost port you have open.

Make sure you have both of these installed before proceeding. Extract the ngrok executable to your project folder, or add it to your PATH.

In the terminal for your project, type npx express-generator to quickly create a skeleton for our local server.

Once this operation is complete you should now see a *routes * directory.

In the routes directory, open the file users.js

Replace the existing code:

router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

With the new code:

router.post('/', function(req, res) {
  var body = req.body;
  var message = body.data.message.text;
  console.log("Message Text: " + message);
  res.status(200).send();
});

In the bin directory open the file www. Change the line:

var port = normalizePort(process.env.PORT || '3000');

Time to launch our ngrok server. Open the Command Prompt or shell, and change (cd) into the directory of your project.

Run the command: ngrok http 3000

Copy the https protocol version of the URL. This URL is used to forward all of the messages from your ngrok server to your local server:

For my server, I have a value of https://5286ee752ef7.ngrok.io

Note: this URL will be different for you.

Now append the “/users” section to this URL.

My final result looks like the following: https://5286ee752ef7.ngrok.io/users

This is the URL we will use for our webhook.

Enabling the TalkJS Webhook

You can enable the TalkJS webhook in the dashboard. Enter the https URL from ngrok and enable the messages sent checkbox

When webhooks are enabled in the TalkJS dashboard, your server will receive HTTP POST requests from the TalkJS server notifying you about events that happen in your application between your users. If you’re interested in learning more about how TalkJS webhooks work, read the Webhook Reference Guide.

From your dashboard, perform the following steps to enable webhooks:

Enable the use of webhooks by setting the Webhook toggle to enabled. You should now have the option to enter a URL.
Enter the URL of your server, or the ngrok server you created from the previous section (in my case, it’s: https://5286ee752ef7.ngrok.io/users).
Enable the message.sent checkbox
Click the Save URL button

Your final result should look something like this:

Time to test out what we have done so far.

In the terminal of your project, type the command npm install to ensure all dependencies are installed.

Finally, run npm start and launch your application so that you can see the inbox you previously created in the Getting Started guide.

Type a message into the conversation, and go back to your terminal to check the logs. Look for the output of console.log("Message Text: " + message); It should match the text you have typed in.

In my case, the logs look like the following snippet:

There you have it, we have successfully used webhooks to receive messages in TalkJS. But how do we send this message to Dialogflow? Let’s find out!

Sending a message to Dialogflow

At this stage, we have the message our user has typed in. This could be a question about a product or service we offer.

In order to see our Dialogflow response, ensure the text you enter into the TalkJS conversation the same as the training phrase you set up for your intent. In this example, the training phrase of “What is the best Chat API and SDK?” with the response being “TalkJS is the best Chat API and SDK!”.

To accomplish sending our message to Dialogflow, we must first ensure we are authenticated to do so.

Authentication for Sending messages to Dialogflow

Follow the steps to get authenticated here:

https://cloud.google.com/docs/authentication/getting-started#cloud-console

For me my final command looked like:

set GOOGLE_APPLICATION_CREDENTIALS=C:\Users\Admin\Downloads\chatbot-talkjs-5ee64d42fcbb

Your value will be different.

If you run into issues with this method, specifically this error:Error: Could not load the default credentials. You can try this alternate method of authenticating.

Visit: https://cloud.google.com/sdk/install and perform the following steps:

Install the Google SDK.
Open the gcloud shell.
Run the command: gcloud auth application-default login
Log in to your associated Gmail account.

You should now be authenticated. Time to add the code that sends our text to Dialogflow.

Sending messages to Dialogflow using the Node.js client library

We can send messages to Dialogflow using the Node.js client library.

The following code sends the message we type in the TalkJS inbox to Dialogflow.

const dialogflow = require('@google-cloud/dialogflow');
const uuid = require('uuid');

async function sendMessageToDialogflow(talkjsText) {
  // A unique identifier for the given session
  const sessionId = uuid.v4();

  // Create a new session
  const sessionClient = new dialogflow.SessionsClient();


// Pass the cloud project ID here
const sessionPath = sessionClient.projectAgentSessionPath('chatbot-talkjs', sessionId);

  // The text query request.
  const request = {
    session: sessionPath,
    queryInput: {
      text: {
        // The query to send to the dialogflow agent
        text: talkjsText,
        // The language used by the client (en-US)
        languageCode: 'en-US',
      },
    },
  };

  // Send request and log result
  const responses = await sessionClient.detectIntent(request);
  console.log('Detected intent');
  const result = responses[0].queryResult;
  console.log(`  Query: ${result.queryText}`);
  console.log(`  Response: ${result.fulfillmentText}`);

  if(result.queryText != "TalkJS is the best Chat API and SDK!")
    return result.fulfillmentText;

  if (result.intent) {
    console.log(`  Intent: ${result.intent.displayName}`);
  } else {
    console.log(`  No intent matched.`);
  }
}

We add the line: if(result.queryText != "TalkJS is the best Chat API and SDK!") to make sure our application does not interpret this reply as a new message to reply to.

In reality, you would have more than a single reply set up, so this would not be necessary.

Re-open the file user.js and add a call to sendMessageToDialogflow here:

router.post('/', function(req, res) {
  var body = req.body;
  var message = body.data.message.text;
  console.log("Message Text: " + message);
  res.status(200).send();
  var replyFromDialogFlow = sendMessageToDialogflow(message);
});

Before we run this code and test out our new feature, run the following commands the install the required packages:

npm install @google-cloud/dialogflow
npm install uuid

Let’s launch our application, this time writing a message that matches our training phrase exactly.

To see our new feature in action we need to check the logs!

This is exactly the result we want. It is recognizing our intent and sending the appropriate response to our query.

We now have the message from our TalkJS conversation being sent to Dialogflow and correctly generating a response. Let’s look at how we get this response to appear as a reply in our TalkJS conversation.

Sending Dialogflow responses to TalkJS

We have the response generating correctly, but we need to show this response in the TalkJS conversation. This can be accomplished through the TalkJS REST API, specifically a POST request to the Messages endpoint.

To send our POST request in Node.js we will use axios. Axios is a promise-based HTTP client for the browser and Node. js. Axios makes it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations.

To install axios, simply run npm install axios in your terminal console.

Time to add the code that will allow us to send the Dialogflow response to our conversation.

You will need to change several things with the code below:

APP_ID - you can find your app id on the dashboard.
CONVERSATION_ID - you can find the ID of a conversation using conversation.id
USER_ID - This can be found wherever you created your user, like this example.
SECRET_KEY - you can find your secret key on the dashboard.

function sendReplyToTalkJS(responseFromDialog) {
  axios
.post('https://api.talkjs.com/v1/<APP_ID>/conversations/<CONVERSATION_ID>/messages', 
  '[{"text": "' + responseFromDialog + '", "sender": "<USER_ID>", "type": "UserMessage"}]',
  {
    headers: {
      'Authorization': 'Bearer <SECRET_KEY>,
      'Content-Type': 'application/json'
    }
  })
  .then(res => {
    console.log(`statusCode: ${res.statusCode}`);

  })
  .catch(error => {
    console.error(error)
  })
  .catch((error) => console.log( error.response.request._response ) );
}

Let’s call this method.

Re-open the file user.js and add a call to sendReplyToTalkJS here:

router.post('/', function(req, res) {
  var body = req.body;
  var message = body.data.message.text;
  console.log("Message Text: " + message);
  res.status(200).send();
  var replyFromDialogFlow = sendMessageToDialogflowrunSample('chatbot-talkjs', message);
sendReplyToTalkJS(replyFromDialogFlow);
});

Launch your application and enter your training phrase again.

This time you should see the response from Dialogflow appearing as a reply in your conversation!

How to use TalkJS with websockets and chatbots!

Using a combination of websockets and our REST API has allowed us to integrate Dialogflow into the TalkJS workflow. However, you are not limited to Dialogflow. The principles we have learned today apply to many different offerings in the market. So what are you waiting for? Go and build the best chatbot you can, with a little help from TalkJS!

How to ban users from all chats with TalkJS

Andrew — Wed, 12 May 2021 10:11:42 +0000

In this article, we will demonstrate the process of removing a user from conversations, and put security measures in place that ban this user from interacting with chats again. We can ensure the security of your conversations by preventing user impersonation using identity verification, and disabling client-side syncing so users can’t add themselves to conversations.

The first step is deleting the user from a conversation. Let’s get started!

Deleting a user from a conversation

TalkJS makes it possible to programmatically add and remove the users in a conversation. You can also restrict access rights, toggle notifications on or off, or set a label for certain people in a conversation. We cannot remove participants from a conversation using the JavaScript SDK, but we can via the REST API.

First, let’s use the REST API to remove a user from a conversation.

Path: /v1/{appId}/conversations/{conversationId}/participants/{userId}

Methods: DELETE

curl https://api.talkjs.com/v1/tG5nSzBD/conversations/order_391_fc/participants/user_924772 \
-H "Content-Type: application/json" \
-H "Authorization: Bearer sk_test_l9AmGDFY0rHHNM5IqCdpHzI2e2e0Jd7r" \
-X DELETE

When a user is removed from a conversation they will no longer be listed as a participant in the conversation and the user will not be able to see any new messages sent to the conversation. However, the conversation will still appear in their list of conversations in the Inbox UI, and when the user's conversations are fetched via the REST API.

Deleting a user like this will remove the access rights the user has to the conversation.

The user can be a participant in a conversation with 3 different access rights:

Full access ("ReadWrite"): The user is listed in the header, can read and write messages to other participants.
Read-only access ("Read"): The user is listed in the header and can only read, but cannot write messages.
No access anymore: The user used to be a participant but has since been removed with the DELETE call. The user is not listed in the header for other participants. The moment this user rejoins, they get all the messages that they might have missed. Until then, they see a static view of the conversation with only the messages that were exchanged until they were removed from the conversation.

You can find all of the conversations a user is a participant in by following this API reference guide.

Now that I have removed a user from a conversation, can I delete the entire user and their associated data? TalkJS currently does not have a way to delete user data. Instead, could use the edit endpoints to remove any personally identifiable information (PII) associated with the user. There is a script that you can use to automate this process which can be found in the TalkJS GitHub examples repository.

Ensuring the security of your TalkJS Integration

We will be exploring two of the main ways you can ensure the integrity of your user’s data and the security of your TalkJS integration as a whole. These two methods are:

Identity Verification
Disabling client-side conversation syncing

Let’s start by taking a closer look at Identity Verification.

Identity Verification

Identity Verification protects your user's data and prevents user impersonation. With Identity Verification, your backend sends a digital signature of the current user's id to TalkJS. This signature cannot normally be forged, so it proves that the current user identified to TalkJS is really the user logged in to your platform.

How does it work?

It works by generating a hex-encoded HMAC-SHA256 signature of the user's id. This is a message authentication scheme supported by all popular programming languages. If Identity Verification is enabled, TalkJS will block any requests without a valid signature.

Set up with just one line of code

First, set the signature property in the Talk.Session object to the HMAC-SHA256 hash of the current user id signed with your TalkJS secret key. This sounds complicated but usually, it can be done in one line of code that you can simply copy and paste. It may look like the following code snippet:

window.talkSession = new Talk.Session({
    appId: "tG5nSzBD",
    me: me,

    // this is the line that it's all about:
    signature: "<?= hash_hmac('sha256', strval($user->id), 'SECRET') ?>"
});

You can find the secret key in the dashboard. Important: Your secret key should never leak or appear in your frontend code and should be kept private.

Once you’ve tested it and confirmed it works you can enable Identity Verification in the dashboard, meaning any request without a valid signature will be blocked.

The TalkJS GitHub examples repository has code samples that demonstrate how to create a signature in multiple languages.

This concludes our section on Identity Verification and how to enable it in TalkJS. With this security measure in place, you have immediately improved the level of integrity of your users. Now let’s look at another method for improving security and access, disabling client-side conversation syncing.

Disabling client-side conversation syncing

If you exclusively use the REST API to create or update TalkJS users and conversations then you may want to disable the ability to create or update via the JavaScript SDK. In the TalkJS Dashboard you will see the two checkboxes under the security settings section that allow you to disable synchronization via the browser - one for synchronizing users, and one for synchronizing conversation data.

If user synchronization via the browser is disallowed, the following code will not work as it tries to add/update the data via the JavaScript SDK:

const me = new Talk.User({
    id: "123456",
    name: "Alice"
    email: "alice@example.com"
})

You can, however, reference a Talk.User using only their ID, which will use the details already stored for the user.

const me = new Talk.User(123456)

Similarly, if the option to disallow conversation synchronization via the browser is checked, the following will not work as it involves modifying the conversation data using the JavaScript SDK:

// Only if the conversation already exists, this will work
const conversation = session.getOrCreateConversation(Talk.oneOnOneId(me, other));

// Trying to set a participant via the SDK will cause an error
conversation.setParticipant(me);
conversation.setParticipant(other);

// Trying to set the conversation's attributes will also cause an error
conversation.setAttributes({
    subject: "Hello world!"
});

That is how you can successfully disable client-side conversation syncing in TalkJS

Banned from the conversation

With both Identity Verification and the option to disallow browser synchronization enabled, you can rest assured that any user you have removed from a conversation remains so, and be effectively banned from performing any further actions.

How to make a TalkJS chat inbox with filterable topics

Andrew — Fri, 30 Apr 2021 13:45:13 +0000

We will be creating a chat inbox with the TalkJS Chat API, that will allow you to programmatically filter by different topics, giving you complete control over which chat conversations get shown to a user. In TalkJS these filters are known as feed filters.

What is a TalkJS chat inbox?

The TalkJS Inbox is our most full-featured user interface component. It shows all the conversations you're part of on the left and the selected conversation on the right. You can create an Inbox through Session.createInbox and then call mount to show it. It's designed to act as the messaging center of your app, and it usually lives on its own page.

What are feed filters?

The left part of the Inbox is called the Feed. You can filter which conversations are shown based on multiple properties. For example, you can filter the list of conversations to only show conversations that are unread, conversations that the user can write in, or filter conversations by a custom parameter such as a category or topic.

See ConversationPredicate for all available filtering options.

Feed filter object structure

For our example, want to use the feed filter in conjunction with our custom attribute. The rules for using the optional custom property with setFeedFilter are as follows:

Only select conversations that have particular custom fields set to particular values.
Every key must correspond to a key in the custom conversation data that you set (by passing custom to ConversationBuilder.setAttributes).
It is not necessary for all conversations to have these keys.
Each value must be one of the following:
- A string, equal to "exists" or "!exists"
- A 2-element array of [operator, operand] structure. The operand must be either a string or an array of strings (for the oneOf operators). Valid operators are: "==", "!=", "oneOf", and "!oneOf".

For example, assuming you have set a category custom field on your conversations:

// only show conversations that have no category set:
{ custom: { category: "!exists" } }

// only show conversations of category "shoes"
{ custom: { category: ["==", "shoes"] } }

// only show conversations either category "shoes" or "sandals"
{ custom: { category: ["oneOf", ["shoes", "sandals"] ] } }

// only show conversations about shoes that are marked visible. 
// this assumes you also have a custom field called visibility 
{ custom: { category: ["==", "shoes"], visibility: ["==", "visible" ] } }

Examples of using feed filters

You can set the feed filter of an inbox by using the method inbox.setFeedFilter. Alternatively, you can pass in a feedFilter when creating the inbox.

For example, to hide read conversations, use:

inbox.setFeedFilter({ hasUnreadMessages: true }).

To show everything (ie. to disable the filter), use an empty object:

inbox.setFeedFilter({}).

To show only the conversations that have a custom attribute called category, where category is equal to shoes:

inbox.setFeedFilter({ custom: { category: ["==", "shoes"] } })

You can also use setFeedFilter in an event handler, or in response to when an input value is changed. This allows setFeedFilter to be used dynamically, in direct response to the user’s actions. For example:

const button = document.getElementById("filter-btn"):
    button.addEventListener("click", function() {
    inbox.setFeedFilter({custom: {category: ["==", "shoes"]}});
});

With this information regarding feed filters on hand, let us now create our inbox that can filter based on custom attributes.

Adding TalkJS to your app and Starting a Conversation

To demonstrate the use of feed filters we will be creating two different conversations.

The first conversation will take place between Alice and John and will be a generic question about a random product.

The second conversation will take place between Alice and Paul, where the conversation will be about shoes, a popular product at our imaginary store.

Use our comprehensive Getting Started guide to create your users and conversation data. Our scenario requires two additional steps that are not included in the Getting Started guide:

We need to create an additional user. You can copy and paste an existing user and simply change the id value
We will need to tweak the conversation data shown here to include our custom attribute, which will be used to filter our inbox.

const conversation = session.getOrCreateConversation(Talk.oneOnOneId(me, otherGeneric));
conversation.setAttributes({subject: "Generic Question"});
conversation.setParticipant(me);
conversation.setParticipant(otherGeneric);

const shoeConversation = session.getOrCreateConversation(Talk.oneOnOneId(me, otherShoes));
shoeConversation.setAttributes({subject: "Shoes Question"});
shoeConversation.setAttributes({custom:{ category: "shoes" } });
shoeConversation.setParticipant(me);
shoeConversation.setParticipant(otherShoes);

For this example, I have our imaginary user Alice set to me, John set to otherGeneric, and Paul set to otherShoes.

Note the use of the method, setAttributes, which we use to tag the shoesConversation with the key category: shoes. This is how we can set the topic of different conversations.

Now that we have our conversations set up along with the attribute that will be used in conjunction with our feed filter, we can move onto the next step.

Creating our Inbox that uses Feed Filters

Add the following code to your project, continuing on from our previous example.

const inbox = session.createInbox({selected: conversation});
inbox.mount(document.getElementById("talkjs-container"));

We have not introduced our feed filter yet. First, we will populate both conversations with some text.

The use of selected: conversation will launch our inbox with our first conversation selected, the conversation between me and otherGeneric (Alice and John). If we did not do this, we would be shown a message saying we have not started any conversations yet.

After adding the code above, run your program!

You should have the ability to add a message:

After adding a message to this conversation, go back to your code.

Replace const inbox = session.createInbox({selected: conversation});

with const inbox = session.createInbox({selected: shoeConversation});

Run your program again! As before you should be presented with a conversation, this time with Paul. As before, add some text to this conversation.

We now have two separate ongoing conversations. To see this in action, go back to your code and replace const inbox = session.createInbox({selected: shoeConversation}); with const inbox = session.createInbox();. You should now see both conversations with the option to switch between them.

We have now created our inbox and populated it with some conversations. Time to create our filter that will allow us to filter between our categories. Remember for this example we created the category of shoes and added it to our second conversation. With our custom attribute already set up, we can simply add the following line of code:

inbox.setFeedFilter({ custom: { category: ["==", "shoes"] } });

This makes our final code look like the following:

const inbox = session.createInbox();
inbox.setFeedFilter({ custom: { category: ["==", "shoes"] } });
inbox.mount(document.getElementById("talkjs-container"));

Our inbox will now only show conversations that have category of "shoes".

There you have it! The application of our filter was successful, we can now filter which conversations are shown in our inbox based on a specific topic or category.