Send Chat Transcripts with Mailgun

Getting Started

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

Prerequisites

Before you proceed with this tutorial, make sure you have Node.js and npm installed on your machine. You'll also need to have a basic familiarity with building Node.js and React applications.

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

and cd into the created directory. Next, run:

npm install

to install all the dependencies specified in the package.json file.

Following that, rename the .env.example file to .env and paste in the Stream Chat keys you grabbed in the previous section.

// .env
STREAM_API_KEY=<your api key>
STREAM_APP_SECRET=<your app secret>

You can now start the Node server using

node server.js

and the React app, in a separate terminal window or tab, with

npm start

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:

// src/Customer.js

import React, { useState, useEffect } from "react";
import {
  Chat,
  Channel,
  Window,
  TypingIndicator,
  MessageList,
  MessageCommerce,
  MessageInput,
  MessageInputFlat,
  ChannelHeader
} from "stream-chat-react";
import { StreamChat } from "stream-chat";

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:

// src/Admin.js

import React, { useState, useEffect } from "react";
import {
  Chat,
  Channel,
  ChannelHeader,
  Window,
  MessageList,
  ChannelList,
  MessageInput,
  ChannelListMessenger,
  MessageTeam
} from "stream-chat-react";
import { StreamChat } from "stream-chat";

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.

Once again, you'll need to grab your API Key (from Mailgun, this time!), which can be found here. Copy your Private API Key and add it to your .env file as shown below:

STREAM_API_KEY=<your stream api key>
STREAM_APP_SECRET=<your stream app secret>
MAILGUN_DOMAIN=<your mailgun domain>
MAILGUN_API_KEY=<your mailgun private key>

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:

// src/Customer.js

import React, { useState, useEffect } from "react";
import {
  Chat,
  Channel,
  Window,
  TypingIndicator,
  MessageList,
  MessageCommerce,
  MessageInput,
  MessageInputFlat,
  withChannelContext
} from "stream-chat-react";
import { StreamChat } from "stream-chat";

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 this.props.channel.state.messages. In 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:

// server.js

require("dotenv").config();

const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const { StreamChat } = require("stream-chat");
const nodemailer = require('nodemailer');
const mg = require('nodemailer-mailgun-transport');

const app = express();

app.use(cors());
app.use(bodyParser.json());

In the /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 <your email address> placeholder before testing the application.

Once you’ve updated the server.js file, kill the server and start it again with

node server.js

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:

Wrap Up

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!