# chat-bubble **Repository Path**: bete/chat-bubble ## Basic Information - **Project Name**: chat-bubble - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-01-10 - **Last Updated**: 2024-01-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # `chat-bubble` 👋🤖🤙 [](https://badge.fury.io/js/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](#demos--more-usage-examples)** | [Tutorial Video](https://www.youtube.com/watch?v=fkJ935a7VSk) --- ## Installation #### Yarn/NPM `yarn add chat-bubble` or `npm install chat-bubble` #### Download Get the .ZIP file [here](https://github.com/dmitrizzle/chat-bubble/archive/master.zip). ## 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](ENV.md). Otherwise see "[I have no ES6 dev environment](https://github.com/dmitrizzle/chat-bubble/new/master#i-have-no-es6-dev-environment)." This guide will show you how to build [this](https://dmitrizzle.github.io/chat-bubble/examples/1-basics.html). ```javascript /************************************************************************/ /******* CONVENIENCE METHODS AVAILABLE FOR ES6 BUILD ENVIRONMENTS *******/ /************************************************************************/ // the URL of where you've installed the component; you may need to change this: import { Bubbles, prepHTML } from "../node_modules/chat-bubble/component/Bubbles.js"; // 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 prepHTML({ relative_path: "../node_modules/chat-bubble/" }); /************************************************************************/ /************************ SAMPLE IMPLEMENTATION *************************/ /************************************************************************/ // initialize by constructing a named function... const chatWindow = new Bubbles( document.getElementById("chat"), // ...passing HTML container element... "chatWindow" // ...and name of the function as a parameter ); // `.talk()` will get your bot to begin the conversation chatWindow.talk( // pass your JSON/JavaScript object to `.talk()` function where // you define how the conversation between the bot and user will go { // "ice" (as in "breaking the ice") is a required conversation object // that maps the first thing the bot will say to the user ice: { // "says" defines an array of sequential bubbles // that the bot will produce says: ["Hey!", "Can I have a banana?"], // "reply" is an array of possible options the user can pick from // as a reply reply: [ { question: "🍌", // label for the reply option answer: "banana" // key for the next conversation object } ] }, // end required "ice" conversation object // another conversation object that can be queued from within // any other conversation object, including itself banana: { says: ["Thank you!", "Can I have another banana?"], reply: [ { question: "🍌🍌", answer: "banana" } ] } // end conversation object } // end conversation object ); ``` ## "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](https://github.com/dmitrizzle/chat-bubble/archive/master.zip) 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`. ```html