diff --git a/README.md b/README.md
index 6fe3d0e..7e0e965 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,29 @@
-# chat-bubble
-### A super-simple, tiny script for creating chat bot interfaces
+# 💬 chat-bubble
+## A super-simple, tiny script for creating chat bot interfaces
 
-![Screenshot](screenshot.jpg?raw=true)
+![Screenshot](screenshot.gif?raw=true)
 
-- Super-easy to use, even if you don't code much! Here's the [tutorial](https://htmlpreview.github.io/?https://github.com/dmitrizzle/chat-bubble/blob/master/component/start-here/hello.html).
-- Insanely small footprint, 1.03KB GZipped.
-- No dependencies. Written with ES5, vanilla JavaScript.
+- Super-easy to install & use! Here's the [tutorial bot](https://htmlpreview.github.io/?https://github.com/dmitrizzle/chat-bubble/blob/master/component/examples/0-tutor.html).
+- Insanely small footprint, 1KB GZipped.
+- No dependencies. Written with ES5, vanilla JavaScript. Works with modern browsers.
+
+### Usage
+```html
+	<div id="chat"></div>
+```
+
+```javascript
+
+	// set up the chatbot script
+	var givemeBubbles = new Bubbles(
+		document.getElementById('chat'), 	// attach chatbot to placeholder above ^^
+		"givemeBubbles"										// you need to pass the name of the constructor variable that evokes Bubble function here
+	);
+
+	// pass JSON to your function and you're done!
+	givemeBubbles.talk({ "ice": { "says": [ "Hi" ] } });
+```
+Please see examples and the [tutorial bot](https://htmlpreview.github.io/?https://github.com/dmitrizzle/chat-bubble/blob/master/component/examples/0-tutor.html) link to learn more on how to use this thing.
 
 This component comes with styles in CSS files. They are separated in to multiple files. You can turn them into styled components, SASS or whatever for your convenience. For now it's just vanilla CSS so that this tool can work anywhere, regardless of the environment.
 
diff --git a/component/Bubbles.js b/component/Bubbles.js
index 7b3a2e6..190580a 100644
--- a/component/Bubbles.js
+++ b/component/Bubbles.js
@@ -2,11 +2,11 @@ function Bubbles(container, self, options) {
 
 	// options
 	options = 				typeof options !== "undefined" ? options : {};
-	animationTime = 	options.animationTime || 200;	// how long it takes to animate chat bubble, also set in CSS
-	typeSpeed = 			options.typeSpeed || 5;				// delay per character, to simulate the machine "typing"
-	widerBy = 				options.widerBy || 2;					// add a little extra width to bubbles to make sure they don't break
-	sidePadding = 		options.sidePadding || 6; 		// padding on both sides of chat bubbles
-	inputCallbackFn = options.inputCallbackFn || (function(o){ return false });	// should we display an input field?
+	animationTime = 	options.animationTime || 200;			// how long it takes to animate chat bubble, also set in CSS
+	typeSpeed = 			options.typeSpeed || 5;						// delay per character, to simulate the machine "typing"
+	widerBy = 				options.widerBy || 2;							// add a little extra width to bubbles to make sure they don't break
+	sidePadding = 		options.sidePadding || 6; 				// padding on both sides of chat bubbles
+	inputCallbackFn = options.inputCallbackFn || false;	// should we display an input field?
 	
   var standingAnswer = "ice"; // remember where to restart convo if interrupted
 		
@@ -43,6 +43,7 @@ function Bubbles(container, self, options) {
 		});
 		container.appendChild(inputWrap);
 		bubbleWrap.style.paddingBottom = "100px";
+		inputText.focus();
 	}
 	inputCallbackFn ? this.typeInput(inputCallbackFn) : false;
 	
diff --git a/component/example-help.html b/component/example-help.html
deleted file mode 100644
index 8328e69..0000000
--- a/component/example-help.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<link rel="stylesheet" href="styles/setup.css">
-<link rel="stylesheet" href="styles/says.css">
-<link rel="stylesheet" href="styles/reply.css">
-<link rel="stylesheet" href="styles/typing.css">
-<script src="Bubbles.js"></script>
-
-<div id="chat"></div>
-<script>
-var convo = { "ice": { "says": [ "Hi" ] } }
-var givemeBubbles = new Bubbles(document.getElementById('chat'), "givemeBubbles");
-givemeBubbles.talk(convo);
-</script>
\ No newline at end of file
diff --git a/component/examples/0-tutor.html b/component/examples/0-tutor.html
new file mode 100644
index 0000000..4537722
--- /dev/null
+++ b/component/examples/0-tutor.html
@@ -0,0 +1,229 @@
+<html>
+<head>
+	<title>Bubblebot says Hello!</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	
+	
+	
+	
+	<!-- stylesheets for bubbles -->
+	<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">
+	<style>
+		h1 { text-align: center; }
+		#note { padding: 20px; color: #999; font-size: 14px; line-height: 18px; margin: 0 auto; max-width: 720px; }
+	</style>
+	
+	<!-- the script -->
+	<script src="../Bubbles.js"></script>
+	
+	
+	
+</head><body><h1>Start Here.</h1>
+	
+
+	
+	<!-- placeholder -->
+	<div id="chat"></div>
+	
+	<!-- notes -->
+	<section id="note">
+		<p>
+			<strong>Note:</strong> This is a simple script that isn't connected to any Natural Language Cognition networks. Whatever you type on the keyboard will be matched against the possible options given (dark grey bubbles). This script can't correct your spelling, it can't infer from synonyms or slang etc. But it is forgiving in terms of punctuation, capitalization and amount of text you type. For example, if one of the accepted answers is "Do 👉 this," you can simply type "do" and it'll work.
+		</p>
+	</section>
+			
+	<!-- sample conversation structure JSON -->
+	<script>
+		var convo = {
+			"ice": {
+				"says":
+				[
+					"Hiiiiii! 😜",
+					"This is <strong>bubblebot</strong> 🤖",
+					"I'm here to help you create your own bot script, just like this one. It's really easy! 🍰"
+				],
+				"reply": [
+					{
+						"question": "Go! 👍",
+						"answer" : "chapter-one"
+					},
+					{
+						"question": "What for? 🤔",
+						"answer" : "why"
+					},
+				]
+			},
+			"why": {
+				"says":
+				[
+					"Because it's fun, of course!",
+					"<img src=images/tutor-eliot.jpg>",
+				],
+				"reply": [
+					{
+						"question": "Go on...😏",
+						"answer" : "chapter-one"
+					},
+				]
+			},
+			"chapter-one": {
+				"says":
+				[
+					"Cool,",
+					"If you are new to bot scripting, don't worry. You won't need to actually do anything complicated. 😅",
+				],
+				"reply": [
+					{
+						"question": "OK, cool! 😁",
+						"answer" : "chapter-two"
+					},
+				]
+			},
+			"chapter-two": {
+				"says":
+				[
+					"To understand what to say I read scripts written in JSON format. It looks like something like this:",
+					"<img src=images/tutor-json.jpg>",
+					"You can have a look yourself at the code if you open this file in your text editor 🗒"
+				],
+				"reply": [
+					{
+						"question": "So what are the basics? 🤔",
+						"answer" : "chapter-three"
+					},
+				]
+			},
+			"chapter-three": {
+				"says":
+				[
+					"&lt;div id=\"chat\"&gt;&lt;/div&gt;",
+					"☝️ This is a placeholder in your HTML where the chat window is gonna be rendered.",
+				],
+				"reply": [
+					{
+						"question": "How about JavaScript? ☕️",
+						"answer" : "chapter-four"
+					},
+				]
+			},
+			"chapter-four": {
+				"says":
+				[
+					"// setup<br>var givemeBubbles = new Bubbles(document.getElementById(\"chat\"), <em>\"givemeBubbles\"</em>);",
+					"// launch command<br>givemeBubbles.talk(<strong>[YOUR JSON SCRIPT]</strong>);",
+					"☝️ When you construct a new Bubbles() instance, you'll need to <em>pass the name of that variable as an option</em>. This helps with being able to call your custom functions from within the script securely."
+				],
+				"reply": [
+					{
+						"question": "What about JSON? 🤔",
+						"answer" : "chapter-five"
+					},
+				]
+			},
+			"chapter-five": {
+				"says":
+				[
+					"This is the most basic setup possible:",
+					"{ \"ice\": { \"says\": [ \"Hi\" ] } }",
+					"<strong>\"ice\"</strong> is the marker for default place for the chatbot to start at. It has to be there, unless you want to tell it where exactly to start:",
+					"givemeBubbles.talk([YOUR JSON SCRIPT], <strong>[KEY]</strong>);",
+					"...If you look at the example scripts, you'll also learn how to add reply buttons (very simple)"
+				],
+				"reply": [
+					{
+						"question": "What else can I do? 🙂",
+						"answer" : "chapter-six"
+					},
+				]
+			},
+			"chapter-six": {
+				"says":
+				[
+					"🎹 You can add keyboard input (with custom language processing) and custom functions for user answers.",
+					"📡 You can also dynamically replace working conversation JSON by simply calling the launch command with new data.",
+					"@<a href=\"https://github.com/dmitrizzle\">dmitrizzle</a> is working on making integration a little more elegant and adding more flexibility in how this tool accepts and processes answers 🤖",
+					"And of course you can customize CSS styles when you install this thing 👨‍🎨"
+				],
+				"reply": [
+					{
+						"question": "Is that it?",
+						"answer" : "chapter-eight"
+					},
+				]
+			},
+			"chapter-eight": {
+				"says":
+				[
+					"Pretty much, easy right 😜",
+					"Why not have a look at the examples' source code in this folder and make your own bot, it'll take less than 5 minutes - I'm sure 😎",
+					"Check ya later! 👋"
+				],
+				"reply": [
+					{
+						"question": "Start over ☝️",
+						"answer" : "ice"
+					},
+				]
+			}
+			
+			
+		};
+	</script>
+	
+	<!-- initialize bubbles -->
+	<script>
+		var givemeBubbles = new Bubbles(document.getElementById("chat"), "givemeBubbles", {
+			inputCallbackFn: function(o){
+							
+				// do this if no answer matched
+				var miss = function(){
+					givemeBubbles.talk({
+						"ice": {
+							"says":
+							[
+								"Sorry, I don't get it 😕. Pls repeat? Or you can just click below 👇",
+							],
+							"reply" : o.convo[o.standingAnswer].reply
+						},
+					})
+				}
+				
+				// do this if answer found
+				var match = function(key){
+					setTimeout(function(){						
+						givemeBubbles.talk(convo, key); // restart current convo from point found in the answer
+					}, (600) );
+				}
+				
+				// sanitize text for search function
+				var strip = function(text){
+					return text.toLowerCase().replace(/[\s.,\/#!$%\^&\*;:{}=\-_'"`~()]/g,"");
+				}
+				
+				// search function
+				var found = false;
+				o.convo[o.standingAnswer].reply.forEach(function(e, i) {
+					(strip(e.question).includes(strip(o.input)) && o.input.length > 0) ? found = e.answer : (found ? null : found = false);
+				});
+				found ? match(found) : miss();
+				
+				
+				
+			}
+		});
+		givemeBubbles.talk(convo);
+		functionOne = function(){ alert("Function One"); }
+		functionTwo = function(){ alert("Function Two"); }
+	</script>
+	
+	
+	
+	
+	
+</body>
+</html>
\ No newline at end of file
diff --git a/component/examples/1-basic.html b/component/examples/1-basic.html
new file mode 100644
index 0000000..15a3374
--- /dev/null
+++ b/component/examples/1-basic.html
@@ -0,0 +1,41 @@
+<html>
+<head>
+	<title>Chat Bubble Basics 1</title>
+	<meta charset="utf-8">
+	
+	<!-- for mobile screens -->
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	
+	<!-- stylesheets for bubbles -->
+	<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>
+
+<!-- the script -->
+<script src="../Bubbles.js"></script>
+
+<!-- placeholder for where the chatbox is going to be rendered -->
+<div id="chat"></div>
+
+<script>
+
+// this is the most basic chat setup possible.
+// "ice" is the default conversation block for the bot to start, this key is required.
+// you can have an array of bubbles, for example: ["Hi", "It's me!"]
+var convo = { "ice": { "says": [ "Hi" ] } }
+
+// set up the chatbot script
+var givemeBubbles = new Bubbles(
+	document.getElementById('chat'), 	// attach chatbot to placeholder above ^^
+	"givemeBubbles"										// you need to pass the name of the constructor variable that evokes Bubble function here
+);
+
+// pass JSON to your function and you're done!
+givemeBubbles.talk(convo);
+
+</script>
+</body>
\ No newline at end of file
diff --git a/component/examples/2-basic-conversation.html b/component/examples/2-basic-conversation.html
new file mode 100644
index 0000000..d89ef63
--- /dev/null
+++ b/component/examples/2-basic-conversation.html
@@ -0,0 +1,79 @@
+<html>
+<head>
+	<title>Chat Bubble Basics 1</title>
+	<meta charset="utf-8">
+	
+	<!-- for mobile screens -->
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	
+	<!-- stylesheets for bubbles -->
+	<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>
+
+<!-- the script -->
+<script src="../Bubbles.js"></script>
+
+<!-- placeholder for where the chatbox is going to be rendered -->
+<div id="chat"></div>
+
+<script>
+
+// this is the most basic conversation JSON.
+var convo = {
+	"ice": {	// default conversation block for the bot to start, this key is required.
+		"says" : [ // you can have array of text bubbles here
+			"Hi",
+			"Would you like banana or ice cream?"
+		],
+		"reply" : [ // this is an array of possible answers that user can pick. 3 or less options recommended.
+			{
+				"question" 	: "Banana",	// this is the text label for one of the options
+				"answer" 		: "banana",	// this is the reference for next block in this conversation (see below)
+			},
+			{
+				"question" 	: "Ice Cream", // users can see this text and click it
+				"answer" 		: "ice-cream", // it will take them to the next conversation block
+			}
+		]
+	},
+	"banana": {	// this is another conversation block, to which the chat bot can be sent (see above ^^)
+		"says" : [ // you can have array of text bubbles here
+			"🍌",
+		],
+		"reply" : [ // this is an array of possible answers that user can pick. 3 or less options recommended.
+			{
+				"question" 	: "Start Over",	// this is the text label for one of the options
+				"answer" 		: "ice",	// you can sent the user back to the original (first) conversation block
+			},
+		]
+	},
+	"ice-cream": {	// this is another conversation block, to which the chat bot can be sent (see above ^^)
+		"says" : [ // you can have array of text bubbles here
+			"🍦",
+		],
+		"reply" : [ // this is an array of possible answers that user can pick. 3 or less options recommended.
+			{
+				"question" 	: "Start Over",	// this is the text label for one of the options
+				"answer" 		: "ice",	// you can sent the user back to the original (first) conversation block
+			},
+		]
+	}
+}
+
+// set up the chatbot script
+var givemeBubbles = new Bubbles(
+	document.getElementById('chat'), 	// attach chatbot to placeholder above ^^
+	"givemeBubbles"										// you need to pass the name of the constructor variable that evokes Bubble function here
+);
+
+// pass JSON to your function and you're done!
+givemeBubbles.talk(convo);
+
+
+</script>
+</body>
\ No newline at end of file
diff --git a/component/examples/3-basic-custom-startpoint.html b/component/examples/3-basic-custom-startpoint.html
new file mode 100644
index 0000000..e29646b
--- /dev/null
+++ b/component/examples/3-basic-custom-startpoint.html
@@ -0,0 +1,89 @@
+<html>
+<head>
+	<title>Chat Bubble Basics 1</title>
+	<meta charset="utf-8">
+	
+	<!-- for mobile screens -->
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	
+	<!-- stylesheets for bubbles -->
+	<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>
+
+<!-- the script -->
+<script src="../Bubbles.js"></script>
+
+<!-- placeholder for where the chatbox is going to be rendered -->
+<div id="chat"></div>
+
+<script>
+
+
+
+
+
+// CUSTOM STARTPOINT HOWTO: SEE LINE 85
+
+
+
+
+
+// this is the most basic conversation JSON.
+var convo = {
+	"ice": {	// default conversation block for the bot to start, this key is required.
+		"says" : [ // you can have array of text bubbles here
+			"Hi",
+			"Would you like banana or ice cream?"
+		],
+		"reply" : [ // this is an array of possible answers that user can pick. 3 or less options recommended.
+			{
+				"question" 	: "Banana",	// this is the text label for one of the options
+				"answer" 		: "banana",	// this is the reference for next block in this conversation (see below)
+			},
+			{
+				"question" 	: "Ice Cream", // users can see this text and click it
+				"answer" 		: "ice-cream", // it will take them to the next conversation block
+			}
+		]
+	},
+	"banana": {	// this is another conversation block, to which the chat bot can be sent (see above ^^)
+		"says" : [ // you can have array of text bubbles here
+			"🍌",
+		],
+		"reply" : [ // this is an array of possible answers that user can pick. 3 or less options recommended.
+			{
+				"question" 	: "Start Over",	// this is the text label for one of the options
+				"answer" 		: "ice",	// you can sent the user back to the original (first) conversation block
+			},
+		]
+	},
+	"ice-cream": {	// this is another conversation block, to which the chat bot can be sent (see above ^^)
+		"says" : [ // you can have array of text bubbles here
+			"🍦",
+		],
+		"reply" : [ // this is an array of possible answers that user can pick. 3 or less options recommended.
+			{
+				"question" 	: "Start Over",	// this is the text label for one of the options
+				"answer" 		: "ice",	// you can sent the user back to the original (first) conversation block
+			},
+		]
+	}
+}
+
+// set up the chatbot script
+var givemeBubbles = new Bubbles(
+	document.getElementById('chat'), 	// attach chatbot to placeholder above ^^
+	"givemeBubbles"										// you need to pass the name of the constructor variable that evokes Bubble function here
+);
+
+// pass JSON to your function and you're done!
+givemeBubbles.talk(convo, "banana"); // CUSTOM STARTPOINT for conversation block defined as a second parameter in .talk() function
+
+
+</script>
+</body>
\ No newline at end of file
diff --git a/component/examples/4-advanced-keyboard.html b/component/examples/4-advanced-keyboard.html
new file mode 100644
index 0000000..7cce50b
--- /dev/null
+++ b/component/examples/4-advanced-keyboard.html
@@ -0,0 +1,139 @@
+<html>
+<head>
+	<title>Chat Bubble Basics 1</title>
+	<meta charset="utf-8">
+	
+	<!-- for mobile screens -->
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	
+	<!-- stylesheets for bubbles -->
+	<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>
+
+<!-- the script -->
+<script src="../Bubbles.js"></script>
+
+<!-- placeholder for where the chatbox is going to be rendered -->
+<div id="chat"></div>
+
+<script>
+
+
+
+
+
+// HOW TO ENABLE KEYBOARD INPUT: SEE LINE 87
+
+
+
+
+
+
+// this is the most basic conversation JSON.
+var convo = {
+	"ice": {	// default conversation block for the bot to start, this key is required.
+		"says" : [ // you can have array of text bubbles here
+			"Hi",
+			"Would you like banana or ice cream?"
+		],
+		"reply" : [ // this is an array of possible answers that user can pick. 3 or less options recommended.
+			{
+				"question" 	: "Banana",	// this is the text label for one of the options
+				"answer" 		: "banana",	// this is the reference for next block in this conversation (see below)
+			},
+			{
+				"question" 	: "Ice Cream", // users can see this text and click it
+				"answer" 		: "ice-cream", // it will take them to the next conversation block
+			}
+		]
+	},
+	"banana": {	// this is another conversation block, to which the chat bot can be sent (see above ^^)
+		"says" : [ // you can have array of text bubbles here
+			"🍌",
+		],
+		"reply" : [ // this is an array of possible answers that user can pick. 3 or less options recommended.
+			{
+				"question" 	: "Start Over",	// this is the text label for one of the options
+				"answer" 		: "ice",	// you can sent the user back to the original (first) conversation block
+			},
+		]
+	},
+	"ice-cream": {	// this is another conversation block, to which the chat bot can be sent (see above ^^)
+		"says" : [ // you can have array of text bubbles here
+			"🍦",
+		],
+		"reply" : [ // this is an array of possible answers that user can pick. 3 or less options recommended.
+			{
+				"question" 	: "Start Over",	// this is the text label for one of the options
+				"answer" 		: "ice",	// you can sent the user back to the original (first) conversation block
+			},
+		]
+	}
+}
+
+// set up the chatbot script
+var givemeBubbles = new Bubbles(
+	document.getElementById('chat'), 	// attach chatbot to placeholder above ^^
+	"givemeBubbles",									// you need to pass the name of the constructor variable that evokes Bubble function here
+	
+	
+	
+	
+	// you can pass options for chat bubble into the object variable.
+	{
+	
+		// the one that we care about is inputCallbackFn()
+		// this function returns an object with some data that we can process from user input
+		// and understand the context of it
+		
+		
+		// this is an example function that matches the text user typed to one of the answer bubbles
+		// this function does no natural language processing
+		// this is where you may want to connect this script to NLC backend.
+		inputCallbackFn: function(o){
+					
+			// do this if no answer matched
+			var miss = function(){
+				givemeBubbles.talk({
+					"ice": {
+						"says":
+						[
+							"Sorry, I don't get it 😕. Pls repeat? Or you can just click below 👇",
+						],
+						"reply" : o.convo[o.standingAnswer].reply
+					},
+				})
+			}
+		
+			// do this if answer found
+			var match = function(key){
+				setTimeout(function(){						
+					givemeBubbles.talk(convo, key); // restart current convo from point found in the answer
+				}, (600) );
+			}
+		
+			// sanitize text for search function
+			var strip = function(text){
+				return text.toLowerCase().replace(/[\s.,\/#!$%\^&\*;:{}=\-_'"`~()]/g,"");
+			}
+		
+			// search function
+			var found = false;
+			o.convo[o.standingAnswer].reply.forEach(function(e, i) {
+				(strip(e.question).includes(strip(o.input)) && o.input.length > 0) ? found = e.answer : (found ? null : found = false);
+			});
+			found ? match(found) : miss();
+
+		}
+}); // done setting up chat-bubble
+
+// pass JSON to your function and you're done!
+givemeBubbles.talk(convo);
+
+</script>
+</body>
\ No newline at end of file
diff --git a/component/examples/5-advanced-conversation-functions.html b/component/examples/5-advanced-conversation-functions.html
new file mode 100644
index 0000000..b82de92
--- /dev/null
+++ b/component/examples/5-advanced-conversation-functions.html
@@ -0,0 +1,101 @@
+<html>
+<head>
+	<title>Chat Bubble Basics 1</title>
+	<meta charset="utf-8">
+	
+	<!-- for mobile screens -->
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	
+	<!-- stylesheets for bubbles -->
+	<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>
+
+<!-- the script -->
+<script src="../Bubbles.js"></script>
+
+<!-- placeholder for where the chatbox is going to be rendered -->
+<div id="chat"></div>
+
+<script>
+
+
+
+
+
+// CONVERSATION FUNCTIONS HOWTO: SEE LINE 85
+
+
+
+
+
+// this is the most basic conversation JSON.
+var convo = {
+	"ice": {	// default conversation block for the bot to start, this key is required.
+		"says" : [ // you can have array of text bubbles here
+			"Hi",
+			"Would you like banana or ice cream?"
+		],
+		"reply" : [ // this is an array of possible answers that user can pick. 3 or less options recommended.
+			{
+				"question" 	: "Banana",	// this is the text label for one of the options
+				
+				
+				
+				// instead of the key name for conversation block you can simply pass a name of the function you want to call
+				// it can not accept any parameters at this moment.
+				// this function has to be declared on this very document page
+				// this is for security.
+				// see line 91 for this function.
+				"answer" 		: "bananaFunction",	// this is the reference for next block in this conversation (see below)
+				
+				
+				
+				
+			},
+			{
+				"question" 	: "Ice Cream", // users can see this text and click it
+				"answer" 		: "ice-cream", // it will take them to the next conversation block
+			}
+		]
+	},
+	"ice-cream": {	// this is another conversation block, to which the chat bot can be sent (see above ^^)
+		"says" : [ // you can have array of text bubbles here
+			"🍦",
+		],
+		"reply" : [ // this is an array of possible answers that user can pick. 3 or less options recommended.
+			{
+				"question" 	: "Start Over",	// this is the text label for one of the options
+				"answer" 		: "ice",	// you can sent the user back to the original (first) conversation block
+			},
+		]
+	}
+}
+
+// set up the chatbot script
+var givemeBubbles = new Bubbles(
+	document.getElementById('chat'), 	// attach chatbot to placeholder above ^^
+	"givemeBubbles"										// you need to pass the name of the constructor variable that evokes Bubble function here
+);
+
+// pass JSON to your function and you're done!
+givemeBubbles.talk(convo);
+
+
+
+
+// this function is called when user asks for banana
+bananaFunction = function(){
+	alert("🍌");
+	givemeBubbles.talk(convo, "ice"); // the conversation can be easily restarted from here.
+}
+
+
+
+
+</script>
+</body>
\ No newline at end of file
diff --git a/component/start-here/images/eliot.jpg b/component/examples/images/tutor-eliot.jpg
similarity index 100%
rename from component/start-here/images/eliot.jpg
rename to component/examples/images/tutor-eliot.jpg
diff --git a/component/start-here/images/example-1.jpg b/component/examples/images/tutor-install.jpg
similarity index 100%
rename from component/start-here/images/example-1.jpg
rename to component/examples/images/tutor-install.jpg
diff --git a/component/start-here/images/json.jpg b/component/examples/images/tutor-json.jpg
similarity index 100%
rename from component/start-here/images/json.jpg
rename to component/examples/images/tutor-json.jpg
diff --git a/component/start-here/hello.html b/component/start-here/hello.html
deleted file mode 100644
index a96ccfa..0000000
--- a/component/start-here/hello.html
+++ /dev/null
@@ -1,373 +0,0 @@
-<html>
-<head>
-	<title>Bubblebot says Hello!</title>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	
-	
-	
-	
-	<!-- stylesheets for bubbles -->
-	<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">
-	<style>
-		h1 { text-align: center; }
-	</style>
-	
-	<!-- the script -->
-	<script src="../Bubbles.js"></script>
-	
-	
-	
-</head><body><h1>Hello!</h1>
-	
-
-	
-	<!-- placeholder -->
-	<div id="chat"></div>
-			
-	<!-- sample conversation structure JSON -->
-	<script>
-		var convo = {
-			"ice": {
-				"says":
-				[
-					"Hiiiiii! 😜",
-					"This is <strong>bubblebot</strong> 🤖",
-					"I'm here to help you create your own bot script, just like this one. It's really easy! 🍰"
-				],
-				"reply": [
-					{
-						"question": "👍",
-						"answer" : "start"
-					},
-					{
-						"question": "What for? 🤔",
-						"answer" : "why"
-					},
-				]
-			},
-			"why": {
-				"says":
-				[
-					"Because it's fun, of course!",
-					"...AAAAnd, unlike other tools out there, here you'll learn a little bit of code.",
-					"You'll be hacking in no-time!",
-					"<img src=images/eliot.jpg>",
-				],
-				"reply": [
-					{
-						"question": "Go on...😏",
-						"answer" : "start"
-					},
-				]
-			},
-			"start": {
-				"says":
-				[
-					"OK check this. Some of us bots are quite smart, but out of the box, when we are baby material (that's what you'll be getting). We aren't that clever. 🐥",
-					"You need to teach your bot to say just the right thing to the people who chat with it...",
-					"...Him/her... whatever. Anyways,",
-					"Basically you just write a script for the bot, and everything plays out from there. 🎭"
-				],
-				"reply": [
-					{
-						"question": "Got it, next! 👌",
-						"answer" : "chapter-one"
-					},
-					{
-						"question": "Can't you learn on your own?",
-						"answer" : "ai-style"
-					},
-				]
-			},
-			"ai-style": {
-				"says":
-				[
-					"Not really, no.",
-					"Basically I'm a very simple script written for the browser to interpret your written words as beautiful bubbles in anticipation of user input.",
-					"Even the most powerful AI machines of today still need to be taught. Maybe you should be thankful for that, human! 😈"
-				],
-				"reply": [
-					{
-						"question": "O...K... 😧",
-						"answer" : "chapter-one"
-					},
-				]
-			},
-			"chapter-one": {
-				"says":
-				[
-					"Cool,",
-					"If you are new to programming, don't worry. You won't need to actually do anything complicated. 😅",
-					"But you do need to pay attention to details. Things like quotations, commas, curly and square brackets need to be checked and double-checked.",
-					"Computers are finicky things and they like everything to be perfect."
-				],
-				"reply": [
-					{
-						"question": "Sounds hard! 😰",
-						"answer" : "chapter-one-hard"
-					},
-					{
-						"question": "Got it, next! 😁",
-						"answer" : "chapter-two"
-					},
-				]
-			},
-			"chapter-one-hard": {
-				"says":
-				[
-					"I'm sure you can do it! It really isn't that difficult. Persevere, human! 💪"
-				],
-				"reply": [
-					{
-						"question": "Alright, let's do it! 🙂",
-						"answer" : "chapter-two"
-					},
-				]
-			},
-			"chapter-two": {
-				"says":
-				[
-					"To understand what to say I read scripts written in JSON format. It looks like something like this:",
-					"<img src=images/json.jpg>",
-					"You can have a look yourself at the code if you open this file (hello.html) in a text editor. Any editor will do, but it can't be a rich-text editor like Microsoft Word. If you're on Windows, TextPad will do. On Mac, TextEdit is good (make sure rich text is disabled). 🗒"
-				],
-				"reply": [
-					{
-						"question": "Cool. So how do I write those scripts? 🤔",
-						"answer" : "chapter-three"
-					},
-				]
-			},
-			"chapter-three": {
-				"says":
-				[
-					"Easy! Just follow these simple temmplate:",
-					"&lt;div id=\"chat\"&gt;&lt;/div&gt;<br>&lt;script&gt;var convo = <strong>JSON</strong>;<br>var givemeBubbles = new Bubbles(document.getElementById(\"chat\"), \"givemeBubbles\");<br>givemeBubbles.talk(convo);&lt;/script&gt;"
-				],
-				"reply": [
-					{
-						"question": "Can you explain what those things mean? 😕",
-						"answer" : "chapter-four"
-					},
-				]
-			},
-			"chapter-four": {
-				"says":
-				[
-					"Sure. If you aren't really familiar with JavaScript, no worries. Actually, you don't need to worry about anything but the <strong>JSON</strong> part, which you'll need to replace with your script for the chatbot.",
-					"And here's what you replace it with..."
-				],
-				"reply": [
-					{
-						"question": "Tell me! 😃",
-						"answer" : "chapter-five"
-					},
-				]
-			},
-			"chapter-five": {
-				"says":
-				[
-					"OK, so what you do is replace <strong>JSON</strong> with this:",
-					"{ \"ice\": { \"says\": [ \"Hi\" ] } }",
-					"That's really all that you need to get started!",
-				],
-				"reply": [
-					{
-						"question": "Doesn't seem too hard! 🙂",
-						"answer" : "chapter-six"
-					},
-				]
-			},
-			"chapter-six": {
-				"says":
-				[
-					"Youp!",
-					"Here's how a simple example would look like:",
-					"<img src=images/example-1.jpg>",
-					"Why don't you give this a try? Create a text file and copy there everything from above and save as example.html",
-					"Then open that file with your browser"
-				],
-				"reply": [
-					{
-						"question": "I'm lazy... Can't you give me the text to copy-paste?",
-						"answer" : "example-text"
-					},
-					{
-						"question": "Done!",
-						"answer" : "chapter-seven"
-					},
-				]
-			},
-			"example-text": {
-				"says":
-				[
-					"Aw, alright",
-					"Copy and paste this into your editor and save as example.html",
-					"&lt;div id=\"chat\"&gt;&lt;/div&gt;<br>&lt;script&gt;<br>var convo = { \"ice\": { \"says\": [ \"Hi\" ] } };<br>var givemeBubbles = new Bubbles(document.getElementById(\"chat\"), \"givemeBubbles\");<br>givemeBubbles.talk(convo);<br>&lt;/script&gt;"
-				],
-				"reply": [
-					{
-						"question": "Done!",
-						"answer" : "chapter-seven"
-					},
-				]
-			},
-			"chapter-seven": {
-				"says":
-				[
-					"Now, if you open this file with your browser... it won't work. 😧",
-					"That's because you'll need to set up the actual tool to download the scripts that make the magic happen.",
-					"Here's how you do it..."
-				],
-				"reply": [
-					{
-						"question": "How?",
-						"answer" : "chapter-eight"
-					},
-				]
-			},
-			"chapter-eight": {
-				"says":
-				[
-					"<strong>1.</strong> <a href=https://github.com/dmitrizzle/chat-bubble/archive/master.zip>Download this file</a> and unzip it it.",
-					"<strong>2.</strong> Move the file you've created inside <strong>component</strong> folder.",
-					"<strong>3.</strong> Add the following lines to the top of your file:"
-				],
-				"reply": [
-					{
-						"question": "What do I add... 😒",
-						"answer" : "chapter-nine"
-					},
-				]
-			},
-			"chapter-nine": {
-				"says":
-				[
-					"This:",
-					"&lt;link rel=\"stylesheet\" href=\"styles/setup.css\"&gt;<br>&lt;link rel=\"stylesheet\" href=\"styles/says.css\"&gt;<br>&lt;link rel=\"stylesheet\" href=\"styles/reply.css\"&gt;<br>&lt;link rel=\"stylesheet\" href=\"styles/typing.css\"&gt;<br>&lt;script src=\"Bubbles.js\"&gt;&lt;/script&gt;",
-					"<strong>And</strong> Move the file you've created inside that <strong>component</strong> folder.",
-				],
-				"reply": [
-					{
-						"question": "It's working! 🙃",
-						"answer" : "chapter-ten"
-					},
-					{
-						"question": "It's NOT woriking! 😩",
-						"answer" : "chapter-nine-help"
-					},
-				]
-			},
-			"chapter-nine-help": {
-				"says":
-				[
-					"Double-check your spelling, and punctuation in the file. Make sure you <a href=https://github.com/dmitrizzle/chat-bubble/archive/master.zip>donloaded this file</a> and unzipped it. Your file needs to be INSIDE of that <strong>component</strong> folder.",
-					"If that still doesn't work, open example-help.html with your text document (inside of the <strong>component</strong> folder) and compare it to your work.",
-					"You can open <a href=../example-help.html target=blank>example-help.html</a> in your browser and see how it's supposed to work."
-				],
-				"reply": [
-					{
-						"question": "It's working! 🙃",
-						"answer" : "chapter-ten"
-					},
-					{
-						"question": "It's NOT woriking! 😩",
-						"answer" : "chapter-nine-help-2"
-					},
-				]
-			},
-			"chapter-nine-help-2": {
-				"says":
-				[
-					"Daym... Why don't give <a href=https://twitter.com/dmitrizzle>@dmitrizzle</a> a shout then? He made this whole thing after all..."
-				],
-				"reply": [
-					{
-						"question": "I fixed it! 🙃",
-						"answer" : "chapter-ten"
-					},
-				]
-			},
-			"chapter-ten": {
-				"says":
-				[
-					"Sweet! 🎉",
-					"Now all you gotta do is add more text bubbles, with commas like this:",
-					"[ \"Hi\", \"I'm the new awesome bot!\", \"Let's chat!\" ]",
-					"Do give this a try!"
-				],
-				"reply": [
-					{
-						"question": "What about adding options, like this button I'm clicking right now?",
-						"answer" : "chapter-eleven"
-					},
-				]
-			},
-			"chapter-eleven": {
-				"says":
-				[
-					"That's for later. For now, practice your bubbles 😜",
-					"Or you can view-source of this file and write something more complex, if you're into hacking, proper 😎",
-					"Bye for now! 👋"
-				]
-			}
-			
-			
-		};
-	</script>
-	
-	<!-- initialize bubbles -->
-	<script>
-		var givemeBubbles = new Bubbles(document.getElementById("chat"), "givemeBubbles", {
-			inputCallbackFn: function(o){
-							
-				// do this if no answer matched
-				var miss = function(){
-					givemeBubbles.talk({
-						"ice": {
-							"says":
-							[
-								"Sorry, I don't get it 😕. Pls repeat? Or you can just click below 👇",
-							],
-							"reply" : o.convo[o.standingAnswer].reply
-						},
-					})
-				}
-				
-				// do this if answer found
-				var match = function(key){
-					givemeBubbles.talk(convo, key); // restart current convo from point found in the answer
-				}
-				
-				// sanitize text for search function
-				var strip = function(text){
-					return text.toLowerCase().replace(/\ [.,\/#!$%\^&\*;:{}=\-_`~()]/g,"");
-				}
-				
-				// search function
-				var found = false;
-				o.convo[o.standingAnswer].reply.forEach(function(e, i) {
-					(strip(e.question).includes(strip(o.input)) && o.input.length > 0) ? found = e.answer : found ? null : found = false;
-				});
-				found ? match(found) : miss();
-				
-				
-				
-			}
-		});
-		givemeBubbles.talk(convo);
-		functionOne = function(){ alert("Function One"); }
-		functionTwo = function(){ alert("Function Two"); }
-	</script>
-	
-	
-	
-	
-	
-</body>
-</html>
\ No newline at end of file
diff --git a/screenshot.gif b/screenshot.gif
new file mode 100644
index 0000000..f156512
Binary files /dev/null and b/screenshot.gif differ
diff --git a/screenshot.jpg b/screenshot.jpg
deleted file mode 100644
index 853ab68..0000000
Binary files a/screenshot.jpg and /dev/null differ