•8 months ago
In any business interaction, it is vital to hold on to records of how you got to where you are. Not only can being able to reference previous transactions and interactions teach you about what you've done, it can help you make informed decisions about what you are going to do. With this being the case, one of the most valuable ways in which you can leverage chat to better your company is to keep records of and review the conversations your employees are having with your clients.
Knowing your users' pain points and what they love about your product and seeing what the most common comments are is a fantastic way to keep your product relevant and your customers coming back for more.
If you’re planning on building a chat application with Stream Chat, you might be wondering whether and how you might retain and process the transcripts from chats you receive, not only because you might want them for the aforementioned reasons, but also because of how frequently users request copies of their conversations. Luckily, when leveraging Stream Chat, retaining chat transcripts and providing them to your users is not only possible, it's incredibly easy to implement.
In this tutorial, we’ll build a demo application where a customer and support agent will interact using Stream Chat features. Then, we'll walk through how to send the transcript of the conversation to an email address using Mailgun (if you prefer another email service, swapping it out shouldn't be difficult).
Sign Up for Stream Chat
If you’re new to Stream Chat, click here to create a new account. Otherwise, you can log in to your existing account. Once you’re logged in, you can use the app that's automatically created for you. Or, if you prefer, go to the dashboard, hit the blue “Create App” button at the top right to create a new app and take note of your access keys, which will be presented at the bottom of the page.
Set Up the Chat Application
Clone this GitHub repository to your filesystem by running:
git clone https://github.com/ayoisaiah/stream-chat-transcript
cd into the created directory. Next, run:
to install all the dependencies specified in the
Following that, rename the
.env.example file to
.env and paste in the Stream Chat keys you grabbed in the previous section.
You can now start the Node server using
and the React app, in a separate terminal window or tab, with
The Client Interface
Now, if you go to
http://localhost:3000/, you should see the following interface, which the customer will use to interact with a support agent:
Here’s the code that renders this view:
Once this component is loaded, a token is requested from the server via the
/join route and, once it's received, the channel is initialized, causing the chat interface to become active. We’re using the
commerce theme here since it’s closest to a typical customer support interface from the user’s point of view.
The Agent Interface
The agent interface can be accessed by going to
http://localhost:3000/#/admin. Upon visiting this link, you should be presented with the following interface:
And here’s the code that renders this agent interface:
As you can see, the code is pretty similar to that for the Customer component, except that we’re using the
messaging theme here, which affords us the ability to select from different conversations via the sidebar.
You can now simulate a real customer support request by sending messages between the customer and the agent!
In the next section, we’ll take a look at how to generate a transcript of the conversation and send it to an email address...
Sending the Chat Transcript with Mailgun
Setting Up Mailgun
Before you can use Mailgun's service, you need to sign up for a free account here. Once you reach your Mailgun dashboard, you can grab your sandbox domain from the
Sending domains section of the page. Using a sandbox allows you to test Mailgun's features before connecting a real domain.
Finally, run the command below to install the packages we’ll be using to send emails from our server:
npm install nodemailer nodemailer-mailgun-transport
Creating Transcript Request Button
To complete the loop, we'll need to provide a way for the user to request a transcript in the user interface; a simple button will suffice for demo purposes. We'll make it so that, when the button is clicked, the messages from the chatroom are sent to the server. Here’s the code that gives the desired result:
What we’ve done here is replaced the default
ChannelHeader component with our own, in order to add a transcript button that, when clicked, calls the
sendTranscript() method and passes an array of messages, which can be accessed using
sendTranscript, the messages are sent to the
/transcript route on the server, where they will be processed and sent to the user.
Let’s make some changes in
server.js to get everything working as described above:
/transcript route, the messages are processed into an HTML
string and sent to the email address entered in the
to field. Make sure to replace the
placeholder before testing the application.
Once you’ve updated the
server.js file, kill the server and start it again with
To see this all come together, click the "transcript" button on the customer view, and check your email inbox. You should see a transcript of the conversation, similar to that in the screenshot below:
In this article, I’ve described how messages in a Stream channel can be extracted and used to construct a transcript of a conversation that is subsequently sent to an email address using Mailgun. With this knowlege, you can now easily use the concepts discussed here to implement chat transcripts in your own applications!
Don’t forget to check out the full source code used for this tutorial here to do a deeper dive into the nuances of what makes our app tick and how you might better customize it to your use case.
Thanks for reading and Happy Coding!