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+).
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.
/************************************************************************//******* CONVENIENCE METHODS AVAILABLE FOR ES6 BUILD ENVIRONMENTS *******//************************************************************************/ // the URL of where you've installed the component; you may need to change this: // this is a convenience script that builds all necessary HTML,// imports all scripts and stylesheets; your container DIV will// have a default `id="chat"`;// you can specify a different ID with:// `container: "my_chatbox_id"` option /************************************************************************//************************ SAMPLE IMPLEMENTATION *************************//************************************************************************/ // initialize by constructing a named function...const chatWindow = document // ...passing HTML container element... "chatWindow" // ...and name of the function as a parameter; // `.talk()` will get your bot to begin the conversationchatWindow;
"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
.
My chat-bubble Project <!-- stylesheets are conveniently separated into components --> <!-- container element for chat window --> <!-- import the JavaScript file -->
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 (coming soon)
- Advanced Flows: logical branches, recurring references, contextual guidance.
FAQ:
- Can I add images and HTML code to my bot?
- Yes! custom graphics, YouTube videos - whatever you want!
- How can I contribute?
- See the contribution guide here.
Browser compatibility
- You may need to add in polyfills for
Object.assign()
andString.includes()
Who uses chat-bubble?
- Archie.AI
- Omer Tarik Koc
- If you'd like to add your site, pls submit a PR to this README.md ✌️