@papercups-io/chat-builder
Advanced tools
Readme
Papercups chat builder
@papercups-io/chat-builder is a library that allows you to create your own custom chat UI while leveraging the power of Papercups.
Example of an imitation of Intercom's design using the Papercups ChatBuilder component:
npm install --save @papercups-io/chat-builder
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 below.
To create a custom chat UI within the skeleton of a standard chat widget, you can use the header, body, footer, toggle, and notifications props to render custom React components:
import React from 'react';
import {ChatBuilder} from '@papercups-io/chat-builder';
const Example = () => {
const config = {
// Put your personal account ID here
accountId: '__MY_ACCOUNT_ID__',
// Use a `greeting` to set the initial message in the chat
greeting: 'Welcome to my website! Ask me anything below :)',
// Provide some metadata about the person you're chatting with (if available)
customer: {
name: 'Demo User',
// Ad hoc metadata
metadata: {
page: 'github',
},
},
};
return (
<ChatBuilder
config={config}
header={({config, state, onClose}) => {
return <Header {...} />;
}}
body={({config, state, scrollToRef}) => {
return <Body {...} />;
}}
footer={({config, state, onSendMessage}) => {
return <Footer {...} />;
}}
toggle={({state, onToggleOpen}) => {
return <Toggle {...} />;
}}
/>
);
};
To create a completely custom UI from scratch, pass in your custom chat component as children like so:
import React from 'react';
import {ChatBuilder} from '@papercups-io/chat-builder';
const Example = () => {
const config = {
// Put your personal account ID here
accountId: '__MY_ACCOUNT_ID__',
// Use a `greeting` to set the initial message in the chat
greeting: 'Welcome to my website! Ask me anything below :)',
// Provide some metadata about the person you're chatting with (if available)
customer: {
name: 'Demo User',
// Ad hoc metadata
metadata: {
page: 'github',
},
},
};
return (
<ChatBuilder
config={config}
// Optional callbacks
onChatLoaded={() => console.log('Chat loaded!')}
onChatClosed={() => console.log('Chat closed!')}
onChatOpened={() => console.log('Chat opened!')}
onMessageReceived={(message) => console.log('Message received!', message)}
onMessageSent={(message) => console.log('Message sent!', message)}
>
{({config, state, onClose, onSendMessage, onToggleOpen, scrollToRef}) => {
return (
<MyCustomChat
config={config}
state={state}
onClose={onClose}
onSendMessage={onSendMessage}
onToggleOpen={onToggleOpen}
scrollToRef={scrollToRef}
/>
);
}}
</ChatBuilder>
);
};
To see an example of a completely custom chat UI built with @papercups-io/chat-builder and TailwindCSS, visit https://papercups-io.github.io/chat-builder/
The code can be found here: https://github.com/papercups-io/chat-builder/blob/master/examples/tailwind/src/App.js
If you're having any trouble getting started or just want to say hi, join us on Slack! :wave:
We welcome any contributions! Please create an issue before submitting a pull request.
When creating a pull request, be sure to include a screenshot! 🎨
MIT © Papercups
FAQs
Papercups chat builder
The npm package @papercups-io/chat-builder receives a total of 499 weekly downloads. As such, @papercups-io/chat-builder popularity was classified as not popular.
We found that @papercups-io/chat-builder demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.