•over 1 year ago
How much do you love when you can just jump on a company's website and chat with one of their representatives to take care of your business; no picking up the phone, no waiting days for an email back??
Let’s get started!
You'll need the following tools to code along with this tutorial:
- Stream Chat
Stream Chat is a real-time chat API/SDK that allows you to build secure, scalable, and sustainable chat applications in a few lines of code, without bothering with the underlying infrastructure. It’s simple and easy to use. The best part is that the API documentation that explains how to accomplish your goals is not complicated to understand!
Now that we know a bit about Stream Chat, let’s sign up on Stream and get all set up to build our chat application!
Setting Up Stream Chat
The first step to set up a Stream Chat app is to sign up and get your application credentials. Visit the Stream Chat website to sign up.
You can register with your GitHub account or fill out a sign-up form in less than one minute! Click on the SIGNUP button on the Stream Website:
Then, when the pop-up shows up, fill out the form or use the Sign In with GitHub option:
After registering successfully, you should be logged-in to your Stream dashboard where you’ll find your app credentials:
So, what is important here?
- Your API Key
- API Secret
Make sure you keep them safe, as we are going to use them in the future.
That’s all the information we need to make Stream work with our application! Here is a demo of what we’ll be building:
Setting Up the User Interface
Before we start digging in, let's set the stage and take a look at the structure of our app:
. ├── admin.html ├── admin.js ├── app.js ├── config.js ├── index.html ├── index.js └── style.css
We’ll have both a frontend and a backend interface for the application. The frontend (
index.html) will be the page from which customers will contact the business, while the backend (
admin.html) will be where the administrator will respond to received messages.
Let’s start by creating the HTML pages for the backend and the frontend, respectively. Create an
admin.html file and add the following code to it:
Next, create an
index.html file and add the following code to it:
You’ll notice that the most significant differences here are the title and the fact that we referenced
admin.js file in the
admin.html page file, and the
index.js file in the
index.html page file.
To be able to access all the goodness of Stream Chat, you'll need to include the Stream Chat CDN in the HTML template, as we’ve done already in the template above, using the following:
To begin working on the magic that makes it all happen, let’s take a look at the customer chat section of the app in the
Initializing a Stream Chat Client and Grabbing Message Text
We'll explore the
index.js file bit by bit, to understand what is going here. We start by initializing a new Stream Chat client with the API key you got from your dashboard. The
messageText is the input that receives the user's text input:
Setting the User
Once we have selected the
messageText, set our API key, and initialized a Stream Chat client, we can use that information to set our
user. In the code below, the
init function takes a
user and a
url as parameters and passes them to the
Chat function (defined a little later), where the
user is set, and all the chat functionality happens:
To get the
token we need to make an API call to a backend API; we are using the
fetch API for this call.
Getting the Token
To make use of the basic API for getting the token, which we’ve made especially for this tutorial, run the following, which clones the repository and installs the required packages:
Ensure you have NodeJS installed for this API to work.
Next, add your API key and secret in your
Diving Deeper into the API
In case you are curious, here is the code for the API:
At this point, you can run
node index.js to start the API server.
The app should be running on this url port:
We’l be making the API call to this url:
all that you need to send to the API is the
We’ll send this
username as a JSON object to the API, and it’ll return the
token, which we’ll use to identify and set the
user in the
Chat function (which we made use of in the
index.js file, above):
Chat function takes two parameters a
token and the
user_id is the username used to authenticate the
user), and we are calling it in the
init function (in the
index.js file, above) and passing the data to it after the authentication is complete:
user is set, the next step is to create a channel for a one-to-one chat between the customer and the administrator.
Creating a Channel
Creating a one-on-one chat with Stream Chat is as simple as (1) specifying exactly two
members and (2) setting the
channel title as an empty string:
For simplicity, we hardcoded the
username; in your live app, you can get the
user to enter their name before they start the chat and, with that, you can make the chat unique to just that customer and the admin!
The final channel specification you'll want to make is to
channel for changes, new messages, etc:
Getting Previous Messages
Let’s get all the messages in a conversation between two persons and push them to the UI! With that said, you may not always want to get the last message; you can choose to pull up any messages you have ever had with a user or you can start a new session each time the customer comes back:
What if a new message comes in?
Listening for New Messages
We listen to new messages with the Stream Event Listener function; with that, we can pick the last
message object and push to the UI:
Now is when we actually send the
message from the interface to Stream. We check for keypress on the
messageText input box if the keypress is the Enter key (with
keyCode 13), the
message contains an actual text then send the
message to the channel using the function
Finally, once the new
message hits the Stream Chat API, we will push it to the
chatbox with this template:
The above code pushes the
message to the right side of the box if it’s the user's message, and to the left if it’s from the admin. The
BubbleTemplate function is the template for each bubble in the chat box; it's defined in the
Here is the layout of the
chatbox it’s sending the messages to:
That’s all for the client part!
Setting Up the Admin UI
For the backend, or admin end (
admin.js file), repeat the same code but change the username to "
admin" and add the username you want the admin to chat with.
The admin will log in to
localhost:8000/admin to access the admin page. There are several other ways you can make this work, but we’ll follow this approach for the sake of brevity in this tutorial.
Congratulations! Your live support application with VanilaJS and Stream Chat is ready! We mentioned a few upgrades you can make for your live application, but would love to see you do even more with your implementation! There is so much you can do with the Stream API/SDK; check out the docs to learn more!
We can't wait to see what awesome customizations you come up with! You can find the completed app source code for this tutorial on GitHub.