DEV Community: TalkJS

How to create a product carousel for a TalkJS chat

Aswin Rajeev — Thu, 18 May 2023 19:32:25 +0000

In this tutorial, we are going to use HTMLPanels in TalkJS to create a product carousel. If you haven’t used HTMLPanels before, do check our official documentation. The app we are going to build uses the Sneaks-API as a backend server and displays sneakers and other products based on user input. We use HTMLPanels to display the retrieved products in a beautiful carousel. You can even click on the product name and visit the reseller website. Here’s a peek into what we’re going to build.

Prerequisites

Note that we are using the Sneaks-API as a reference backend server in this project. This could be any backend that connects to a database and houses product data. For example, you could be running a marketplace with hundreds of different products with specific categories and tags attached to each product. You can give your users information on how to use these filters in the chatbox itself and then when they type something in, use your APIs to retrieve products that satisfy the required criteria. To run this project, you need to have the following:

A working TalkJS account (free for development and testing)
A clone of the Sneaks-API project from GitHub

Running the Sneaks-API Server Locally

To run the Sneaks-API server locally, you must clone their Github repo. Then, go to index.js and uncomment these three lines:

app.listen(port, function () {
  console.log(`Sneaks app listening on port `, port);
});

Now, run the following commands: npm install and npm start from the same directory. The server should start on port 4000.

Setting up the Chatbox

Follow the TalkJS Getting Started guide to set up a working chat in minutes. The guide uses the Inbox UI mode, but this example uses a chatbox. Replace the following two lines:

var inbox = talkSession.createInbox({ selected: conversation });
  inbox.mount(document.getElementById('talkjs-container'));

With these three lines of code:

const chatbox = talkSession.createChatbox();
chatbox.select(conversation);
chatbox.mount(document.getElementById("talkjs-container"));

Right below this, we initialize our HTML Panel. The createHtmlPanel() function on the chatbox object returns a Promise, so we use await. The three parameters specify the location of the HTML file that contains our HTML panel, the height of the panel and whether to display it after initialization.

  const htmlPanel = await chatbox.createHtmlPanel({
    url: "./product-recommendations.html",
    height: 285,
    show: false,
  });

Now, we use the onSendMessage() function of the chatbox object to perform a function every time the user sends a message. We store the message and the conversation ID in two variables. First, we call the getProducts() method passing the message text. This returns an array of products which we pass as an argument along with the HTML panel and conversation ID to the addProductsToHTMLPanel() method. The first line hides the HTML panel if it's already visible.

  chatbox.onSendMessage(async function (data) {
    if(htmlPanel.isVisible())
      htmlPanel.hide();
    const messageText = data.message.text;
    const conversationId = data.conversation.id;
    const productData = await getProducts(messageText, htmlPanel);
    addProductsToHTMLPanel(productData, htmlPanel, conversationId);
  });

The HTMLPanel

The code for the HTMLPanel is mostly boilerplate. See below:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <div id="close-button">X</div>
    <div id="row"></div>
</body>
</html>

It contains two Bootstrap files and our very own stylesheet. The body contains two divs: one with the id close-button and one with the ID row. That’s it. Save it as product-recommendations.html in the same directory as the TalkJS JavaScript and HTML files. The rest of the product carousel is built by manipulating the DOM through JavaScript.

Getting Product Data

We have a new async function to get our product data every time the user types a message. In short, the function calls the Sneaks-API’s /search endpoint and returns the results. We only display 10 products in the carousel, so we slice the response to use only the first 10 products. Finally, we return the product array.

//Function to get products from Sneaks API
async function getProducts(messageText) {
  const product_url = `http://localhost:4000/search/${messageText}?count=10`;
  const product_url_options = {
    method: "GET",
  };


  try {
    const response = await fetch(product_url, product_url_options);
    const result = await response.json();
    const productData = result.slice(0, 10);

    return productData;


  } catch (error) {
    console.log(error);
  }
}

Adding Products to the HTMLPanel

This is the HTML template of the carousel that we are trying to achieve by manipulating the DOM.

<body>
  <div id="close-button">X</div>
  <div id="row">
    <div class="card">
      <img
        src=""
        class="card-image">
      <span class="brand-name"></span>
      <span class="price"></span>
      <a href="" target="_blank"></a>
    </div>
  </div>
</body>

The first if-block checks if the HTML panel DOM already has products. If it does, we clear them. Next, we have two lines of code that are very important. The first line waits for the HTML panel DOM to fully load. The next line waits for all assets (like images, scripts, etc) to fully load. We start manipulating the DOM only after this is complete.

await htmlPanel.DOMContentLoadedPromise;
await htmlPanel.windowLoadedPromise;

We start off by retrieving the <div> with the id row and iterating over the product array. For each product, we add a <div> tag, and within that we add an <img> tag, 2 <span> tags and one <a> tag with the classes mentioned above.

//Function to add products to the HTML panel
async function addProductsToHTMLPanel(productData, htmlPanel, conversationId){
  if (htmlPanel.window.document.getElementById("row").hasChildNodes()) {
    htmlPanel.window.document.getElementById("row").innerHTML = "";
  }

  await htmlPanel.DOMContentLoadedPromise;
  await htmlPanel.windowLoadedPromise;  

  const row = htmlPanel.window.document.getElementById("row");


  productData.forEach((product) => {
    const cardDiv = htmlPanel.window.document.createElement("div");
    cardDiv.classList.add("card");


    const brandName = htmlPanel.window.document.createElement("span");
    brandName.classList.add("brand-name");
    brandName.innerHTML = product.brand;


    const cardImageLink = htmlPanel.window.document.createElement("a");
    cardImageLink.href = product.resellLinks["stockX"];
    cardImageLink.target = "_blank";
    cardImageLink.innerHTML = product.shoeName;


    const cardImage = htmlPanel.window.document.createElement("img");
    cardImage.addEventListener("error", () => {
      console.log(cardImage.src);
      cardImage.src = "./static/no_image.png";
    });
    cardImage.src = product.thumbnail;
    cardImage.classList.add("card-image");


    const retailPrice = htmlPanel.window.document.createElement("span");
    retailPrice.classList.add("price");
    retailPrice.innerHTML = "RRP: $" + product.lowestResellPrice["stockX"];


    cardDiv.appendChild(cardImage);
    cardDiv.appendChild(brandName);
    cardDiv.appendChild(retailPrice);
    cardDiv.appendChild(cardImageLink);
    row.appendChild(cardDiv);
  });
  sendReply(conversationId);  
  const closeButton = htmlPanel.window.document.getElementById("close-button");
    closeButton.addEventListener("click", () => {
      htmlPanel.hide();
  });
  htmlPanel.show();
}

Each of these is populated with the data from the product array. For the close button, we add an event listener for the click event and call the htmlPanel.hide() method when clicked.

Posting a Reply

You might be wondering why we sent the conversation ID to the function. Well, that is to post a reply to the chat from our shopping assistant. Once the user types in a product name, the shopping assistant replies back with a positive affirmation. This is just to improve the useability of the chatbox itself. We use another function called sendReply() to achieve it.

//Function to post a success reply to the chat
async function sendReply(conversationId) {
  const data = [
    {
      text: "Awesome. Here are our top recommendations! If you want to view other products, simply type the name of the product you want.",
      sender: "654321",
      type: "UserMessage",
    },
  ];
  const postReplyURL = `http://localhost:4000/postSuccessReply/${conversationId}`;
  try {
    const response = await fetch(postReplyURL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    console.log(response);
  } catch (error) {
    console.log(error);
  }
}

This function calls the Sneaks-API backend server along with the conversation ID and the message data to POST. It doesn’t have an endpoint to resolve this, so we must add our own endpoint to achieve it.

Go to the Sneaks-API folder and navigate to routes/sneaks.routes.js. Add this import to the first line:

const bodyParser = require("body-parser");

At the very end, add a new route.

  //Posts a success reply to a conversation
  app.post(
    "/postSuccessReply/:conversationId", bodyParser.json(), (req, res) => {
      const conversationId = req.params.conversationId;
      sneaks.postSuccessReply(conversationId, req.body, (error, conversation) => {
        if (error) {
          console.log(error);
          res.send("No conversation found");
        } else {
          res.json(conversation);
        }
      });
    }
  );

Now, navigate to controllers/sneaks.controllers.js, and add the following:

  async postSuccessReply(conversationId, data) {
    const talkJSURL = `${process.env.TALKJS_URL}${process.env.TALKJS_APP_ID}/conversations/${conversationId}/messages`;
    const options = {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.SECRET_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    };

    try {
      const response = await fetch(talkJSURL, options);
      return response;
    } catch (error) {
      console.log(error);
    }
  }

We are using a .env file to store the TALKJS_URL, TALKJS_APP_ID and SECRET_KEY. You must retrieve the app ID and secret key from your dashboard and store it in the .env file. Here is how it should look:

TALKJS_APP_ID=Paste your app ID here
TALKJS_URL=https://api.talkjs.com/v1/
SECRET_KEY=Paste your secret key here

One thing to note here is that the Sneaks-API project uses an older version of Express that requires an additional dependency called body-parser to parse through the request and response. You must install this by executing the command npm install body-parser --save.

Adding our Styles

This is the last part of the tutorial. Create a file named styles.css and use the CSS below as a starting point. Place it in the same directory as the rest of the files.

#row {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}


.card {
  float: left;
  width: 40%;
  padding: 0.4rem;
  margin-bottom: 2rem;
  flex-basis: 33.333%;
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0.4rem 0.4rem;
  border: 2px solid rgb(230, 230, 230);
  border-radius: 8%;
  margin: 10px 4px;
  transition: .6s ease;
  background-color: rgb(233, 233, 233);
}


.card:hover {
  transform: scale(1.05);
}


.card-image {
  float: left;
  width: 7.3rem;
  height: 5.5rem;
  vertical-align: middle;
  border-radius: 8%;
  border: 2px solid rgb(216, 216, 216);
}


a {
  font-size: 85%;
  text-decoration: none;
  color: black;
}


.brand-name {
  text-align: left;
  text-transform: capitalize;
  font-weight: bold;
}


.price {
  font-size: 85%;
  text-decoration: none;
  color: black;
}


#close-button{
  padding: 0px 0.2rem;
  border-radius: 1.5rem;
  display: inline-block;
  margin-left: 0.4rem;
  cursor: pointer;
  color: red;
}

Conclusion

That's the end of our sort-of long tutorial. The great thing about TalkJS is how customizable it is right out of the box. It is built with this idea in mind, and you can achieve pretty much anything your use case or requirement demands. You can find the source code for this tutorial on our Github repository.

How to migrate from Sendbird to TalkJS

Aswin Rajeev — Thu, 16 Feb 2023 09:00:00 +0000

In this tutorial, we're going to show you how to export data from Sendbird and import it to TalkJS. This is really helpful if you are trying to switch platforms and onboard with TalkJS. In case you’re using some other chat API the steps would be very similar to this one. The basic flow is to get all the data using Sendbird’s API, make some data transformations so that TalkJS can identify it, and then finally invoke the TalkJS APIs with the transformed data. You can find the entire source code in our Github repository.

Exporting from Sendbird

Shown above is a screenshot of our group chat on Sendbird. They have three main entities that you must import to TalkJS. They are Users, Channels, and Messages. The table below shows the mapping between entities in Sendbird and TalkJS.

Sendbird	TalkJS
Users	Users
Channels	Conversations
Messages	Messages

There are two ways to export data from Sendbird. One is to use the export option from the dashboard, and the other is to use their Export APIs. We are going to use the dashboard here as it is quick and easy.

On your dashboard, navigate to the Data exports page and click on Request. Once there, select the entity you want to export (Channels, Messages, Users), its format, and time frame. Sendbird only allows you to select a date range of 7 days, so if you have older data, you need to perform multiple exports. Click on Request to submit the export request. On the Data exports page, you can see a new entry for the export. It goes through different statuses before becoming available to download. Click on Download and save it to your local storage.

Using the Sendbird Export API

You can also export data from Sendbird using their export REST API. The base URL for the export REST API is:

https://api-APPLICATION_ID.sendbird.com/v3/export/ENTITY_NAME

Replace APPLICATION_ID with your application ID from the Sendbird dashboard and ENTITY_NAME with users, messages or channels based on what you want to export. You also have to provide a custom header called Api-Token and provide it with the value from your Sendbird dashboard as well.

The request must be an HTTP POST and the body requires just two parameters, the start_ts and end_ts. Both of these are in UNIX milliseconds. Sendbird allows you to fetch messages within a 7-day timeframe only even when using the API, so if you have more data, you must submit multiple requests.

{
  "start_ts": "1673352000",
  "end_ts": "1673907200"
}

The default format is JSON, but if you want it in CSV just add the format attribute in the request body and set it to CSV. Don’t forget to add the Api-Token header when you submit each request. After submitting, you should get a response as shown below:

{
  "request_id": "x00000xx0000000",
  "status": "scheduled",
  "data_type": "users",
  "start_ts": 1673352000000,
  "end_ts": 1673907200000,
  "user_ids": [],
  "format": "json",
  "created_at": 1675207070000,
  "timezone": "UTC"
}

The status is scheduled and you can retrieve the file once it is complete by executing a GET request with the request_id as a query parameter. For this example, the request is as shown below:

https://api-APPLICATION_ID.sendbird.com/v3/export/users/x00000xx0000000

Once the status is done, you can download the data using the URL in the response. It has an expiry date of 7 days.

Importing to TalkJS

We have separated the import process into three different programs to make it easier to explain. The code in all three is similar to each other and you can combine them while using it in production. This is just to make the explanation a bit easier for the sake of this tutorial. We have three NodeJS applications that import users, conversations, and messages.

Importing Users

"use strict";
const fs = require("fs");
const axios = require("axios");

const instance = axios.create({
  baseURL: "https://api.talkjs.com",
  headers: {
    Authorization: "Bearer YOUR_SECRET_KEY_FROM_TALKJS_DASHBOARD",
    "Content-Type": "application/json",
  },
});

function importUsers() {
  const userDataRaw = fs.readFileSync("exported-data/active_users.json");
  const usersJson = JSON.parse(userDataRaw);
  const users = usersJson.active_users;
  for(let user of users){
    instance.put(`/v1/YOUR_APP_ID/users/${user.user_id}`, {
      name: user.nickname,
      email: [user.metadata.emailId],
      photoUrl: user.profile_url,
      id: user.user_id,
    })
  }
}
importUsers();

The code above shows how you can import users to TalkJS. We have used two modules in the program. The file system module (fs) reads the exported data and the axios module to make requests. After importing the modules, we create an instance of the axios module passing in the baseURL of the TalkJS API and the necessary headers.

You must obtain the secret key from your TalkJS dashboard to authenticate requests. Be sure to set the Content-Type as application/json, since TalkJS only supports that currently.

The next function is the actual import process. We read the JSON data and loop through each user. Then we call the endpoint with the HTTP PUT method passing in the parameters necessary to create a user. The id and email are the minimum parameters required. Sendbird doesn’t have an email address field for their users, but they do support the addition of custom fields. The metadata field contains the custom fields and we can map the email address from that to the email field for a TalkJS User.

Importing Conversations

function importConversations() {
  const channelsRaw = fs.readFileSync("exported-data/group_channels.json");
  const channelsJson = JSON.parse(channelsRaw);
  const channels = channelsJson.group_channels;
  for(let channel of channels){
    const channelParticipants = [];
    for (let member of channel.members) {
      channelParticipants.push(member.user_id);
    }
    instance.put(`/v1/YOUR_APP_ID/conversations/${channel.channel_url}`, {
      subject: channel.name,
      participants: channelParticipants,
    })
  }
}

importConversations();

The next program is to import conversations. Channels in Sendbird are analogous to Conversations in TalkJS. We read the JSON file just like before and store the data in a variable called channels. The participants of a conversation are stored in a variable called members in Sendbird. We retrieve this and store it in an array before invoking the API to create conversations in TalkJS. The channel’s URL from Sendbird is used as the unique Conversation ID in TalkJS.

Importing Messages

const messagesRaw = fs.readFileSync("exported-data/messages.json");
const messagesJson = JSON.parse(messagesRaw);
const messages = messagesJson.messages;

const uniqueConversations = [ ...new Set(messages.map((item) => item.channel_url))];

let conversationJsonArray = [];

for (let conversation of uniqueConversations) {
  let conversationJsonObj = {};
  conversationJsonObj[conversation] = [];
  conversationJsonArray.push(conversationJsonObj);
}

for(let conversation of conversationJsonArray) {
  for(let message of messages){
    if(Object.keys(conversation)[0] === message.channel_url){
      let messageObj = {};
      messageObj.text = message.message,
      messageObj.sender = message.user.user_id,
      messageObj.type = message.type === "MESG" ? "UserMessage" : "SystemMessage",
      messageObj.timestamp = message.created_at,
      messageObj.readBy = []
      conversation[message.channel_url].push(messageObj);
    }
  }
}

This part is a little different from the other two. You can use the import endpoint in TalkJS to bulk import messages from conversations. But before that, you must prepare your data. The structure of the data is as shown below.

[
  {
    "converstationId": [
      { message_1 }, { message_2 }, { message_3 }
    ]
  },
  {
    "converstationId": [
      { message_1 }, { message_2 }, { message_3 }
  }
]

The first three lines of code are similar to the previous programs where we read the exported data and store it in a constant. Then, we create a constant called uniqueConversations to store the unique IDs of the Channels from Sendbird. We use a Set because it only stores unique values.

In the next for loop, we create a JSON array containing the conversation IDs as keys. The JSON array currently looks as shown below:

[
  {
    "converstationId": []
  },
  {
    "converstationId": []
  }
]

The last part consists of two for loops. One that iterates over the JSON array shown above and the other that iterates over our messages. Then, we check if each message’s conversation ID is equal to the key of the object we are currently in. If they match, we populate it with the required values for TalkJS. The timestamp field helps in keeping the order of the messages intact when importing it from Sendbird to TalkJS. We have used the message.type MESG from Sendbird to map it to the UserMessage type in TalkJS.

function importMessages(conversationJsonArray) {
  for (let conversation of conversationJsonArray) {
    instance.post(`/v1/tAU5JKLC/import/conversations/${Object.keys(conversation)[0]}/messages`, [...conversation[Object.keys(conversation)[0]]])
  }
}
importMessages(conversationJsonArray);

Finally, we invoke the importMessages function passing in the constructed JSON array. We iterate through each of the conversation and pass the entire messages array inside it to the API.

Opening the application in TalkJS

Now, we can create an application in TalkJS and then view the imported data. You can also go to your TalkJS dashboard and navigate to Activity → Conversation History and then select the newly created conversation. It shows you the users and chats in a TalkJS-style UI.

In our sample application, we are going to add their user IDs and names to set them up quickly. When using it in production, you can use the TalkJS APIs to retrieve users, conversations, messages, etc. There are three available UI modes for TalkJS. One is the inbox, the second is the chatbox and the last one is the popup widget. You can read more about them here. We are using the chatbox widget in this example. You can read the Getting Started section to quickly set up your app in TalkJS. Then copy the code below in your script file to retrieve the conversation we exported from Sendbird.

Talk.ready.then(function () {
  var me = new Talk.User({
    id: "523915",
    name: "Mathew Jacob"
  });
  var other1 = new Talk.User({
    id: "523916",
    name: "Morgan Stanley"
  });
  var other2 = new Talk.User({
    id: "523917",
    name: "Shane Riley"
  });
  var other3 = new Talk.User({
    id: "523918",
    name: "Clyde Howell"
  });
  window.talkSession = new Talk.Session({
    appId: "YOUR_APP_ID",
    me: me
  }); 
var conversation = window.talkSession.getOrCreateConversation(
    "SENDBIRD_CONVERSATION_ID"
  );
  conversation.setParticipant(me);
  conversation.setParticipant(other1);
  conversation.setParticipant(other2);
  conversation.setParticipant(other3); 
var chatbox = window.talkSession.createChatbox(conversation);
  chatbox.mount(document.getElementById("talkjs-container"));
});

As mentioned earlier, you may want to use an API to retrieve the names and IDs of users. But in this example, we have hardcoded them based on the values we imported. Once all this is set up, you should have a chatbox UI on your browser with the exported chats from Sendbird. The entire source code for this example is available in our Github repository.

Reporting messages in TalkJS

Aswin Rajeev — Fri, 01 Jul 2022 16:51:25 +0000

TalkJS now supports adding custom actions to chat messages. This opens up possibilities to add support for actions like reporting, deleting, or liking a message. In this how-to, we’ll set up a custom action to report a message in TalkJS using this new feature. Note that the feature by itself does not report a message but provides you with the custom action and its handler. You must invoke a service in the backend that does the reporting functionality based on your business requirements.

Setting up a Report Action

To add a report action, you must log in to your TalkJS account. Click on Roles from the top navbar and select the role for which you want to add the action. For this how-to, we are adding it to the default role. Scroll down to the Custom actions section and enter the name as report and label as Report. The name you give the action will be included in the event that is triggered when the user clicks the action, whereas the label will be shown to the user. In the “Which messages” dropdown, select All, and click on Add action.

The action should look as shown in the image above. Click Save all roles to add the action to the role. As mentioned, the action is available across all roles once you create it, and you must disable them according to your requirements. To disable an action for a role, select the None option from the Which messages dropdown.

Handling the Action

Now that we’ve set up the action, we’ll want to run some code when the user clicks it. To add an event handler, you use the chatbox object (or the inbox or popup objects), and its onCustomMessageAction method. When the user clicks the action’s menu item, our callback is called with an event object containing details about the message. For this how-to, we’ll send a request with this information to the backend.

  chatbox.onCustomMessageAction("report", (event) => {
    let reportAction = {
      id: event.message.id,
      message: event.message.body,
      senderId: event.message.senderId,
      senderName: event.message.sender.name,
      timestamp: event.message.timestamp,
    };
    console.log(event);
    fetch("http://127.0.0.1:3000/reportMessage", {
      method: "POST",
      body: reportAction,
    });
  });

The Backend

We are not going to delve into too many details regarding the backend since it varies according to various requirements. To get you started, you can set up a Node server, listening for POST requests. For the sake of testing it out, you can use the nodemailer module and a fake SMTP server like MailTrap to send and receive emails. If a message is reported, it is best to send it to an administrator who can then review the contents of the message and who it was sent from. Further decisions can be based on company policy and investigations.

Next Steps

After using a fake SMTP server and the details we sent from the frontend, an administrator can receive something like this. Apart from a simple email, you can add a queue to which all the reported messages come in, and the administrator can look at them individually. You can also give capabilities like banning users and deleting them if found to be fraudulent, spam, or something else altogether. Again, all of this depends on the backend system you build. We can’t wait to see what you guys come up with our custom actions.

The unreasonable effectiveness of SDK design interview questions

Egbert Teeselink — Wed, 23 Mar 2022 10:25:58 +0000

Editor's note: this was originally posted as a Twitter thread by TalkJS co-founder Egbert. We iterate on our hiring process all the time so it may be different when you read this.

Our current dev interviewing process is the most effective one I've ever seen, and I'm very happy about it.

I think we mostly stumbled upon it by accident though, so figured it might be worth sharing.

tl;dr: we do a collaborative SDK design session and we learn so much

Text chat interviewing

First, as a fully remote company, we prefer text over calling. That's why only the first interview is a call, and the rest is 100% text-based. We stole that from Automattic (ie the WordPress people, who were remote a decade before it was hip).

The intro call is mostly to sell the job to the applicant, to be honest. Think ~20 minutes about our working culture (unusually high-trust, high-flexibility) and ~10 minutes talking about code (eg "teach me a feature of our favorite language"). ~1/3rd pass this round.

The 2nd round is a ~2-hour Slack interview. It's 100% text chat, and it feels a lot like our regular work chats. After a 30 minute non-technical talk about goals and dreams, we get to the technical meat, an SDK design discussion.

SDK design combines a lot of skills

We're an API company. For us, asking SDK design questions is natural - we nearly always have some open design challenges about to-be-shipped features so that's great talking material.
But we've been stunned much we learn from applicants. Doing SDK design during an interview shows:

Can they describe an idea?
Attention to detail, eg idiomatic code style etc
Can they code? (example code, typespecs, etc)
Can they collaborate?
Can they empathize with other programmers? (our customers)

That list touches a remarkably large part of what we care about in a programmer! Even if you're going to end up scaling our infrastructure and not build public SDKs.

SDK design skill turns out to be a great predictor for architecture skill, communication, etc - the best we've found.

We do ask a tiny prep exercise to prepare for this round, mostly to force applicants to read through our docs so we don't spend interview time explaining TalkJS concepts. It takes applicants about 30 minutes.

No studying algorithm books
No whiteboard quizzes
No leetcode

We started doing this systematically when we began to notice that we always had much higher confidence about our yes/no decisions when we had happened to ask SDK design questions. It just covered so much ground in such little time. It also meant we could cut out a third round.

It saves time for the applicant and for us. The thought of multi-day interview processes creeps me out - how does anybody ship any work if you do that?

That's it! Do you know any similarly powerful interview subjects? I'm pretty happy rn but I bet this can be way better still.

TalkJS is a Chat API with prebuilt UI components that lets you make a chat feature in no-time. Want to come build great SDKs and APIs? We're hiring!

How to add chat into a NodeJS app with TalkJS

Aswin Rajeev — Wed, 09 Mar 2022 09:02:43 +0000

This article is another entry in our series about integrating the TalkJS chat API with different backends. Today, it is all about shipping a full-fledged chat feature for any NodeJS app. Similar to the previous articles you can find here, we set up a NodeJS server that consists of specific endpoints to get user data as well as store user data and then use this to initialize a chat. The chat uses the same data as the previous articles, so it is very easy to relate. The entire source code is always available on GitHub.

NOTE: This is a barebones example of integration and is to help you get started. When using in a production setting, ensure that users are authenticated and authorized to use the services. We are using an embedded database, which is only for the scope of this tutorial. For production scenarios, you must use a full-fledged database.

Installing the dependencies

To create an empty npm project, use the command npm init -y. The argument -y sets defaults for the parameters inside package.json. Once created, you can start downloading the dependencies. Make sure you add the parameter "type":"module" inside the package.json file to use ES6 style import statements.

We have 4 dependencies that we need for this demo project. They are cors, body-parser, express, lowdb. Express is our go-to choice for creating APIs with NodeJS and body-parser automatically parses your request so that it becomes easy to handle them in our code. LowDB is an embedded database, similar to the ones we used in our Spring Boot and Flask tutorials, but here it is stored in a JSON file. CORS is to enable cross-origin resource sharing.

import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
import { LowSync, JSONFileSync } from 'lowdb';

After installing them, create a file called server.js and import them into the application.

LowDB – Easy to use, embedded database for JavaScript

LowDB is an open-source embedded database for JavaScript, and their GitHub page has very comprehensive documentation on how to get started with examples.

const adapter = new JSONFileSync('file.json');
const db = new LowSync(adapter);
db.read();
db.data ||= { users: [] };

To create a simple JSON database, we use the JSONFileSync function and pass in the required filename. If it is not present, LowDB creates it for you. We then pass that to the LowSync method to get an instance of the database in memory. Note that the Sync in the functions means synchronous. There are also asynchronous variants of these functions. By default, we create an empty array of users inside the database.

Creating the APIs

Before creating the APIs, we must initialize our Express application and configure body-parser. For that, we use the below code.

const app = express();
const port = 3000;
app.use(cors());

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

Once that is set, we are good to start creating our APIs. As usual, we have one API for creating the user and one for getting the user data to our frontend.

Create User API

Creating a user is a POST request. We receive all the parameters from the request body and set it to variables. To make it shorter, we can directly assign them when we push it to the database as well.

app.post('/createUser', (req, res) => {
    const id = req.body.id;
    const name = req.body.name;
    const email = req.body.email;
    const photoUrl = req.body.photoUrl;
    const role = req.body.role;
    console.log(id, name, email, photoUrl, role);
    db.data.users.push({
        id: id,
        name: name,
        email: email,
        photoUrl: photoUrl,
        role: role,
    });
    db.write();
    res.status(200).send('User created successfully');
});

Once all the data is ready, we use the statement, db.data.users.push and pass in an object with the values. This does not persist in the file, so we finally need to use the db.write() method.

Get User API

This is a much easier API to get the value of the user. We pass in the id in the URL and then retrieve the record from our JSON file with the id. We use the find method and pass in an arrow function to go through each entry and retrieve the record.

app.get('/getUser/:id', (req, res) => {
    const id = req.params.id;
    let record = db.data.users.find(p => p.id === id);
    if (!record) {
        console.log("No data found!");
    } else {
        console.log("== Record found ==");
        console.log(record);
        res.status(200).send(record);
    }
});

Once retrieved, we send the record to the frontend, where it displays the user information in the chat.

Conclusion

We use the same code as we did for the previous articles for the front end. The only change required is for the getUser API that needs the userId in the following format.

http://127.0.0.1:3000/getUser/1 instead of http://127.0.0.1:8080/getUser?id=1

Once you make that change and deploy the frontend, it should pull the information from the server as long as the data is present. To add data, you can use the /createUser API. You can check out the entire source code at GitHub. Until the next tutorial, happy coding!

How to build chat into a Flask App with a chat API

Aswin Rajeev — Fri, 04 Feb 2022 09:50:48 +0000

Last time, we took a look at adding chat to a Spring Boot app with the help of the TalkJS Chat API. This time, we will be reusing the same frontend code to add chat to a Flask app written in Python. This app is more or less similar to the previous one in terms of experience, but it uses Python. The same rules apply to this one as well. Ensure that you don’t replicate a similar setup for production since we are not implementing any authentication or authorization. This is a simpler example that showcases the integration between the two. The entire source code is available on GitHub.

Setting up a Python-Flask Application

You can install Python from their official website, but if you’re on Windows, the Windows Store also has Python. You can find it here. There are two additional dependencies that you need. One is flask and the other is flask_cors. You can install these using pip.

pip install -U flask-cors
pip install Flask

Note that flask_cors is only needed for allowing requests from the same host. We are also using sqlite3, but it comes out-of-the-box with Python.

Setting up the `USERS` table in SQLite

To setup a table in sqlite3 is very straightforward. You open a connection to the database. Then, execute a normal SQL statement using the execute() method on the connection. Note that we must use the execute() method for every statement execution.

conn = sqlite3.connect('test.db')
conn.execute('''CREATE TABLE IF NOT EXISTS USERS
        (ID INT PRIMARY KEY NOT NULL,
        DP CHAR(100) NOT NULL,
        EMAIL CHAR(100) NOT NULL,
        NAME CHAR(50) NOT NULL,
        ROLE CHAR(20) NOT NULL);''')
print("Table created successfully");
conn.close()

Once complete, close the database connection. Now that we have our table, we must set up the endpoints to insert users and retrieve them to the frontend.

Setting up the endpoints

Similar to the Spring Boot app, we have two endpoints, createUser and getUser. The first one is to create the user so that we can use them in the frontend, and the second one is to retrieve the user. We have given them a role attribute so that we can even theme the chat depending on their role in the future when they log in.

@app.route('/createUser/', methods=['POST'])
def createUser():
    conn = sqlite3.connect('test.db')
    requestData = request.json
    id = requestData['id']
    name = requestData['name']
    dp = requestData['dp']
    email = requestData['email']
    role = requestData['role']
    conn.execute("INSERT INTO USERS (ID,DP,EMAIL,NAME,ROLE) VALUES (?,?,?,?,?)",(id, dp, email, name, role));
    conn.commit()
    conn.close()
    return "User Created", 200

The first line denotes the endpoint and the methods you can use. Here, it is just POST. We open a connection to our test.db and retrieve the data from the request using Flask’s inbuilt methods. Once we have all the fields from the request, we execute an INSERT statement. Once the execution is complete, we commit and close the connection and return a 200 response with the user object.

The next endpoint is to retrieve the user. This API fetches the user based on the user id that is sent from the frontend. We use Flask’s inbuilt args method to get the query params and then retrieve the id from it.

@app.route('/getUser/', methods=['GET'])
def getUser():
    requestData = request.args
    id = requestData['id']
    conn = sqlite3.connect('test.db')
    cursor = conn.execute("SELECT * from USERS WHERE ID = ?", id)
    user = {
    'id': "",
    'name': "",
    'dp': "",
    'email': "",
    'role': ""
    }
    for row in cursor:
    user['id'] = row[0]
    user['dp'] = row[1]
    user['email'] = row[2]
    user['name'] = row[3]
    user['role'] = row[4]
    conn.close()
    response = jsonify(user)
    return response, 200

Once we get the id, we open up a connection to the database, and execute a SELECT statement passing the id. The difference here is that we get a cursor returned from the SELECT statement and we must query each row in it to get the actual data. There’s an empty user object to which we will append the retrieved data and once that’s done, we return it to the frontend with a 200 response.

Integrating with the frontend application

Refer to our previous article here to set up the frontend application. The source code is available in this GitHub repository. You can also look at our Getting Started guide to set up an application quickly. Once you have that setup, you should have a fully running chat application that retrieves user details from a Flask API and a database.

How to customize email notifications in TalkJS

Tawanda — Wed, 19 Jan 2022 07:18:26 +0000

TalkJS is a chat API that supports all types of notifications, including email, desktop, SMS, and push notifications. In this guide, we will look into customizing the email body of the TalkJS email notifications.

Customizing TalkJS Email Notifications

TalkJS supports email notifications as a method to notify users of missing conversations when they are offline. The only requirement to facilitate this functionality is to have at least a single email associated with the user and enable the email notification option for the assigned role. According to TalkJS, these emails will get dispatched only if the following conditions are met.

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

Users can create an unlimited number of roles with customized emails and use those roles to send different types of emails to different user groups. The only limitation is the styles of legacy themes automatically getting applied for email notifications when they are used as the theme of the chat.

How to Change the Email Body

Now let's look at how to customize the email body. First, we need to create a role, modify the email body and then assign the created role to a user. Let's assume that we are customizing email notifications for a group chat in an educational platform that connects students and teachers.

How to create a Role

Roles allow developers to change the behavior of TalkJS to different users. These roles can be created in the Roles section of the TalkJS dashboard. Simply go to the Roles section and click on the “Create new role” button to create a new role.

Then these roles can be assigned to each user as shown below;

var student1 = new Talk.User({
    id: '555551',
    name: 'Dean',
    email: 'dean@gmail.com',
    photoUrl: 'https://i.ibb.co/rGHFSqL/D.png',
    role: 'student'
});

var student2 = new Talk.User({
    id: '555552',
    name: 'Mary',
    email: 'mary@gmail.com',
    photoUrl: 'https://i.ibb.co/cxwVNLW/M.png',
    role: 'student'
});

Changing Email Body

Within the role configurations, you can find the Email settings section, which contains all the available options to customize email notifications. Here, the HTML and Text templates are used to change the email body. HTML template will only appear to email clients with full HTML support. Otherwise, it will default to the Text template.

Before changing the email body, let’s see how the default HTML template appears to a user.

In the Email settings section, you can get the available fields from TalkJS that can be included in the email body using a limited Marco syntax.

Next, let’s do some simple modifications to see if the changes will get applied to the template. We will change the message content by adding a heading and two horizontal lines to separate the message.

<div>
    <h3>Student Message Room</h3>
    Hi <i>{{recipient.name}}</i>, <br/>
    <br/>
    {{sender.name}} has messaged you on {{conversation.subject}}:<br/>
    <br/>
    <p><h5>Messages</h5></p>
    <hr/>
    {{messages.all}}
    <br/>
    <hr/>
    <br/>
    <a href="https://example.com/inbox">Click here to join the chat.</a>
    <br/>
    <br/>
    On behalf of {{sender.name}},<br/>
    <br/>
</div>

Now the students will receive email notifications in the new format whenever they are offline.

Customized Email Format:

Advanced Email Body Customization

Now let's customize the email body. The easiest way to create a custom email template is to utilize a tool such as Unlayer. It enables users to quickly create an email template that will be fully compatible with all email clients and browsers. Let's create an email template using Unlayer as shown below and add the generated code to the HTML template section.

Unlayer Email Template:

Now we can simply add this temple to the HTML template section and save the role.

Now, the user will be shown the newly customized format when an email is triggered. That’s it, and you have successfully customized the email body of the notification email.

How to add chat into a Spring Boot App

Tawanda — Mon, 10 Jan 2022 08:24:12 +0000

In today’s article, we will be taking a slightly different direction than our previous ones. We will not be theming a TalkJS chat but integrating it with a Spring Boot application to retrieve user data. For the implementation, we will model an agent and a bunch of customers. This data will then be retrieved using a REST API from the Spring Boot application. For the sake of simplicity, we will use the in-memory H2 database, but you can expand it to other popular database options. You can find the entire source code for this project on GitHub.

Note

This tutorial does not implement Spring Security for authentication and authorization. Still, in a production scenario, the users must register themselves, and the passwords must be stored in a hashed format. Only authenticated users must be allowed to start the chat with the agent. On the other hand, the agents must authenticate themselves before attending to a customer as well.

Setting up the Spring Boot Application

To set up the Spring Boot application, the easiest way is to have Spring Tool Suite. You can install it from here. Launch the application and create a new Spring Starter project. The wizard will ask for a name and all the dependencies that you want to add. For this application, we need the following:

Spring Data JPA
Spring Web
H2 Database

Once you click Finish, it will set up a Spring Boot application that is ready to run. Open, application.properties present inside src/main/resources. Add the following lines to set up the H2 in-memory database.

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.H2Dialect
spring.jpa.hibernate.ddl-auto= update
spring.h2.console.enabled=true

This will configure the H2 database and also enable the console to visually view and manage the data present inside the database.

Creating the Model and Repository

We will now model the user and create a repository to save and retrieve users. Spring Boot provides an easy-to-use interface JpaRepository, that already has most of the methods we need. The model class is shown below. We use the @Entity annotation to mark the class as an entity that will be present in a database. The @Table annotation denotes the name of the table.

@Entity
@Table(name = "users")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
    @Column(name = "name")
    private String name;
    @Column(name = "dp")
    private String dp;
    @Column(name = "email")
    private String email;
    @Column(name = "role")
    private String role;
}

There are five fields for the user. The id is automatically generated by Hibernate which is used within Spring Boot for Object-Relational Mapping (ORM). The @Column annotation denotes each column's name within the database. We also have a constructor, getters, and setters for the above class, but it is not shown above since they are auto-generated.

The repository interface is by far the smallest in the project. We just need to have an empty interface that implements the JpaRepository. This lets us use all the methods that come with it.

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}

Creating the Controller

Since this is a web application consisting of APIs, we need to create a controller. We have two endpoints. One is/createUser and the other is /getUser. The following code outlines the controller.

@CrossOrigin("*")
@RestController
public class UserController {

    @Autowired
    UserRepository userRepository;

    @PostMapping(value = "/createUser")
    public ResponseEntity<User> createUser(@RequestBody User user) {
    return new ResponseEntity<>(userRepository.save(user), HttpStatus.OK);
    }

    @GetMapping(value = "/getUser")
    public ResponseEntity<User> getUser(@RequestParam(required = true) Long userId) {
    return new ResponseEntity<>(userRepository.findById(userId).get(), HttpStatus.OK);
    }

}

The @Autowired annotation is used for dependency injection. We have the @GetMapping annotation to denote a GET request and a @PostMappingannotation to denote a POST request. To create a user, we use the save() method present inside the userRepository. Note that we don't check for errors here since there is no scope for variability here. All the data is pre-defined. In a production scenario, you must ensure that there are proper error checks. The @CrossOrigins annotation is present because we are making API calls within the localhost.

Creating users using the API and verifying them

Use the following payload to create an agent and a user. The application will be running on localhost:8080. You can use Postman to perform the API calls.

URL: localhost:8080/createUser TYPE: POST

{
    "name":"Tom Hardy",
    "dp": "https://randomuser.me/api/portraits/men/1.jpg",
    "email":"tom.hardy@operator.com",
    "role":"AGENT"
}

{
    "name":"John Morrison",
    "dp": "https://randomuser.me/api/portraits/men/62.jpg",
    "email":"john.morrison@operator.com",
    "role":"USER"
}

You should get a 200 OK response and the created user for both the API calls. Since we enabled the H2 console, we can also view the database contents at localhost:8080/h2-console.

Setting up the TalkJS application

Set up a TalkJS Inbox using our Getting Started Guide. In the script file, make changes to the code as follows.

(
    async function() {
    await Talk.ready;
    let agent = await getAgent();
    let user = await getUser();

    const session = new Talk.Session({
        appId: 'YOUR_APP_ID_HERE',
        me: user,
    });
    var conversation = session.getOrCreateConversation(Talk.oneOnOneId(user, agent));

    conversation.setAttributes({
        welcomeMessages: ["You can start typing your message here and one of our agents will be with you shortly.", "Please do not divulge any of your personal information."]
    })
    conversation.setParticipant(user);
    conversation.setParticipant(agent);

    var inbox = session.createInbox(conversation);
    inbox.mount(document.getElementById("talkjs-container"));
}());

Note that we use two asynchronous functions here, getAgent() and getUser() to retrieve the agent and user data. Add the following functions above the existing code inside the script file.

const getAgent = async () => {
    const response = await fetch('http://localhost:8080/getUser?userId=1');
    const data = await response.json();
    let agent = new Talk.User({
        id: data.id,
        name: data.name,
        photoUrl: data.dp,
        email: data.email,
        role: data.role
    });
    return agent;
}
const getUser = async () => {
    const response = await fetch('http://localhost:8080/getUser?userId=2');
    const data = await response.json();
    let user = new Talk.User({
        id: data.id,
        name: data.name,
        photoUrl: data.dp,
        email: data.email,
        role: data.role
    });
    return user;
}

Once we receive the user and agent data from our database through the API calls, we create Talk.User objects and map them to it. This will allow us to start a conversation with the users retrieved from the database.

Conclusion

We have successfully integrated a Spring Boot application with TalkJS and retrieved user data from an in-memory database through API calls. Even though this is a very simple example that showcases the capabilities of TalkJS, you can expand it to any production scenario by implementing authentication, authorization, role-based dashboards, and more. The entire source code for this project is available on GitHub.

How to add chat into a VUE.JS app with TalkJS chat API

Omer Farooq — Mon, 20 Dec 2021 12:48:33 +0000

Adding a live chat feature to a web app is often complex. However, with recent developments in the web dev community and the inception of TalkJS, this formidable task has become a breeze. TalkJS is a turnkey solution for adding live chat to any web app. It provides an ever-customizable user interface, flexible notifications, and a powerful chat API out of the box. In this tutorial, we will look at how we can add a chat to an existing vue.js application in a matter of minutes.

Application Overview

A Great University runs our fictitious application. It allows their students to take live lectures, but it lacks the ability to chat with professors and amongst themselves in real-time. Currently, the web app consists of a landing page where the student’s log in with their university credentials (Name, Email and Password). Once they log in, they are taken to the live lecture. For simplicity’s sake, we have assumed that there’s only one live lecture, which in our case is just a YouTube video, and that all the students are already authenticated. The currentUser object we will use throughout the tutorial will contain data that we’ve received from the backend after the login and auth process. Our focus is on integrating a chat into an existing Vue app and not creating a whole app from scratch.

Adding TalkJS to our application

We begin by adding TalkJS to our application. This can be done in one of two ways.
If you use the Node Package Manager run the following command, it will save it as a dependency in the packages.json:

> npm install talkjs –save

If you use Yarn Package Manager, run the following command:

> yarn add talkjs

Now that you have TalkJS installed, you need to signup on their website and register your application. This is a very simple process, at the end of which you will receive your APPID. Keep hold of this, it’s very important, and we will use this later.

Creating the chatbox Vue Component

Every Vue component is housed in its own .vue file. In this case, here are the steps to be followed

We will create a component called MessageBox in MessageBox.vue.
Under the template, we create a div, as shown in the image below.
The div has a ref attribute set to “talkjs-container” we will use this to mount the actual chat box in this div later.
The tag is only used as a placeholder until the chatbox loads. We have added some styling, but that is left to the reader’s discretion.

<template>
  <div
    class="col-xs-4"
    id="talkjs-container"
    ref="talkjs-container"
    style="width: 90%; margin-top: 10px; height: 900px">
    <i>Loading chat...</i>
  </div>
</template>

Below is a template that is added through a script tag. This will contain all the setup and logic for the TalkJS chatbox. Here the first thing we need to do is import TalkJS. To do that, add the following at the start of the script section:

import Talk from “talkjs”;

Next, we export this component and name it MessageBox. This component will accept one prop of type object that contains the user’s information.
It has two variables that it needs to maintain, so we add conversation and chatbox to the data function.

<script>
import Talk from "talkjs";
export default {
  name: "MessageBox",
  data() {
    return {
      conversation: null,
      chatbox: null,
    };
  },
  props: {
    currentUser: {
      type: Object,
      required: true,
    },
  },

javascript
Our chatbox will render once our MessageBox component has mounted, and as such, all chatbox logic will have to run inside the mounted lifecycle function that Vue provides. The mounted function will be defined just below our props object, and it will look something like this.

Creating the Users

The Talk object we imported from TalkJS is promise-based. Hence we call the ready function and then add our logic as a call back to the .then() function. Here we create our use through Talk.User() function. It accepts a JSONobject with the ID, Name, Email, photo URL of our user, and a role we set to default. For the sake of demonstration, we have also added another dummy user Sebastian in the other variable. In your application, you would add your own users using their data from your database.

mounted() {
    Talk.ready.then(() => {
      // creating our user
      var me = new Talk.User({
        id: this.currentUser.id,
        name: this.currentUser.name,
        email: this.currentUser.email,
        photoUrl: "https://randomuser.me/api/portraits/men/83.jpg",
        role: "default",
      });

      // creating other users
      var other = new Talk.User({
        id: "654321",
        name: "Sebastian",
        email: "Sebastian@example.com",
        photoUrl: "https://randomuser.me/api/portraits/men/69.jpg",
        welcomeMessage: "Hey, how can I help?",
        role: "default",
      });

Establishing a TalkJS Session

There can’t be a chat if there’s no chat session, hence we establish a talk session and add it to our browser’s window’s instance.

 // establishing a new session if one doesn't already exists
      if (!window.talkSession) {
        window.talkSession = new Talk.Session({
          appId: "YOU_APP_ID",
          me: me,
        });
      }

The APPID you found on your dashboard will be used here to establish a connection if one doesn’t already exist. This connection will let us join chats and start conversations. You also specify the user trying to establish the connection by passing the current user as a theme object.

Creating a New or Joining an Existing Conversation

Next, we join or start an existing conversation. Each conversation on TalkJS has a unique id. These ids can be stored in your database and used when joining group conversations or a conversation with someone. For our demonstration we will hard code it to 1001, all the students joining this lecture will be added to the conversation with the ID 1001.

// connecting to a new or already existing conversation
      this.conversation = window.talkSession.getOrCreateConversation("1001");
      this.conversation.setAttributes({ subject: "Computational Theory 101" });

      // adding participants
      this.conversation.setParticipant(me);
      this.conversation.setParticipant(other);

The getOrCreateConversation() function will fetch the conversation if it already exists or create a new instance. Note that we are initializing the conversation variable we defined earlier, this is so we can access the conversation object later if necessary. Once the conversation has been initialized, we add its participants, and naturally, it is going to be the two users, me and others we created beforehand.

Creating an Inbox and Mounting it

Like a usual conversation, we will initializethe inbox variable we defined above using the createInbox function of our talkSession. We will pass our conversation as the focus of this inbox by setting selected to our conversation.

// creating the actual inbox/chatbox
      this.inbox = window.talkSession.createInbox({
        selected: this.conversation,
      });

Last but not the least, we will mount our inbox to the div we added a ref to in the template section. But before this, we need to ensure that the ref we are going to point to has been initialized. Which is why we will use Vue’s $nextTick() function. It will ensure that the following code runs only after the required div, and ref are rendered and are ready to be addressed. In order to mount the inbox, we just call the mount function on the inbox object and pass this ref of our div, which we set to “talkjs-container”.

The Result

With this we’ve successfully added a chat box to our application. This group chat supports up to 20 users in the basic plan and up to 40 in the growth plan; however, more refinements will drastically increase these limits, such as the rolling enterprise plan. The chatbox would look something like this. This is the default design, and you can change it endlessly from the TalkJS dashboard.

The below gif demonstrates the functional design of the Chatbox.

How to create a group chat with a chat API

Tawanda — Tue, 23 Nov 2021 14:41:13 +0000

Today, we'll show you how to create a group chat feature and embed it into your website or app by using the TalkJS Chat API. The API works with any platform or programming language so you can be sure it will work well with your stack.

Setting up the group chat

We will try to build a group chat for this tutorial that will allow students to discuss homework with the teacher.

Before we start work on the group chat, let's create a simple one-to-one chat following the Getting Started guide.

Your first chat app will look as above.

But this is a 1-on-1 chat. So we need to make some changes to the code to create a group chat.

The first step is to update your code by adding new users as below. We will add one teacher and two students as our users.

Don't forget to enter your own *appId * you can find in the TalkJS Dashboard.


Talk.ready.then(function() {
    var teacher = new Talk.User({
        id: "123456",
        name: "Alice",
        email: "alice@example.com",
        photoUrl:'https://images.pexels.com/photos/3671083/pexels-photo-3671083.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
    });

    window.talkSession = new Talk.Session({
        appId: \"YOUR_APP_ID\",
        me: teacher
    });

    var student1 = new Talk.User({
        id: "654321\",
        name: \"Sebastian\",
        email: \"sebastian\@example.com\",
        photoUrl:'https://images.pexels.com/photos/775358/pexels-photo-775358.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500\'
    });

    var student2 = new Talk.User({
        id: "456789",
        name: "Steve",
        email: "steve@example.com",
        photoUrl:'https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
    });

});

Once you have added the users, it's time to create the conversations. Update your code like below.

const conversation = talkSession.getOrCreateConversation("CONVERSATION_ID");
conversation.setParticipant(teacher);
conversation.setParticipant(student1);
conversation.setParticipant(student2);

conversation.setAttributes({
    photoUrl: "https://i.picsum.photos/id/971/200/300.jpg?hmac=13ePfSXGucrfsPCzPjUZtNe5jYo83FTet0dk-Lk2Q4E",
    subject: "homework_assignment"
});

The CONVERSATION_ID is the parameter used to identify each conversation uniquely. To avoid security risks, we do not use simple numbers and letters when setting up actual conversation ids as a best practice. Instead, you can compute an HMAC of your conversation ID the same way you generate your Identity Verification signature. You can then use the HMAC as your conversation ID. You can find more information on how to secure your conversation ID here.

The next step is to mount the chatbox into your user interface. Add the following code to mount your chatbox.

const chatbox = talkSession.createChatbox();
chatbox.select(conversation);
chatbox.mount(document.getElementById("talkjs-container"));

Go to your application and try to load the chatbox. It will load as below.

In the code above, the value of me property is 'teacher.' So right now, what we are seeing is what the teacher, Alice, can see. Notice how the names of the other two members in the conversation are displayed at the top.

Creating roles

TalkJS provides the ability to create user roles. These user roles may come in handy, especially when you want to control user behavior and privileges. You can create these roles using the * TalkJS dashboard*. Click on Roles to add a role.

Let's create two roles: teacher and student. Click on the Create New Role button to create the role 'teacher.' Click on the "Create role" button. You will be redirected to your role's settings page.

Click on the Create New Role button again to create the 'student' role. Assume you don't want the students to share their assignments or papers in the chat to prevent copying. All you have to do is disable the file-sharing option in student role settings as below and save.

You can add those roles into your user object as below.

var teacher = new Talk.User({

    id: "123456",
    name: "Alice",
    email: "alice@example.com",
    photoUrl: 'https://images.pexels.com/photos/3671083/pexels-photo-3671083.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    role: "teacher"
});

Customizing the UI with TalkJS Themes

Once you have created the roles, you can customize the TalkJS UI based on the user role. TalkJS uses the default theme when a role is not defined.

To create a role-specific theme, go to the Theme Editor in the TalkJS dashboard.

Click on Create new theme and give it a name.

Inside the teacher theme, go to the Layout tab.

Click on the collapsible panels (Global, Panels, Chat Portal, etc.) on the right to customize the teacher's interface. As an example, let's change the background color of the teacher's chatbox.

To apply the theme to the role, we need to go back to our teacher role's settings.

Under UI Theme, select 'Custom Theme' as 'Theme version' and 'teacher' as the 'Active theme.'

Save the change and reload the chatbox.

As you can see, the background color of the chatbox has changed as updated for our teacher role. However, if we log in as the student Sebastian, the background color is still white as the student role still uses the default theme.

There it is. A simple group chat in a few steps. As you can see, it's very easy to create roles and assign privileges and customize the UI based on the role. You may have also noticed how easy it is to edit the themes with TalkJS Theme Editor. So have fun creating group chats!

Create a direct messages feature like on Booking.com with TalkJS

Omer Farooq — Thu, 18 Nov 2021 11:04:28 +0000

Recently, we have managed to customize the TalkJS default UI theme to make chat lookalikes like Uber, WhatsApp, LinkedIn, and other chats. In the following article, we will make the Booking.com chat using the TalkJS Chat API. We will show you how to create the blue and white theme of the booking.com chat.

Things To Do

Open the Theme Editor and create a newgif theme named “booking chat.” Now integrate this theme with the application to preview the theme changes. The users can also get an idea by following the starter guide and having an easy preview with an HTML page without application integration.

Below is the default theme of the TalkJS Chat:

Following is a complete summary of the changes that the user has to perform for making a chat like Booking.com:

Change the header to dark blue and the header text to white.
Remove the avatar from the header.
Remove the search icon from the header.
Change the font weight and family of the header text to normal and Arial, respectively.
Remove the avatars from both sender and receiver chat.
Remove the timestamp and message status from the chat.
Change the chat background from the default white to any other color (as booking.com uses an image that Talk JS does not support yet).
Change the alignment, styles, and padding of the messages.
Change the client’s chat background to blue and the support agent’s chat to white.
Change the format of the chat to make it look like the booking.com speech bubbles.

Layout

Chat panel

The initial step is to open the layout section from the Theme Editor and click on the Chat panel dropdown. The next thing is to change the background color to white.

Note: We are going for white colour for this tutorial, and the users can choose to set any color of their choice. Following is an image for the demo:

Message field area

In the layout section, open the message field area section and change the background color to white. Doing this will change the area’s colour around the message input field to match the background color. Below is the image to demonstrate it:

ChatHeader

The first top-level component to alter is the ChatHeader. Open the stylesheet of the ChatHeader section from the left menu. Change the header CSS with the following CSS to set the background color of the header to dark blue. This change makes it look like the header of Booking.com chat:

.header {
 display: flex;
 align-items: center;
 height: 4.5rem;
 background-color: #002F7D;
 flex-shrink: 0;
}

The next thing is to change the title colour to white, set the alignment of the title, and change its font size to make it more similar to the booking.com chat. Replace the title CSS with the following CSS to make these changes:

.title {
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
 color: white;
 font-size: 20px;
 padding-left: 30px;
}

Moreover, remove the and class from the header as these are unnecessary. To make the chat look like booking.com, remove the following lines from the ChatHeader stylesheet:
Line 35 (the search box).
Line 36 (else condition).
Line 38 to 40 (image on the left side).
Line 45, line 49.
Line 51 to 57.
Line 88 to 93 (image CSS).
Line 101 to 104 (search action).
Line 119 to 156 (search code).

Following is the modified header after going through all the changes:

UserMessage

The following top-level component to alter is the UserMessage. The user has to open the UserMessage stylesheet to make changes according to the booking.com chat layout. The user has to modify line 54 like the following to hide the avatars:

<t:set showAvatars="{{true}}"/> to  <t:set showAvatars="{{false}}"/>

Moreover, remove lines 58 to 62 in order to remove the avatar code from the file.

The next thing is to remove the timestamp and message delivery status/show status from the chat. Alter the MessageBody tag at line 73 to remove the following code from the file:

timestamp="{{ timestamp }}" floatTimestamp="auto" showStatus="{{ sender.isMe }}"

Another thing is to add the below CSS to in the file to add the triangle in order to customise the speech bubbles to make them look like booking.com chat bubbles:

Following is the CSS to alter the speech bubble by the sender:

.by-me .message:before {
 content: "";
 width: 0px;
 height: 0px;
 position: absolute;
 border-left: 10px solid #379EE0;
 border-right: 10px solid transparent;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 right: -20px;
 top: 40px;
}

Following is the CSS to alter the speech bubble by the receiver:

.by-other .message:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-right: 10px solid  #D3D3D3;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  right: 189px;
  top: 30px;
}

Replace the .by-me .message CSS to change the background color, margins and borders to make it look like the booking.com chat:

.by-me .message {
   background-color: #379EE0;
   color: #fff;
   margin-right:20px;
   border-color:#379EE0;
}

Replace the .by-other .message CSS to alter the background color of the chat and the left margin:

.by-other .message {
   background-color: #D3D3D3;
    margin-left:20px;
}

The next thing to do is to replace the message CSS to align it with the speech bubble styling and the borders of the bubbles. Moreover, alter the font family, font-weight, and the font size of the chat to make it similar to the booking.com chat.

Note: Users can make the above changes in the Layout section by setting the font size and font family in the ChatPanel section.

.message {
  border-color: #E7ECEE;
 background-color: #E7ECEE;
 color: #111;
 padding: 20px;
 font-weight: 900;
 font-family: arial;
 position:relative;
  white-space: normal;
  border-radius: 0.5rem;
  border-width: 0px;
  border-style: solid;
  word-wrap: break-word;
  position: relative;
  display: inline-block;
  max-width: calc(100% - 15rem - 0.25rem - 0.25rem);
  font-size: 16px;
  font-weight:normal;
  padding: 0px;
}

By performing all these changes and replacements, the chat now looks like this:

The below gif demonstrates the functional design of the booking chat:

How to build a rider-driver chat like on Uber with TalkJS

Omer Farooq — Thu, 18 Nov 2021 07:28:15 +0000

Lately, we have used the Theme Editor of the TalkJS Chat API to develop some chat lookalikes like WhatsApp, Discord, UpWork, LinkedIn, and many more. This article implements a chat that looks like a chat between a rider and driver on the Uber application. We will implement the latest theme.

Things to do

Open the TalkJS Theme Editor and create a new theme named “rider-chat.” Integrate the theme with the application to view the theme changes.

Note: The users can follow the TalkJS starter guide to preview them on the HTML page without app integration.

The image shows the default theme of the TalkJS chat:

Following is a summary of the changes that the users need to make in order to achieve an Uber chat lookalike:

Change the header color to black and the header text to white
Change the chat’s font family to Arial (sans-serif)
Remove the avatar and search icon from the header
Remove the avatar from the right chat message (rider’s message)
Change the alignment of the rider messages
Remove the timestamp and message status from the chat
Add message read status in the rider’s chat
Change the rider’s chat background to blue
Change the format of the chat to make it look like the Uber speech bubbles.

Layout

Chat panel

The very first thing to do is to set the background color by using the Theme Editor. Open the layout section through the left menu and select the Chat panel dropdown. Set the background color using the following color code as an example:

Message Field Area

In the layout section, open the message field area section and change the background color to gray. Doing this will change the area’s colour around the message input field to match the background color. Below is the image to demonstrate it:

ChatHeader

The first section to alter is the ChatHeader. Open the stylesheet of the ChatHeader section from the left menu. Change the background color of the header to black by modifying its class, as in Uber.

Replace the header CCS with the following CSS to change the header background color:

.header {
 display: flex;
 align-items: center;
 height: 4.5rem;
 background-color: black;
 flex-shrink: 0;
}

The next thing is to change the title color in the title class to white. So the name of the user will appear white on the black background, like Uber. Moreover, replace the title’s CSS with the following code to change the color, font size, font family, margins, and padding:

.title {
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
 color: white;
 font-family: arial;
 font-size: 20px;
 padding-left: 30px;
 margin-bottom: -60px;
}

Another thing to do here is remove the and class from the header. To make the chat look like Uber, remove line 35 (the search box), line 36 (else condition), line 38 to 40 (image on the left side), line 45, line 49, line 51 to 57, line 88 to 93 (image CSS), line 101 to 104 (search action), line 119 to 156 (search code).

Moreover, add the phone icon in the header by using the following code. Add the phone icon code after the div of the title class.

Note: The critical thing to notice here is that the TalkJS Chat API currently does not support the call feature. However, there is a way of using it by integrating with other call APIs like Daily. There is also an integration guide for the users to follow in such cases. Users can also add the SVG of icons to make the chat look more like Uber’s original chat.

<a class="clickable-phone-icn" href="#">
         <img class="phone-icon-img" src="https://icon-library.com/images/phone-icon-white-png/phone-icon-white-png-6.jpg" />
  </a>

Add the below CSS of phone icon for styling in header:

.phone-icon-img {
 max-width:7%;
 float:right;
 padding-top:30px;
}

Below is the illustration of the modified header:

UserMessage

Open the UserMessage file and make the changes according to the Uber rider and driver chat layout. Replace line number 60 with the following code to remove the rider’s avatar from the chat:

<Avatar t:if="{{ sender.id != previousSenderId and sender.isMe == false}}"

The next thing is to remove the timestamp and message delivered status or show status from the chat. Remove the following code from the MessageBody tag at line 73:

timestamp="{{ timestamp }}" floatTimestamp="auto" showStatus="{{ sender.isMe }}"

Another thing is to replace the message CSS with the following CSS in order to change the font style:

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

Furthermore, replace the .by-me .message CSS with the following CSS to change the message background color, chat bubble style and make it look more like Uber speech bubble:

.by-me .message {
   border-color: #1E60E1;
   background-color: #286EF0;
   color: #fff;
   /* Space between avatar and the message */
   margin-right: 0.25rem;
   border-radius: 40px 40px 0px 40px;
   padding-left: 1rem;
}

Replace the CSS class .by-other .message with the given CSS to change the background color and the chat bubble style for the driver:

.by-other .message {
   /* Space between avatar and the message */
   margin-left: 0.25rem;
   border-radius: 40px 40px 40px 0px;
   background-color:#E1DFE3;
}

Remove the following CSS class to align the chat:

.by-me.previous-same {
   /* Avatar width (see Avatar component) */
      padding-right: 3rem; 
}

Moreover, add the following CSS code before the closing tag of the template, i.e., to display message read status. The users can customize to hide or display this div based on the message show status. However, for this article, the if condition displays the read status for all messages by the rider. Users can manipulate this if condition to get the results they want:

<div t:if="{{sender.isMe == true}}"
           class="read-msg">
           Read
   </div>

Add the following CSS of the message read status in the style section:

.read-msg {
   color: gray;
   margin-left: 368px;
}

By performing all these changes and replacements, the chat now looks like this:

It is very similar to the original Uber chat between the rider and the driver, thanks to the Theme Editor by TalkJS. The users can develop many such themes with the flexible, easy-to-use interface and minimal coding requirement environment of TalkJS Chat API.

The below GIF demonstrates the functional design of the rider-driver chat:

DEV Community: TalkJS

How to create a product carousel for a TalkJS chat

Prerequisites

Running the Sneaks-API Server Locally

Setting up the Chatbox

The HTMLPanel

Getting Product Data

Adding Products to the HTMLPanel

Posting a Reply

Adding our Styles

Conclusion

How to migrate from Sendbird to TalkJS

Exporting from Sendbird

Using the Sendbird Export API

Importing to TalkJS

Importing Users

Importing Conversations

Importing Messages

Opening the application in TalkJS

Reporting messages in TalkJS

Setting up a Report Action

Handling the Action

The Backend

Next Steps

The unreasonable effectiveness of SDK design interview questions

Text chat interviewing

SDK design combines a lot of skills

How to add chat into a NodeJS app with TalkJS

Installing the dependencies

LowDB – Easy to use, embedded database for JavaScript

Creating the APIs

Create User API

Get User API

Conclusion

How to build chat into a Flask App with a chat API

Setting up a Python-Flask Application

Setting up the USERS table in SQLite

Setting up the endpoints

Integrating with the frontend application

How to customize email notifications in TalkJS

Customizing TalkJS Email Notifications

How to Change the Email Body

How to create a Role

Changing Email Body

Advanced Email Body Customization

How to add chat into a Spring Boot App

Note

Setting up the Spring Boot Application

Creating the Model and Repository

Creating the Controller

Creating users using the API and verifying them

Setting up the TalkJS application

Conclusion

How to add chat into a VUE.JS app with TalkJS chat API

Application Overview

Adding TalkJS to our application

Creating the chatbox Vue Component

Creating the Users

Establishing a TalkJS Session

Creating a New or Joining an Existing Conversation

Creating an Inbox and Mounting it

The Result

How to create a group chat with a chat API

Setting up the group chat

Creating roles

Customizing the UI with TalkJS Themes

Create a direct messages feature like on Booking.com with TalkJS

Things To Do

Layout

Chat panel

Message field area

ChatHeader

UserMessage

How to build a rider-driver chat like on Uber with TalkJS

Things to do

Layout

Chat panel

Message Field Area

ChatHeader

UserMessage

Setting up the `USERS` table in SQLite