Abdulazeez Abdulazeez Adeshina Software enthusiast, writer, food lover, and hacker.

Integrating the Papercups chat widget in an ecommerce app

3 min read 1113

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 Papercups Registration Page

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:

The Papercups My Profile Page

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.

We made a custom demo for .
No really. Click here to check it out.

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:

Papercups Account Overview Page

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:

Papercups All Conversations Page

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

The Papercups 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.

The Papercups Prioritized Conversations Page

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.

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:

The Papercups Closed Conversations Page

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 Gatsby Ecommerce Starter App

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:

Our Gatsby App With The Papercups Chat Widget Open

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:

Customer Availability In The All 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:

The Papercups Chat Widget Icon On A Product 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.

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

    Which of these topics are you most interested in?
    ReactVueAngularNew frameworks
    Do you spend a lot of time reproducing errors in your apps?
    YesNo
    Which, if any, do you think would help you reproduce errors more effectively?
    A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently
    Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

    : Full visibility into your web apps

    LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

    In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

    .
    Abdulazeez Abdulazeez Adeshina Software enthusiast, writer, food lover, and hacker.

    Leave a Reply