Available at https://app.papercups.io/demo
First, sign up at https://app.papercups.io/register to get your account token. Your account token is what you will use to pass in as the
accountId prop below.
Paste the code below between your
@papercups-io/chat-widget node module:
Place the code below in any pages on which you would like to render the widget. If you'd like to render it in all pages by default, place it in the root component of your app.
These are the props you can pass into your
<ChatWidget /> React component, or the fields you can specify in your
|Your Papercups account token||N/A|
|The title in the header of your chat widget||Welcome!|
|The subtitle in the header of your chat widget||How can we help you?|
|The placeholder text in the new message input||Start typing...|
|The placeholder text in the optional email input||Enter your email|
|The notification text when new messages arrive and the chat window is closed||View new messages|
|The theme color of your chat widget|
|An optional initial message to greet your customers with||N/A|
|If you want to show whether you (or your agents) are online or not|
|The text shown when you (or your agents) are online||We're online right now!|
|The text shown when you (and your agents) are offline||We're away at the moment.|
|Identifying information for the customer, including ||N/A|
|The base URL of your API if you're self-hosting Papercups||https://app.papercups.io|
|An override of the iframe URL we use to render the chat, if you chose to self-host that as well||https://chat-widget.papercups.io|
|If you want to require unidentified customers to provide their email before they can message you|
|If you want the chat widget to open as soon as it loads|
|A link to a custom icon image URL||N/A|
|Callback fired when chat is loaded||N/A|
|Callback fired when chat is opened||N/A|
|Callback fired when chat is closed||N/A|
|Callback fired when message is sent||N/A|
|Callback fired when message is received||N/A|
To build the project, run
npm start in the root directory. (If you're running it for the first time, you'll have to run
npm install first.)
To test it out, use the
This will start a development server on http://localhost:3000 by default, and open up the example app in your browser.
By default, the example widget points at development servers for the Papercups API (which runs at http://localhost:4000) and the Papercups chat window (which runs at http://localhost:8080). These values are set with the
iframeUrlOverride props respectively.
If you want to develop against your account in production, you can update these values to the following:
(Note that you can also simply remove these props, since the values above are the defaults.)
You'll also want to update your account token to point to your own account. If you haven't already, create a free account at https://app.papercups.io/register to get started.
Once you have your account token, update the
accountId prop to point at yours.
If you're having any trouble getting started or just want to say hi, join us on Slack! 👋
We welcome any contributions! Please create an issue before submitting a pull request.
When creating a pull request, be sure to include a screenshot! 🎨