@ecodesk/chat-builder
Advanced tools
Ecodesk chat builder
@ecodesk-io/chat-builder is a library that allows you to create your own custom chat UI while leveraging the power of Ecodesk.
Example of an imitation of Intercom's design using the Ecodesk ChatBuilder component:
npm install --save @ecodesk-io/chat-builder
First, sign up at https://admin.ecodesk.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 '@ecodesk/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 '@ecodesk/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 @ecodesk/chat-builder and TailwindCSS, visit https://papercups-io.github.io/chat-builder/
The code can be found here: https://github.com/ecodesk/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 © Ecodesk
FAQs
Ecodesk chat builder
We found that @ecodesk/chat-builder demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Company News
Replit is integrating Socket Firewall into its AI-powered development experience to help protect builders from malicious open source packages.
Security News
npm confirmed a tooling bug incorrectly marked several one-character packages as security holders and said it was working on a rollback.
Research
/Security News
Newer packages in this compromise use native extensions and .pth loaders to execute JavaScript stealers in developer environments.