DEV Community: Taylor Graham

Create A Support Chat Admin Dashboard

Taylor Graham — Mon, 24 Aug 2020 17:26:18 +0000

In this tutorial, we'll build a chat app with a dashboard that allows an admin user to switch between one-on-one customer chat channels in the same window.

As a busy customer support representative, you don’t want to be stuck with a chat app that opens each chat in a new window, forcing you to cycle through multiple browser tabs and potentially resulting in losing track of an open ticket. The app we’ll build in this post displays all customer chats in a compact dashboard that bolds new messages as they come in (much like iMessage), and allows support reps to navigate between chats quickly and easily. What's more: this will take a matter of minutes, not hours.

Requirements

node.js
React
A (free) Stream Trial Account
Basic knowledge of React Hooks and Express.

Background

Stream Chat provides the chat infrastructure for this app, as well as some basic out-of-the-box styling. Topics will be covered using Express JS and React, but the methodologies can be ported to most languages and frameworks.

This post will guide you through the Git Repository here.

Stream Configuration

A free Stream Trial account will be needed; grab yours here. Once you've signed up, create a new app on your Stream dashboard.

Here's the navbar link for the dashboard

From the dashboard, create a new app with the 'Create App' button

Give your app a name and select 'Development' mode

This will generate an API key and Secret which we'll add to a .env file in a moment.

Disable Stream Auth Checks and Permissions

Stream offers Auth Checks and Permissions Checks by default. These will be useful for any production environment, but we'll disable them for this case. Here's how:

In your Stream dashboard, select your app. Click the 'CHAT' navbar dropdown and select 'Overview'

Scroll down and activate the 'Disable Auth Checks' and 'Disable Permissions Checks' toggles.

`.env` Configuration

The Git Repo contains a file in backend titled .env.example. Add your Stream API Key and Stream Secret here, then rename the file to .env.

// backend/.env.example:1
NODE_ENV=development
PORT=8080

STREAM_API_KEY= your Stream API key here
STREAM_API_SECRET= your Stream API secret here

Spin 'Er Up

Your app should now be ready to run. The app is split into a frontend folder created using stream-chat-react and a backend folder created using npm express-generator.

To start the app on your machine run npm install and npm run start on both the frontend and backend folder. Once running, navigate to http://localhost:3000 to see the frontend. Now, we can dive into how this app works.

Router

The frontend is split between an Admin component and Customer component. Each has their own login page and chat window. Here's the Router to distinguish the two.

// frontend/src/index.js:9
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Switch>
        <Route path="/" exact={true}>
          <Customer />
        </Route>
        <Route path="/admin" exact={true}>
          <Admin />
        </Route>
      </Switch>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

To view the customer login, navigate to localhost:3000/. To view the admin login, go to localhost:3000/admin.

Customer Login (Frontend)

Let's investigate the login portion of the Customer component.

// frontend/src/Customer.js:105
return (
  <div className="App container">
    <form className="card" onSubmit={register}>
      <label>First Name</label>
      <input
        type="text"
        value={firstName}
        onChange={(e) => setFirstName(e.target.value)}
        placeholder="first name"
        required
      />
      <label>Last Name</label>
      <input
        type="text"
        value={lastName}
        onChange={(e) => setLastName(e.target.value)}
        placeholder="last name"
        required
      />
      <label>Email</label>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="email"
        required
      />
      <button type="submit">
        Start chat
      </button>
    </form>
  </div>
);

The snippet above returns the following:

This simple login form takes in firstName, lastName, and email. These are state variables that will be sent to the backend in the register function. Let's peek at the first half of the register function, the POST to the backend

// frontend/src/Customer.js:29
e.preventDefault();
const response = await fetch('http://localhost:8080/customer-login', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstName,
    lastName,
    email,
  }),
});

I chose to write this request without any libraries, to clearly show what is being transmitted. I recommend the axios library if you're looking to simplify.

Next, let's see how the backend and how it handles the registration.

Customer Login (Backend)

First, the backend must establish its validity with Stream by configuring a serverSideClient, which is authenticated with your unique Stream API Key and Secret.

// backend/routes/api.js:5
const streamApiKey = process.env.STREAM_API_KEY;
const streamApiSecret = process.env.STREAM_API_SECRET;
const serverSideClient = new StreamChat(streamApiKey, streamApiSecret);

Next, the /customer-login endpoint accepts the customer inputs and registers a chat. Here's the process flow:

Normalize customer input from frontend
Generate a token for the customer
Open a chat channel
Add members to the channel
Return this data to the frontend

Note how the Stream library is the workhorse for this process, offering methods like .createToken, .updateUser, .channel, and .addMembers.

// backend/routes/index.js:10
router.post('/customer-login', async (req, res) => {
  try {
    const firstName = req.body.firstName.replace(/\s/g, '_');
    const lastName = req.body.lastName.replace(/\s/g, '_');
    const username = `${firstName}${lastName}`.toLowerCase();

    const customerToken = serverSideClient.createToken(username);
    await serverSideClient.updateUser(
      {
        id: username,
        name: firstName
      },
      customerToken
    );

    const channel = serverSideClient.channel('messaging', username, {
      name: `Chat with ${username}`,
      created_by: { id: 'admin' },
      members: [username, 'admin']
    });

    await channel.create();
    await channel.addMembers([username, 'admin']);

    res.status(200).json({
      customerId: username,
      channelId: username,
      customerToken,
      streamApiKey,
    });

  } catch (err) {
    console.error(err);
    res.status(500).json({ error: err.message });
  }
});

Some useful notes on the Stream methods used above:

.createToken takes in the username for the argument and generates a unique token for each participant in a chat.
.updateUser takes in an object, wherein the user id must be sent, and a name can be applied. The method requires a token for the user.
.channel accepts ( channel-type, channel-id, options-object). By specifying an array of members, we restrict channel access to those with the user id's specified.

Next, we'll check out how the frontend receives the backend response.

Chat Initialization (Frontend)

Let's explore the second half of the frontend registration function in Customer.js:

// frontend/src/Customer.js:43
try {
  //...

  const { customerId, customerToken, channelId, streamApiKey } = await response.json();
  chatClient = new StreamChat(streamApiKey);

  await chatClient.setUser(
    {
      id: customerId,
      name: firstName,
    },
    customerToken,
  );

  const channel = chatClient.channel('messaging', channelId, {
    name: `Chat with ${customerId}`
  });

  await channel.watch;
  setChannel(channel);

} catch (e) {
  console.error(e, e.error);
}

The backend's response is destructured. The following steps mirror the chat setup from the backend:

Set the user
Configure the channel for the frontend to join
Watch the channel, so that the user's browser receives all events occurring in the channel
setChannel(channel) is called so we can use the channel state later in rendering the chat

Render Customer Chat

Now that the channel is established, the customer chat is returned with the following block of code:

// frontend/src/Customer.js:66
if (channel) {
  return (
    <Chat client={chatClient} theme="commerce light">
      <Channel channel={channel}>
        <Window>
          <div className="stream-header">
            <div className="str-header-left">
              <p className="stream-header-left-title">
                Customer Support Chat
              </p>
            </div>
            <div className="str-chat__header-livestream-right">
              Second National Bank
            </div>
          </div>
          <MessageList
            typingIndicator={TypingIndicator}
            Message={MessageCommerce}
          />
          <MessageInput Input={MessageInputFlat} focus />
        </Window>
      </Channel>
    </Chat>
  );
} else {
  // ...
}

Here, again, Stream provides all the components we need to build the chat. The header is an optional inclusion, but it gives us a chance to play around with some of the built-in data Stream offers.

⭐️Good to know: Stream offers loads of convenient channel data we can use anywhere in our apps. We can replace the Second National Bank header with something like: Welcome, {client.user.name}, to render:

The <Chat /> component has several handsome out-of-the-box themes. For this instance, we'll use commerce light. Here's a list of the available themes.

The channel we just created is specified in the <Channel /> component. The <MessageList /> and <MessageInput /> an also be easily customized. That's all we need for the customer side; let's check out the Admin component.

Admin Login

The Admin Login page mimics the same steps as for the customer, but only accepts an Admin Id in the form input. Here's the form:

// frontend/src/Admin.js:81
return (
  <div className="App container">
    <form className="card" onSubmit={register}>
      <label>Admin Id</label>
      <input
        type="text"
        value={adminId}
        onChange={(e) => setAdminId(e.target.value)}
        placeholder="Enter your admin ID"
        required
      />
      <button type="submit">
        Start chat
      </button>
    </form>
  </div>
);

And here's the registration function, which only POST's an adminId, but follows the same channel setup.

// frontend/src/Admin.js:23
const register = async (e) => {
  try {
    e.preventDefault();
    const response = await fetch('http://localhost:8080/admin-login', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        adminId,
      }),
    });

    const { adminToken, streamApiKey, adminName } = await response.json();
    chatClient = new StreamChat(streamApiKey);

    await chatClient.setUser(
      {
        id: adminName,
        name: 'Administrator'
      },
      adminToken,
    );

    const channel = chatClient.channel('messaging', 'livechat');

    await channel.watch();
    setChannel(channel);

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

This is nearly identical to the /customer-login endpoint. It creates a token, initializes the client, sets a user, and opens a generic channel. As new customers start chats, the channel list will be automatically populated.

Render Admin Dashboard

Here's how the Admin Dashboard looks:

The main difference between the customer and admin registration is in the rendered Stream components.

// frontend/src/Admin.js:59
return (
  <Chat client={chatClient} theme={"messaging light"}>
    <ChannelList
      sort={{ last_message_at: -1 }}
      Preview={ChannelPreviewMessenger}
      onSelect={(channel) => { setChannel(channel); }}
    />
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput focus />
      </Window>
      <Thread />
    </Channel>
  </Chat >
);

Notice the <ChannelList /> component. This is another Stream built-in that handles the side pane with all channels hosted by our app. Stream's API will keep a history for each channel. The ChannelList component comes with loads of listeners to update the view when new chats are started, messages are sent, etc.

The sort option will show the chat with the most recent message at the top of the list. The Preview shows a snippet of the most recent message. The onSelect uses the setChannel state method to show the selected channel.

Review

There you have it! A fully functional chat app with a powerful admin dashboard. Hopefully this tutorial provides some extra insight into working with Stream. Check out the Stream Chat Docs and Stream Chat React Docs for more inspiration and guidance for your projects.

Save and Send Chat Transcripts with SendGrid

Taylor Graham — Mon, 24 Aug 2020 17:05:32 +0000

In this tutorial, we'll build a chat app that sends a copy of a chat transcript in an email using SendGrid. Imagine being able to automatically inform your sales team when one of their clients has chatted with your support team. This app sends a transcript of that chat directly to the salesperson's email address using Stream Chat and SendGrid.

This post will guide you through the Git Repository Here. Let's get started!

What is Stream Chat?

Build real-time chat in less time. Rapidly ship in-app messaging with our >highly reliable chat infrastructure. Drive in-app conversion, engagement, and >retention with the Stream Chat messaging platform API & SDKs.

Stream Chat & Messaging

Requirements:

node.js
React
A (free) Stream Trial Account
A (free) SendGrid Trial Account
Some elementary understanding of React Hooks and Express will also be helpful.

Read this tutorial if you want to...

Learn how to use React useEffect() to collect a chat transcript
Send a chat transcript in an email using Stream and SendGrid
Set up a frontend/backend Stream Chat app

These topics will be covered using Express JS and React, but the methodologies can be ported to most languages and frameworks.

What's not covered

This tutorial focuses on the collection and transmission of a chat transcript. The GitHub repo for this project includes a fully functional registration form and frontend for Stream Chat, but not every aspect will be covered in depth. For more info on the React registration form and initiating a Stream Chat Client, check out this post.

Account Configuration

Stream Setup

Once you've got your free Stream Trial account set up, you'll want to create a new app on your Stream dashboard. Be sure to choose the 'Development' mode.

Copy the API key and Secret generated, we'll add them to a .env file in a moment.

By default, Stream offers Auth Checks and Permissions Checks on its apps. These are good features for production apps, but we'll keep this app simple by disabling these. In your Stream dashboard, select your app. Click the 'CHAT' navbar dropdown and select 'Overview'

Scroll down and activate the 'Disable Auth Checks' and 'Disable Permissions Checks' toggles.

SendGrid Setup

From your SendGrid setup guide, you need to verify an email address or domain to send from. We'll just use a personal email address for this app, but be sure not to use a proper domain address in production. Enter the sender details then verify your account with the email sent to the address registered.

Back in the SendGrid setup guide, select 'Integrate Using Our Web API or SMTP relay,' then select 'Web API'.

Choose node.js as the integration language.

Create a name for your app, generate an API Key, and copy the key for the backend .env file.

App Configuration

.env Setup

If you're using the git repo, there is a file in the backend folder titled .env.example. Input your API keys and secret here, then rename the file to .env.

//backend/.env
NODE_ENV=development
PORT=8080

STREAM_API_KEY= your Stream API key here
STREAM_API_SECRET= your Stream API secret here
SENDGRID_API_KEY= your SendGrid API key here

SendGrid Configuration

Just a few steps are needed to integrate SendGrid in the backend.

Install the following package:
```
  npm install --save @sendgrid/mail
```

In the index.js file, require the SendGrid package:

  const sgMail = require('@sendgrid/mail');

In //backend/routes.index.js, change the to and from email addresses. The from address must be the email address you registered and verified as a sender with SendGrid:

  //backend/routes.index.js
    const msg = {
      to: 'recipient@example.com',
      from: 'yourSendGridVerifiedEmail@example.com',
      subject: 'Stream Chat: Your client started a Support Chat Session',
      html: `Hello, \n Your client, ${firstName} ${lastName} started a chat with the support team chat widget on ${createdAt}. \n
      Here is the transcript of the chat: \n ${transcript} END OF TRANSCRIPT \n You can reach your client at ${email}. \n This message was sent to you from Stream Chat`,
    };

Initial Run

The app is split into a frontend folder created using stream-chat-react and a backend folder created using npm express-generator.

To start the app on your machine run npm install and npm run start on both frontend and backend folders. Once running, navigate to http://localhost:3000 to see the frontend. Now, we can dive into how this app works.

Registration

When a user visits http://localhost:3000, they input their credentials which are sent to the backend /customer-login route.

The first half of the register function sends the form data. The second half receives data from the backend to initialize the chat app and join the correct channel. Again, for more depth on this portion, check out this post.

//frontend/src/App.js:14
const register = async (e) => {
  try {
    e.preventDefault();

    const response = await fetch('http://localhost:8080/customer-login', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        firstName,
        lastName,
        email,
      }),
    });

    const { customerId, customerToken, channelId, streamApiKey } = await response.json();
    const chatClient = new StreamChat(streamApiKey);

    await chatClient.setUser(
      {
        id: customerId,
        name: firstName,
      },
      customerToken,
    );

    const channel = chatClient.channel('messaging', channelId);

    setChatClient(chatClient);
    setChannel(channel);

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

The customer-login endpoint, found in the backend API, cleans the user input, sets up our Stream Chat client, creates a new Stream Chat channel, and sends the information required to join that channel, back to our frontend.

//backend/routes/index.js:27
router.post('/customer-login', async (req, res) => {
  try {
    const firstName = req.body.firstName.replace(/\s/g, '_');
    const lastName = req.body.lastName.replace(/\s/g, '_');

    const client = new StreamChat(streamApiKey, streamApiSecret);

    [customer, admin] = createUsers(firstName, lastName);

    await client.upsertUsers([
      customer,
      admin
    ]);

    const channel = client.channel('messaging', uuidv4(), {
      members: [customer.id, admin.id],
    });

    const customerToken = client.createToken(customer.id);

    res.status(200).json({
      customerId: customer.id,
      customerToken,
      channelId: channel.id,
      streamApiKey,
    });

  } catch (err) {
    console.error(err);
    res.status(500).json({ error: err.message });
  }
});

The createUsers() method in the snippet above simply creates the customer and admin objects to be registered with our channel. We used a unique identifier with uuidv4 as the second argument to client.channel(), this is will be the channel id. If a channel id is not included as a parameter, Stream will create one based on the chat participant names. By using a UUID we can be sure that no two 'John Smiths' will end up in the same chat.

//backend/routes/index.js:11
function createUsers(firstName, lastName) {
  const customer = {
    id: `${firstName}-${lastName}`.toLowerCase(),
    name: firstName,
    role: 'user',
  };

  const admin = {
    id: 'admin-id',
    name: 'Support Admin',
    role: 'admin'
  };

  return [customer, admin];
}

To keep things simple, this app will focus on the customer experience of our chat app. The channel creation above assumes a generic Support Admin will join the other end of the chat.

Chat Window

Once the user has registered, the chatClient and channel get configured, the following boolean on line 52 allows for the CustomerChat component to be loaded:

//frontend/src/App.js:52
 if (chatClient && channel) {
    return (
      <CustomerChat
        channel={channel}
        chatClient={chatClient}
        firstName={firstName}
        lastName={lastName}
        email={email}
      />);
  }

The necessary props are sent to the CustomerChat component, which returns the following jsx:

//frontend/src/CustomerChat.js:39
return (
        <div className="App">
            <Chat client={chatClient} theme={'messaging light'}>
                <Channel channel={channel}>
                    <Window>
                        <ChannelHeader />
                        <MessageList />
                        <MessageInput />
                    </Window>
                    <Thread />
                </Channel>
            </Chat>
        </div>
    );
}

This is all that's required for Stream to set up an elegant and customizable chat window. Check out Stream's free UX kits to add some polish.

Sending a Chat Transcript to the Backend

Rather than prompting users to send a chat transcript with a button, this app will automatically POST the transcript to the backend when the user closes their browser window or tab. This is achieved using the useEffect() React Hook. Here's how...

//frontend/src/CustomerChat.js:6
useEffect(() => {
    const handleUnload = (event) => {
        event.preventDefault();
        fetch('http://localhost:8080/email-transcript', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                messages: channel.state.messages,
                firstName: firstName,
                lastName: lastName,
                email: email,
                createdAt: channel.data.config.created_at
            })
        });
        event.returnValue = '';
    };

    window.addEventListener('beforeunload', handleUnload);

    return () => {
        window.removeEventListener('beforeunload', handleUnload);
    };
}, [channel, firstName, lastName, email]
);

The useEffect() above initiates an event listener to listen for beforeunload (user closing the browser window), and will run the handleUnload function when the event is eventually triggered.

handleUnload initiates a POST to the backend. All the data needed for a transcript is conveniently bundled in the Stream channel object. This object contains loads of useful information, including all messages sent in the channel.

The Intricacies of useEffect()

We limited the triggering of useEffect() by including a second argument array: [channel, firstName, lastName, email]. useEffect() will only be triggered if one of the elements in that array has had its state changed.
The removeEventListener() function is an optional cleanup function. React will perform this function when the component unmounts, ensuring there's only one event listener.
Note that the event.returnValue = ''; is a requirement for Chrome's beforeunload event listener to work properly.

One of the caveats of using this method is the on-close popup.

If a user is in an hour-long support chat, this is a helpful feature; if you're looking for something different in your production, WebSockets provide a different experience but are outside the scope of this post.

Receive the Frontend Transcript

The following snippet handles the chat transcript from the frontend:

//backend/routes/index.js:59
router.post('/email-transcript', async (req, res) => {
  const messages = req.body.messages;
  const { firstName, lastName, email, createdAt } = req.body;

  let transcript = messages.map((message) => {
    return (`<li>FROM: ${message.user.id}</li>\n<li>MESSAGE: ${message.text}</li>\n`);
  });

  sgMail.setApiKey(sendgridApiKey);

  const msg = {
    to: 'recipient@example.com',
    from: 'sendgridVerifiedEmail@example.com',
    subject: 'Stream Chat: Your client started a Support Chat Session',
    html: `Hello, \n Your client, ${firstName} ${lastName} started a chat with the support team chat widget on ${createdAt}. \n
    Here is the transcript of the chat: \n ${transcript} END OF TRANSCRIPT \n You can reach your client at ${email}. \n This message was sent to you from Stream Chat`,
  };

  try {
    sgMail.send(msg);
    res.status(200).end;
  }
  catch{ (err) => console.log(err.response.body); }

});

Let's dissect this a bit. First, the req.body is destructured to extract the information we need for our transcript. Next, a transcript is assembled in a simple html string by mapping() over each message. The result will look like this:

The message object provided by Stream contains a plethora of data. The Stream Documentation shows all the options you could include in your email transcripts.

Next, we send SendGrid our API Key sgMail.setApiKey(sendgridApiKey) and build the msg object. Just use any email address you can check in the to field for now. The from field must match the email address you registered and verified with SendGrid as a sender. Again, feel free to customize the subject and html fields as desired.

Finally, we use sgMail.send(email) in a try catch block. This is done because errors can otherwise be swallowed in the response from SendGrid. In a couple of seconds, you will receive the email in your inbox! Voila!

Closing thoughts

Congrats, you're now able to email your chat transcripts! With just a touch of React knowledge, Stream and SendGrid API do the heavy lifting for us. Parouse some of the other posts on the Stream Blog to see more of its functionality!

Send Chat Transcripts to HubSpot

Taylor Graham — Wed, 12 Aug 2020 22:49:45 +0000

This tutorial will explore how to make a chat widget that connects to the HubSpot CRM to (1) create or update a HubSpot CRM Contact with the user’s info, and (2) save chat transcripts in HubSpot. We’ll use the versatile Stream Chat client and its webhooks to accomplish this. The steps provided here will help you learn how to leverage webhooks to interact with HubSpot CRM, based on any events within your chat widget.

Overview:

Open a free Stream account and configure an API key
Configure a HubSpot CRM account to connect to the HubSpot API
Build a backend that
1. Creates or updates the user’s info to a HubSpot CRM Contact
2. Starts a frontend chat widget using Stream
3. Opens a private chat channel for the user and a sales representative
4. Sends data back to the frontend for the user to join the chat channel
5. Logs all messages in the chat channel to the HubSpot CRM using webhooks

The code for this app can be found in the Git Repo here. If you'd like to follow along, make sure you're using a relatively recent version of node.js, run the configuration steps below, then run the following terminal commands in the frontend and backend directories:

npm install
npm run start

Once running, navigate to http://localhost:3000 to see the frontend.

Read this tutorial if you want to...

Learn how to use webhooks
Build a support/sales style chat widget
Create HubSpot contacts and message logs based on your chat widget
Create HubSpot and Stream accounts and get API Keys
Set up a frontend/backend Stream Chat app
Create a Chat Widget that automatically saves the chat log in HubSpot CRM (using Stream Chat's webhook)
Set up a private, Frontend/Backend Stream Chat

These topics will be covered using Express JS and React, but the methodologies can be ported to most languages and frameworks.

What's not covered

This tutorial focuses on the mechanics of setting up the backend of a chat widget to connect to and update HubSpot. Specifics on creating the React frontend will not be the priority.
The GitHub repo for this project includes a fully functional registration form and frontend for Stream Chat, but not every aspect will be covered in depth.

Step 1: Account set up

To get up and running, perform the following steps:

Clone the git repo
Set up a free Stream Account and configure an API Key and Secret
Set up HubSpot and configure your HubSpot API Key
Set chat_transcript as a custom contact property field in HubSpot
Add your unique keys to a .env file

Set-up Your Stream Account

Sign up for a Stream Trial.
To generate a Stream API Key and API Secret, navigate to your Stream.io Dashboard.
Click "Create App."

Give your app a name, select "Development" and click "Submit".

Stream will generate a Key and Secret for your app. You need to copy these into your .env file.

Set up a free HubSpot Account and configure an API Key there, as well

Set-up Your HubSpot Account

Create your account at HubSpot and complete the registration form.
Once you are logged into the HubSpot Dashboard, go to Settings in the upper-right corner.

Navigate to Integrations > API Key, and create a key. If you're a robot, stop here. You've gone too far...

Copy the HubSpot API key and paste it in the .env

Your HubSpot account can now be accessed through this API key.

Create a Custom HubSpot Property for a Chat Transcript

To save the chat transcript, we will use a custom property field in HubSpot. Here's how to add a custom property to your HubSpot CRM:

Navigate to your contacts:

Click the 'Actions' drop down menu, then 'Edit Properties':

Click the 'Create Property' button and add whatever type of custom fields you'd like to use. You want to set the Field Type to multi-line text.

Set Your Local Environment Variables

Copy the file .env.example to your own .env.

Add your API keys and secret to .env.

//backend/.env
NODE_ENV=development
PORT=8080

STREAM_API_KEY= your Stream API key here
STREAM_API_SECRET= your Stream API secret here
HUBSPOT_API_KEY=your HubSpot API key here

Step 2: Webhook Setup

What Are Webhooks?

If you’re new to webhooks, here’s a quick explanation of how they work. Webhooks are like push notifications between apps. Before webhooks, backend services had to poll one another to react to updates or changes. The concept of pushing events came along and the responsibility was inverted. Instead of polling, the consuming service simply waits to be notified of an event. The event producing app is configured to send an HTTP POST, containing the event's data, to the specified URL. The consumer listens and processes events at that URL. Stream’s webhooks can alert your app about anything that happens in a Stream Chat. This tutorial's app uses Stream’s webhooks to push new messages to our backend, and our backend uses that information appropriately.

Setting up a Stream webhook

Stream offers a lot of depth and versatility in its webhooks. To start using them, let's first tell the Stream where to send webhook events. Stream’s webhooks require a publicly routable URL to communicate with. This project runs off a localhost, so we need to somehow make our localhost address accessible. We’ll use ngrok to create a secure, temporarily public address for our backend. If you already have a public URL running, you can skip the ngrok steps and just set up an endpoint URL there.

ngrok setup

Register for a free ngrok account and download the software. If you prefer to use Homebrew to install ngrok, use the following terminal command: brew cask install ngrok.
Once installed, connect your account using the authtoken provided by ngrok at the same link as above. Just run ngrok authtoken your_token_goes_here in the terminal.
To start ngrok, use the terminal command: ngrok http 8080: which tells ngrok to serve publicly whatever you are serving locally at http://localhost:8080.
The terminal opens the ngrok app (screenshot below) and shows the public URLs.

Now, whatever is hosted at localhost:8080 can receive HTTP requests at this URL. (The URL boxed in red is the publicly available URL).

Quick Detour: How ngrok Works

A very brief overview of how the ngrok app works:

ngrok sets up a random, public URL on its servers. This URL can receive HTTP requests (eg: webhooks).
ngrok opens an SSH connection with your local machine.
Requests to the ngrok public URL get proxied through an SSH tunnel to your local machine.
Run your backend as you normally would, through any port (eg: localhost:8080).
ngrok receives the SSH request, translates it back to a local HTTP request, and sends it to your app a the specified port.
The local app runs as it normally would, sending a response to port 8080.
ngrok receives responses from your app and sends the responses back to the ngrok server via SSH

Configure Your Webhook URL in Stream

Use the following steps to register your ngrok (or other public URL) with the Stream API:

Navigate to getstream.io and click the "Dashboard" button on the upper right:

Once in the dashboard, click your app name:
Next, from the navbar select the chat dropdown and select Chat Overview
Scroll down to the Chat Events box. Select the following options: Webhook: active, Disable Auth Checks, and Disable Permissions Checks. (Note that these options are important to consider using if using this app in a production environment). We'll create a /webhooks handler in our backend, so just add your public ngrok URL and /webhooks to the webhook URL textbox. Save your settings.

The Stream API will now send a POST to that URL anytime an event takes place in your Stream App, with details about the event. The next step is to accept that webhook in our app's backend.

Step 3: Registration Endpoint

Before we can handle a user's chat event, we need to register them in both Stream and HubSpot. The backend file backend/routes/index.js is the core of this app. Let's take a peek at the important initialization steps

//backend/routes/index.js:3
const { StreamChat } = require('stream-chat');
const { default: axios } = require('axios');

const apiKey = process.env.STREAM_API_KEY;
const apiSecret = process.env.STREAM_API_SECRET;
const hubspotKey = process.env.HUBSPOT_API_KEY;

The stream-chat library is the all-in-one chat creator, which handles all the heavy lifting of for our chat portion of the app. axios will be used to perform external HTTP requests to HubSpot. Finally, several of our methods will use the .env variables, so we call them out at the top for readability.

Registration: Start a chat

index.js contains two endpoints: one for registering a user, and one for receiving webhooks. The registration endpoint is responsible for:

Accepting the user's frontend form input
Creating a HubSpot customer entry
Initializing a Stream chat client
Registering the user and support admin with Stream
Creating a Stream chat channel

Here's the primary registration endpoint, which we will be breaking down step by step.

//backend/routes/index.js:46
router.post('/registrations', async (req, res) => {
  try {
    const firstName = req.body.firstName.replace(/\s/g, '_');
    const lastName = req.body.lastName.replace(/\s/g, '_');
    const email = req.body.email.toLowerCase();
    const hubspotContactId = await createHubspotContact(firstName, lastName, email);

    const client = new StreamChat(apiKey, apiSecret);

    [customer, admin] = createUsers(firstName, lastName);

    await client.upsertUsers([
      customer,
      admin
    ]);

    const channel = client.channel('messaging', hubspotContactId, {
      members: [customer.id, admin.id],
    });

    const customerToken = client.createToken(customer.id);

    res.status(200).json({
      customerId: customer.id,
      customerToken,
      channelId: channel.id,
      apiKey,
    });

  } catch (err) {
    console.error(err);
    res.status(500).json({ error: err.message });
  }
});

Registration: Create a Contact in the HubSpot API

First, the name inputs are normalized by replacing spaces with '_', and the email is converted to lower case. These values will be stored in HubSpot, so having uniform styling makes it easier to call them when needed. Next, a separate method, createHubspotContact() is called to connect to the HubSpot API and create a new contact in the CRM.

//backend/routes/index.js:10
async function createHubspotContact(firstName, lastName, email) {
  let hubspotContact;
  try {
    hubspotContact = await axios.get(`https://api.hubapi.com/crm/v3/objects/contacts/${email}/?idProperty=email&hapikey=${hubspotKey}`);
  }
  catch {
    hubspotContact = await axios.post(`https://api.hubapi.com/crm/v3/objects/contacts?hapikey=${hubspotKey}`,
      {
        properties: {
          'firstname': firstName,
          'lastname': lastName,
          'email': email,
        }
      }
    );
  }

  return hubspotContact.data.id;
}

Axios is used to first check our HubSpot CRM for an existing contact with the email submitted on the front end. If not, a catch is used to create it. Take note that this use of catch is agressive, since there are many ways the try could fail. This implementation keeps things simple, but make sure you have good error handling in your production applications.

Within the catch, we use axios to POST the frontend user's inputs to HubSpot's endpoint. The secret hubspotKey is passed to let HubSpot know (1) which account to add the contact to, and (2) that the request is legitimate. The properties passed can match any HubSpot contact property, including custom properties. This method returns HubSpot's unique contact id, which will be helpful later in our webhook.

Registration: Create a Client and Users

Once the contact is created, we instantiate a Stream client bypassing our unique Stream API Key and Stream Secret.

//backend/routes/index.js:53
const client = new StreamChat(apiKey, apiSecret);

To allow our chat users to join, they will first need to be registered with Stream. For this app, only the frontend user and a customer support user are required.

The createUsers method creates the users in Stream, with optional properties to control each user's permissions. The method accepts the user inputs to create the customer object and creates a generic admin user to represent a technical or sales representative on the other end of the chat.

//backend/routes/index.js:30
function createUsers(firstName, lastName) {
  const customer = {
    id: `${firstName}-${lastName}`.toLowerCase(),
    name: firstName,
    role: 'user',
  };

  const admin = {
    id: 'admin-id',
    name: 'Support Admin',
    role: 'admin'
  };

  return [customer, admin];
}

There are other ways to create users in Stream, but this technique illustrates some of Stream's flexibility in doing so. User objects only require an id, but Stream offers a handful of built-in property options, and accepts any custom property you want to make.

Back in the registration handler, the user objects are passed to upsertUsers, which registers the users with the client.

//backend/routes/index.js:57
await client.upsertUsers([
  customer,
  admin
]);

Registration: Create a Channel

Next, the /registrations handler starts a Stream channel. Stream's channel() method accepts parameters: ('type', 'id', {channel-data}). Our app uses:

//backend/routes/index.js:62
const channel = client.channel('messaging', hubspotCustomerId, {
  members: [customer.id, admin.id],
});

There are several different channel types, which are customizable. For this session, we'll just use 'messaging'.

Here we use the HubSpot record, hubspotCustomerId as our channel id so we can look this up easily in our webhook. In a production application, you'd likely want to store this information in a database; however, here we choose to keep it simple by just leveraging the channel id to persist this information.

The third argument commands that only users with Stream user ids matching customer.id or admin.id are allowed to enter this channel.

Registration: Respond to the Frontend

Last, but not least: we create a customerToken and respond to the frontend of the application with all the data needed to join the chat we have created.

//backend/routes/index.js:66
const customerToken = client.createToken(customer.id);

At this point, the frontend code has everything it needs to start a chat session. We won't touch on the frontend code in this post. It follows a similar process as the backend. Feel free to check out the source code if you're curious. To learn more check out this example.

Step 4: Webhook Handler

The backend/routes/index.js file also contains the /webhooks endpoint. Here is the process flow of this endpoint:

Receive a request from the Stream webhook service.
If the webhook is initiated by a new message event (message.new), continue, otherwise do nothing.
Use axios to retrieve any existing chat transcript from HubSpot.
Append the new message to the previous transcript record.
Use axios to update the custom chat_transcript HubSpot contact property.

And here's the code:

//backend/routes/index.js:81
router.post('/webhooks', async (req, res) => {
  if (req.body.type === 'message.new') {
    try {
      const newMessage = req.body.message;
      const hubspotContactId = req.body.channel_id;
      let updatedTranscript;

      const customerResponse = await axios
        .get(`https://api.hubapi.com/crm/v3/objects/contacts/${hubspotContactId}`, {
          params: {
            properties: 'chat_transcript',
            archived: false,
            hapikey: hubspotKey,
          }
        });
      let localTranscript = customerResponse.data.properties.chat_transcript;
      if (!localTranscript) { localTranscript = ""; }
      updatedTranscript = `${localTranscript}\n FROM: ${newMessage.user.id}\n SENT AT: ${newMessage.created_at}\n MESSAGE: ${newMessage.text}`;

      await axios
        .patch(`https://api.hubapi.com/crm/v3/objects/contacts/${hubspotContactId}?hapikey=${hubspotKey}`, {
          properties: {
            'chat_transcript': updatedTranscript,
          }
        });
    } catch (err) {
      res.status(200).end();
    }
  }

  res.status(200).end();
});

Let's break down the handler above. Stream's webhook sends an HTTP POST request to this handler anytime an event occurs in our app. We only want to update chat_transcript when a new message is sent, so we add an if then to execute this function only when message.new is the webhook initiator. Stream offers over twenty webhook initiators.

HubSpot's API has plenty of useful endpoints as well. We just need to call two of them. The first call is to retrieve any existing chat transcript saved in HubSpot. We previously set the Stream Chat channel id to match the HubSpot contact id, making this lookup much easier. We specify the exact contact we want to check by including the hubspotCustomerId and ask for just their chat transcript using chat_transcript as a parameter.

Note that custom contact properties in HubSpot are called using the Label Name shown in the HubSpot property editor window (see below). If you included spaces or dashes in your contact property, use an underscore when referencing it in your request body.

Line 96 is used to avoid a null response if this is the first time the property is being written. The chat transcript can be customized with whatever properties are useful for your application. The string literal used in this example includes the user.id, created_at date, and message text, each of which is included in the Stream webhook request body. To see the available properties provided by the webhook, see Stream's documentation.

The second HTTP request is sent to the HubSpot API's contact update URL. The request specifies the property to be updated and what to update it with. Multiple properties can be updated at once if desired.

Finally, we always respond with a 200. This ensures that our connection with the HubSpot API will be closed when our task is done, even if our code fails. Some webhook integrations might flag your app for repeated timeouts or non-200 status code responses.

Here's the final result:

Closing Thoughts

What may sound like a daunting task can be done quite artfully when using the right tools for the job. In this case, the right tools are a chat app with webhooks (Stream), and tactful use of HubSpot API endpoints. Hopefully, this post has inspired you creatively and equipped you with skills to make your app tasks easier.

How to Capture Leads From Live Chat In HubSpot - The Stream Blog

Taylor Graham — Wed, 29 Jul 2020 18:11:47 +0000

In this tutorial, learn how to build a Stream chat widget that connects to the HubSpot CRM to automatically create a new contact when a customer initiates a chat. This widget, backed by the Stream chat API, can be easily embedded to your site as a chat widget for sales, support, or a landing page. You can take this knowledge to build powerful sales tools that seamlessly integrate with the HubSpot API.

The application utilizes a React frontend and an Express backend. The tutorial explains how to use some basic features of the powerful Stream Library, which handles most of creating a chat widget.

Overview

The application utilizes a React frontend and an Express backend. The tutorial explains how to use some basic features of the powerful Stream Library, which handles most of the chat widget UX.

The code required for this tutorial is available in GitHub. If you'd like to build the app from scratch, use npm express generator --no-view for the backend, and create-react-app for the frontend. Be sure to use the package.json file from this repository to get the required dependencies loaded in your version. Otherwise, you can clone the repo from GitHub and follow along.

Prerequisites

This tutorial is written to work with a wide range of skillsets. It requires basic knowledge of React Hooks, Express, and Node.js. The code is built and run with the Node Package Manager and is made to run locally. We also use dotenv.

You'll need to set up a free Stream Account and a free HubSpot Account.

Not Covered

We'll create a Stream Client and register a user with a chat channel, but we won't specifically describe how to set up support/sales user experience. We'll focus primarily on the customer's experience.
We won't explore notifying a customer representative when a chat is initiated.
Styling and CSS: this app uses the out-of-the-box styling of Stream. Check out Stream's free UI Kit to make your chat app shine ✨.
Encryption or Authentication. To add some more security to your app, check out this post, which shows how to authenticate users and encrypt messages.

What We'll Do

Set up a free HubSpot account and activate a key.
Set up a free Stream account and activate a key.
Create a React form to capture the customer's first name, last name, and email.
Use an Express backend to:
1. Send user form data to your HubSpot Dashboard
  - Bonus: how to create custom HubSpot Contact Fields!
2. Create a one-on-one, private Stream Chat Channel
3. Respond to the frontend with required credentials to join
Join and load the specified Chat in the frontend using Stream's built-in UI Components.

Let's Get Down To Business

First, we need to set up your unique API keys from HubSpot and Stream. These authenticate your app and are to be stored in a secure .env file. The Git Repo includes a .env.example file you can use as a template. Add your unique keys to this file, then remove '.example' from the file name.

// backend/.env.example
NODE_ENV=development
PORT=8080

STREAM_API_KEY=your stream API key goes here
STREAM_API_SECRET=your stream API secret goes here
HUBSPOT_API_KEY=your HubSpot API key goes here

Set-up your HubSpot

Create your account at HubSpot and complete the registration form.
Once you are logged into the HubSpot Dashboard, go to Settings in the upper-right corner

Navigate to Integrations > API Key, and create a key. If you're a robot, stop here. You've gone too far...

Copy the HubSpot API key and paste it in the .env file located in the backend folder. HubSpot's API is authenticated via this key.

Set-up your Stream Account

Sign up for a Stream Trial.
To generate a Stream API Key and API Secret, navigate to your Stream.io Dashboard.

Then click on "Create App", and complete the form like in the following screenshot.

Give your app a name, select "Development" and click "Submit".

Stream will generate a Key and Secret for your app. You need to copy these into your backend .env file as well.

Spin up the app

If you haven't already, run npm install on both the frontend and backend folders.
Once your packages are installed, run either npm start or nodemon on both the frontend and backend folders.

Registration Form

When opening this app in the browser, the user will see this login form:

The following snippet shows how the registration form is created. We'll ignore the chat app code for now, as indicated with // ....

//frontend/src/App.js:7
function App() {
  const [email, setEmail] = useState('');
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
//...
    return (
      <div className="App container">
        <form className="card" onSubmit={register}>
          <label>First Name</label>
          <input
            type="text"
            value={firstName}
            onChange={(e) => setFirstName(e.target.value)}
            placeholder="first name"
          />
          <label>Last Name</label>
          <input
            type="text"
            value={lastName}
            onChange={(e) => setLastName(e.target.value)}
            placeholder="last name"
          />
          <label>Email</label>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="email"
          />
          <button className="btn btn-block" type="submit">
            Start chat
          </button>
        </form>
      </div>
    );
  }
}

export default App;

The simple form above sets up three useStates to update and store the user input fields. The form's onSubmit function, register(), will post the user credentials to the backend.

Registering User with Backend

Let's take a look at the first half of the frontend's register() function. The second half of this function handles the response from the backend, which we will cover next. We use an asynchronous await function to give the backend time to do its work before we continue rendering in the frontend, and wrap the work in a try block for error handling.

 //frontend/src/App.js:15
 const register = async (e) => {
    try {
      e.preventDefault();
      var response = await fetch('http://localhost:8080/registrations', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          firstName,
          lastName,
          email,
        }),
      });
    // ...
    } catch (err) {
        console.error(err)
    }

Configure the Backend

A brief explanation of backend routing
Let's take a peek at how we handle the backend routing. npm express generator sets up this routing for us, but let's run through it in case it's new to you. To start our server we run npm start. The command npm start is a script included in backend/package.json. This script tells node to run the file backend/bin/www, which in turn tells Express to start a server on port 8080 (the port number can be changed in the .env file). Any communications from the frontend are directed to this port. The www file also configures the api.js file to handle those requests. Next, api.js tells Express to .use the file backend/routes/index.js which is mounted under the root path ('/'). In other words: our request from the front end will get routed to index.js. (To learn more about how this works, take a peek at this tutorial).

Before we dive into handling our routes, let's configure index.js:

//backend/routes/index.js:1
const express = require('express');
const router = express.Router();
const StreamChat = require('stream-chat');
const Hubspot = require('hubspot');
require('dotenv').config();

const apiKey = process.env.STREAM_API_KEY;
const apiSecret = process.env.STREAM_API_SECRET;

The Stream Chat library is Stream's Chat App library that does all the heavy lifting of creating the chat app itself. HubSpot offers an excellent library we will utilize as well.
By requiring and configuring dotenv, we're able to access the private variables we set up in .env. Call these variables using process.env. The hubspot library will make connecting to their API a breeze.

Backend Registration Endpoint Process Flow

When a user registers to start a chat, the handler function, configured via router.post('/registrations'), takes over. This handler is our primary backend function, and will call a few handy methods to set up our chat session. Let's review the router function, then step through it to understand it.

Call createHubspotContact() to create a HubSpot contact
Call createUsers() to create our customer and supporter chat members
Register our app as a Stream client
Register (or update) users with our Stream client using upsertUsers()
Create a private chat channel in our client
Create a customerToken for the frontend to join said channel
Respond to the frontend with all required data to start the client in a browser

//backend/routes/index.js:46
router.post('/registrations', async (req, res, next) => {
  try {
    await createHubspotContact(firstName, lastName)

    const client = new StreamChat.StreamChat(apiKey, apiSecret);

    [customer, supporter] = createUsers(firstName, lastName)

    await client.upsertUsers([
      customer,
      supporter
    ]);

    const channel = client.channel('messaging', customer.id, {
      members: [customer.id, supporter.id],
    });

    const customerToken = client.createToken(customer.id);

    res.status(200).json({
      customerId: customer.id,
      customerToken,
      channelId: channel.id,
      apiKey,
    });

  } catch (err) {
    console.error(err);
    res.status(500).json({ error: err.message });
  }
});

Creating Custom Contact Properties in HubSpot

This application will update a customized contact property in the HubSpot CRM.
To use a custom property follow these steps in your HubSpot Dashboard:

Navigate to your contacts:

Click the 'Actions' drop down menu, then 'Edit Properties':

Click the 'Create Property' button and add whatever type of custom fields you'd like to use.

Connecting to the HubSpot API

The backend router first creates the HubSpot contact with the createHubspotContact() method:

//backend/routes/index.js:10
async function createHubspotContact(firstName, lastName) {
  const hubspot = new Hubspot({
    apiKey: process.env.HUBSPOT_API_KEY,
    checkLimit: false
  })

  const contactObj = {
    properties: [
      { property: 'firstname', value: firstName },
      { property: 'lastname', value: lastName },
      { property: 'email', value: email },
      {
        property: 'your_custom_property',
        value: 'anything you want, even a multi-line \n string'
      }
    ]
  }
  const hubspotContact = hubspot.contacts.create(contactObj)

The contactObj is the argument to HubSpot's .create() method. Any HubSpot contact property can be used in contactObj. Check out their full list of properties here. Note how we used your_custom_property as a key. The code will throw an error if you don't have a matching property in your HubSpot CRM.

Customer Stream Registration

To keep a chat secure, we can specify which users can use our client. Let's create a customer object for our frontend user, and a supporter object to represent a sales rep or support rep on the other end of the chat.

//backend/routes/index.js:30
function createUsers(firstName, lastName) {
  const customer = {
    id: `${firstName}-${lastName}`.toLowerCase(),
    name: firstName,
    role: 'user',
  };

  const supporter = {
    id: 'adminId',
    name: 'unique-admin-name',
    role: 'admin'
  }
  return [customer, supporter]
}

Note the keys included for the users above. Stream supports a myriad of properties you can add to your users, but for this example, we'll simply add an id, name, and role.

Back in our primary backend function, the upsertUsers() method registers both our customer and our supporter admin so they can use our app.

Create a Stream channel

Back to the router.post function. Now that we have our client configured with the proper credentials, and our users registered with that client, we can open a channel for the two to chat. Stream's channel() method first accepts a channel type; 'messaging' is the best type for this app.

Each channel on your client should have a unique name. For simplicity, we use the customer's email address, so that if the user is disconnected from their chat, they can return to it by entering the same credentials into the registration form. In your production application, you should create secure id's that can't be guessed.

The members argument specifies which users can join this channel. This is not required for the channel, but by specifying the members, we add a layer of security by preventing other users from joining the channel. If members is not included with the arguments, the channel will be public by default.

Stream provides a quick and easy token generator: createToken(). This will be used in the frontend to verify the user. The final response to the frontend includes all information required to load the client in the browser and join the channel specified.

Customer Joins Chat in Frontend

Once the backend is finished, the frontend needs to:

Decompose the response
Join the Stream client using the apiKey
Establish the browser's user using the customerToken
Join the specific channel using the channelId
Render the Stream Chat

The snippet below uses //... to indicate code we already covered in the first section.

//frontend/App.js:7
function App() {
  //...
  const [chatClient, setChatClient] = useState(null);
  const [channel, setChannel] = useState(null);

  const register = async (e) => {
    try {
      e.preventDefault();
      var response = await fetch('http://localhost:8080/registrations', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          firstName,
          lastName,
          email,
        }),
      });

      const { customerId, customerToken, channelId, apiKey } = await response.json();
      const chatClient = new StreamChat(apiKey);
      await chatClient.setUser(
        {
          id: customerId,
          name: firstName,
        },
        customerToken,
      )
      const channel = chatClient.channel('messaging', channelId);
      setChatClient(chatClient);
      setChannel(channel)

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

  if (chatClient && channel) {
    return (
      <div className="App">
        <Chat client={chatClient} theme={'messaging light'}>
          <Channel channel={channel}>
            <Window>
              <ChannelHeader />
              <MessageList />
              <MessageInput />
            </Window>
            <Thread />
          </Channel>
        </Chat>
      </div>
    );
  } else {
    return (
      //...
    );
  }
}

The responses from the backend are used in the same manner for the frontend:

Establish the client using the Stream apiKey
Set the frontend user, supplying the customerToken
Join the channel we already created

The chatClient and channel states determine what to render on the page. After a successful response from the backend, these objects are present, and the Stream Chat components will be rendered.

To create a fully functional chat component from scratch would be a monumental task. Using the Stream's components gets you going quickly. Keep in mind that the Stream Chat Components used here are the most basic, but Stream offers deeper customization.

That's a Wrap

So, there you have it: a customizable shat widget that easily pushes user inputs to your HubSpot CRM. Stay tuned for more posts on how to connect HubSpot with agile Stream apps!

DEV Community: Taylor Graham

Create A Support Chat Admin Dashboard

Requirements

Background

Stream Configuration

Disable Stream Auth Checks and Permissions

.env Configuration

Spin 'Er Up

Router

Customer Login (Frontend)

Customer Login (Backend)

Chat Initialization (Frontend)

Render Customer Chat

Admin Login

Render Admin Dashboard

Review

Save and Send Chat Transcripts with SendGrid

What is Stream Chat?

Requirements:

Read this tutorial if you want to...

What's not covered

Account Configuration

Stream Setup

SendGrid Setup

App Configuration

.env Setup

SendGrid Configuration

Initial Run

Registration

Chat Window

Sending a Chat Transcript to the Backend

The Intricacies of useEffect()

Receive the Frontend Transcript

Closing thoughts

Send Chat Transcripts to HubSpot

Overview:

Read this tutorial if you want to...

What's not covered

Step 1: Account set up

Set-up Your Stream Account

Set-up Your HubSpot Account

Create a Custom HubSpot Property for a Chat Transcript

Set Your Local Environment Variables

Step 2: Webhook Setup

What Are Webhooks?

Setting up a Stream webhook

ngrok setup

Quick Detour: How ngrok Works

Configure Your Webhook URL in Stream

Step 3: Registration Endpoint

Registration: Start a chat

Registration: Create a Contact in the HubSpot API

Registration: Create a Client and Users

Registration: Create a Channel

Registration: Respond to the Frontend

Step 4: Webhook Handler

Closing Thoughts

How to Capture Leads From Live Chat In HubSpot - The Stream Blog

Overview

Prerequisites

Not Covered

What We'll Do

Let's Get Down To Business

Set-up your HubSpot

Set-up your Stream Account

Spin up the app

Registration Form

Registering User with Backend

Configure the Backend

Backend Registration Endpoint Process Flow

Creating Custom Contact Properties in HubSpot

Connecting to the HubSpot API

Customer Stream Registration

Create a Stream channel

Customer Joins Chat in Frontend

That's a Wrap

`.env` Configuration