chat-bubble
👋🤖🤙

Simple chatbot UI for the Web with JSON scripting 👋🤖🤙

- Quick set-up & implementation.
- Works with or without Natural Language Classifiers.
- 1KB GZipped. No dependencies. Written with ES5 (compatible with IE11+).
Demo | Tutorial Video
Installation
Yarn/NPM
yarn add chat-bubble
or npm install chat-bubble
Download
Get the .ZIP file here.
Quick start
This method assumes you've got a development environment running that's capable of transpiling ES6 JavaScript. There's a short guide on how to get one working here. Otherwise see "I have no ES6 dev environment." This guide will show you how to build this.
import {
Bubbles,
prepHTML
} from "../node_modules/chat-bubble/component/Bubbles.js";
prepHTML({ relative_path: "../node_modules/chat-bubble/" });
const chatWindow = new Bubbles(
document.getElementById("chat"),
"chatWindow"
);
chatWindow.talk(
{
ice: {
says: ["Hey!", "Can I have a banana?"],
reply: [
{
question: "🍌",
answer: "banana"
}
]
},
banana: {
says: ["Thank you!", "Can I have another banana?"],
reply: [
{
question: "🍌🍌",
answer: "banana"
}
]
}
}
);
"I have no ES6 dev environment!"
If you don't want to bother with setting up a development server and transpiler for ES6 code, I get it. Simply unzip the package and create index.html
inside of that directory. Then add all the JavaScript that you see below the /*SAMPLE IMPLEMENTATION*/
comment in the code example above. Replace const
with var
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My chat-bubble Project</title>
<link rel="stylesheet" media="all" href="../styles/setup.css" />
<link rel="stylesheet" media="all" href="../styles/says.css" />
<link rel="stylesheet" media="all" href="../styles/reply.css" />
<link rel="stylesheet" media="all" href="../styles/typing.css" />
<link rel="stylesheet" media="all" href="../styles/input.css" />
</head>
<body>
<div id="chat"></div>
<script src="./component/Bubbles.js"></script>
<script>
/************************************************************************/
/**************** add "SAMPLE IMPLEMENTATION" code here *****************/
/************************************************************************/
</script>
</body>
</html>
Now open this file in your browser. Done!
Demos & more usage examples:
- Basic example: see how the code above looks in browser.
- Custom starting point: what if you wanted to resume conversation from somewhere other than required
ice:{}
starting point? This is how you'd do it.
- Keyboard input: a basic plugin-like structure that lets you implement your own keyboard input and text recognition (though it does not process natural language).
- Run scripts: your bot's replies can do things. Not only it could say something, but it could point your user towards an action, or perform it by running JavaScript.
- Natural Language Classifier implementation is possible with additional effort by intercepting the response message and keyboard input. Example using RASA (docs) can be found here.
Check out /examples
folder for the source code and more ideas.
FAQ:
- Can I add images and HTML code to my bot?
- Yes! custom graphics, YouTube videos - whatever you want!
- How can I contribute?
Browser compatibility