Integrating the Papercups chat widget in an ecommerce app

Getting real-time customer questions, feedback, and other quick messages is very important in the ecommerce sector. In this article, you will learn how to integrate a chat widget in your ecommerce application to enable customers to reach you with ease. You’ll be using a Gatsby ecommerce starter for the purposes of this tutorial.

What is Papercups?

Papercups is a live customer chat web app that enables users to contact and interact with their service providers without the need to register. Papercups provides support for Slack integrations, direct integrations in React applications by means of a library, and static applications using the script tag.

Creating a Papercups account

Integrating the Papercups chat widget in your ecommerce site requires that you have a user token. A user token is a unique identifier that maps your Papercups account to the widget in your application, and to get that user token, you have to register.

Visit the registration page and fill in the necessary details:

The company name will be displayed in your chat widget, so it’s advisable to choose an accurate name. Upon signing up, you will be redirected to your new dashboard.

Next, click on the My Profile link under the Account heading on the left-hand sidebar to fill in your profile details. Your screen should look similar screen to the image below:

In the edit profile section, fill in your full name, display name, and profile image URL. The image will then be retrieved from the URL and displayed on the chat widget immediately after you save the profile details.

Exploring the Papercups dashboard

The Papercups dashboard has three sections. In the previous section, you explored the Profile page under the Account section.

On the Account Overview page, you can invite other employees by generating an invite URL. You can also edit the name of the company you initially input during your registration.

Your overview page should look like this:

Your Papercups account token is also displayed on the Account Overview page. It is advisable to keep it safe, as it is a unique identifier.

Inbox section

The Inbox section houses link to all conversations from clients, messages assigned to the current user, prioritized messages, and closed conversations.

Ongoing conversations are listed in the All conversations page. For example:

Conversations assigned to you are listed on the Assigned to me page.

Conversations given top priority are listed on the Prioritized page. This section is particularly useful for indicating conversations that are particularly urgent or that represent unresolved issues.

To prioritize a message, click on the button housing a star on the top right corner. It’ll automatically add the message to the list of prioritized messages.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

In the Closed page, you can view conversations that have been concluded and closed. To close a conversation, click on the check button in the top right corner in the conversation. Closed conversations are listed like this:

Integrations page

The Integrations page lists the services to which you can connect your Papercups account. At the time of writing, Papercups only integrates with Slack.

Adding Papercups to an ecommerce application

In this section, you’ll be adding your Papercups widget to your ecommerce application. You’ll use a Gatsby starter for your ecommerce app. I’ll assume you have a good understanding of Node, npm, and React.

It’s OK if you haven’t used Gatsby; you can check out articles on Gatsby here. If you don’t have the Gatsby CLI installed, install it with the npm command:

npm install -g gatsby-cli

Let’s begin by scaffolding your ecommerce application using the Gatsby CLI tool:

gatsby new papercups-shop https://github.com/alexislepresle/gatsby-shopify-theme

Gatsby does the post-installation process so you don’t have to install anything again. However, if your dependencies weren’t installed, use the command:

npm install

With the installations in place, run your application to get a feel for what it is:

npm run develop

It should load up a page that looks just like this:

The Papercups chat widget has a React library. The chat widget can also be added to static websites using the script tags in the head section. The code for adding the Papercups widget to your application can be found in the Getting started page in the Papercups dashboard.

Let’s add the Papercups widget to the app using the React library since Gatsby is built on React. First, you install the Papercups React library:

npm install --save @papercups-io/chat-widget

After the installation, grab your ready-made widget code from the Getting started page. As expected, Papercups has made it easy — you can customize how your widget will be displayed from either the Getting started page or the prop values in the code.

You can add the widget to whatever page you would like to see it appear on. Traditionally, the widget should be added to the root component so the user can access it on any page.

Next, modify the root component return block located in src/layouts/index.js in your code editor:

        <>
            <Provider>
                <StaticQuery
                    query={graphql`
                    query SiteTitleQuery {
                    site {
                        siteMetadata {
                        title
                        }
                    }
                    }
                `}
                    render={data => (
                        <>
                            <Header siteTitle={data.site.siteMetadata.title} />
                            {children}
                            <Footer />
                        </>
                    )}
                />
            </Provider>
            <ChatWidget
                title='Welcome to YouCompanyName'
                subtitle= 'Ask us anything in the chat window below 😊'
                primaryColor='#1890ff'
                greeting=''
                newMessagePlaceholder='Start typing...'
                accountId='your-account-id'
                baseUrl='https://app.papercups.io'
            />
        </>

Next, refresh your browser tab to reflect the change. You should have a blue icon in the bottom right corner of your page. Clicking on it will open the widget:

The process outlined above applies to all React applications. So, if your e-commerce store isn’t based on Gatsby but on React, you’d follow the same process.

If your ecommerce site is a static one, i.e., HTML and CSS, all you need to do is add the HTML code from the G*etting started* page to your index.html head tag.

Sending and receiving messages

Immediately after a message is sent, it is listed in the conversation page, and an email is sent to your registered address to notify you. You can reply, prioritize, close, or assign the message, as you’ve learned in earlier sections. You can also view the customers’ availability status from your conversations page:

The chat widget is available on every page, so customers can always send messages from anywhere. Here’s a screenshot from another page:

Conclusion

In this article, you have learned how to add Papercups to your Gatsby ecommerce application. You also learned how to perform the basic operations — reply, assign, prioritize, and close messages. The modified code from the starter can be viewed on GitHub.

LogRocket: See the technical and UX reasons why users don’t complete a step in your ecommerce flow

LogRocket is like a DVR for web and mobile apps and websites, recording literally everything that happens on your ecommerce app. Instead of guessing why users don’t convert, LogRocket proactively surfaces the root cause of issues that are preventing conversion in your funnel, such as JavaScript errors or dead clicks. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.

Start proactively monitoring your ecommerce apps — try LogRocket for free.