@ssatai/chat-builder NPM

@ssatai/chat-builder

Papercups chat builder

What is it?

@ssatai/chat-builder is a library that allows you to create your own custom chat UI while leveraging the power of Papercups.

Try it out

Demo

Example of an imitation of Intercom's design using the Papercups ChatBuilder component:

Install

npm install --save @ssatai/chat-builder

Usage

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 '@ssatai/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 '@ssatai/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>
  );
};

Live demo

To see an example of a completely custom chat UI built with @ssatai/chat-builder and TailwindCSS, visit https://ssatai.github.io/chat-builder/

The code can be found here: https://github.com/ssatai/chat-builder/blob/master/examples/tailwind/src/App.js

Questions?

If you're having any trouble getting started or just want to say hi, join us on Slack! :wave:

Submitting a PR

We welcome any contributions! Please create an issue before submitting a pull request.

When creating a pull request, be sure to include a screenshot! 🎨

License

@emotion/react @emotion/styled @papercups-io/browser axios phoenix

@infinitebrahmanuniverse/nolb-_ss @everything-registry/sub-chunk-862

0.0.12

3 years ago

0.0.11

3 years ago