js-chat-bot
Description
A special way to bind the customer to your page. Let them chat with a javascript chat bot alternative. They will likely click on a predefined answer, than typing any text messages…
Start enhancing your customers experience and let your visitors believe they are chatting with you - live!
Project Page & Support
This Script has an own Project Page. I’ve used this tool on my Website Andreas Pabst Webentwickler Nürnberg.
Wiki
Here in the Javascript Chat Bot Wiki you can find the installation guide .
Versions
- 1.0.0 - Initial Version
- 1.0.1 - Added Emoji Support
- 1.0.2 - Added URL
- 1.0.3 - Documentation Updates
- 1.0.4 - Emoji improvements
Available Configurations
configuration = {
behaviour: {
autoScroll: true, // use jQuery Scroll To Function
autoDetectLanguage: false, // if useLanguages: true then use browser lang
autoScrollAfterFirstAnswer: true, // wait until first answer has been given
autoResize: true, // continuous adaption of height of mainChat
defaultLang: "en", // relevant if useLanguages: true
showTypingDots: true, // show "..." dots first
useEmoji: true, // :emoji:xyz: is an emoji with name xyz
useInputs: true, // :input:xyz: is a text input with name xyz
useLanguages: false // parse talks with languages
},
ids: {
mainChat: "chat", // the chat container, with chatWrap and answerWrap
answerPrefix: "answer-" // prefix of answer link "prefix-0", "prefix-1",...
},
classes: {
chatWrap: "chat-wrap", // wrapper of the chat bubbles
bubbleWrap: "chat-bubble", // class of any bubble
bubble: "chat-bubble-msg", // class of any bubble
bubbleBot: "chat-bubble-msg-me", // class of bot bubble
bubbleVisitor: "chat-bubble-msg-visitor", // class of visitors answer bubble
answer: "chat-answer", // class of answer link
answerWrap: "chat-answer-select" // class of answer box
},
times: {
delay: {
"overall": 0, // general delay to start chatting
"dots": 700, // delay until dots will be replaced
"botsTalk": 1200, // delay between every single chat bubble
"showAnswer": 200 // delay after the last bubble has been displayed
},
speed: {
"dotsFadeInOut": 400, // fade in/out speed of dots display/removal
"chatBlockFadeIn": 400, // speed of chat block fadein
"scrollingSpeed": 700 // speed for scrollTo()
}
}
}
Installation
Include Chat Bot JS in your page footer. Please be sure to include jQuery before including js-site-chat-bot.
<script src="https://cdn.rawgit.com/andreaspabst/js-chat-bot/master/build/js/chat-min.js"></script>
Initialize the script by using the following element:
<div class="col-full-width" id="chat"></div>
<script type="text/javascript">
var chat = new Chat();
chat.init({ajax: '/chat.json'});
</script>
You can either pass the ajax param with an url to the json config file or pass all the config directly into the init function.
Sample Config File
{
"config": {
"debug": false,
"behaviour": {
"autoScroll": false,
"autoResize": true,
"showTypingDots": true,
"useEmoji": true,
},
"times": {
"delay": {
"overall": 1000,
"showAnswer": 1000,
"botsTalk": 800
}
},
"classes": {
"chatWrap": "chat-wrap"
}
},
"talk": {
"init": {
"talks": [
"Hi there :emoji:smiley:, it's me!",
"Do you feel like talking?"
],
"answers": [
"Yeah, sure!",
"Naah, I just want to look around.."
],
"next": [
"talking1",
""
]
},
"talking1": {
"talks": [
"Alright then...",
"Why don't you call me on my phone?"
],
"answers": [],
"next": []
}
}
}
Configuration
configuration = {
behaviour: {
autoScroll: true, // use jQuery Scroll To Function
autoDetectLanguage: false, // if useLanguages: true then use browser lang
autoScrollAfterFirstAnswer: true, // wait until first answer has been given
autoResize: true, // continuous adaption of height of mainChat
defaultLang: "en", // relevant if useLanguages: true
showTypingDots: true, // show "..." dots first
useEmoji: true, // :emoji:xyz: is an emoji with name xyz
useInputs: true, // :input:xyz: is a text input with name xyz
useLanguages: false // parse talks with languages
},
ids: {
mainChat: "chat", // the chat container, with chatWrap and answerWrap
answerPrefix: "answer-" // prefix of answer link "prefix-0", "prefix-1",...
},
classes: {
answer: "chat-answer", // class of answer link
answerWrap: "chat-answer-select", // class of answer box
bubbleWrap: "chat-bubble", // class of any bubble
bubble: "chat-bubble-msg", // class of any bubble
bubbleBot: "chat-bubble-msg-me", // class of bot bubble
bubbleVisitor: "chat-bubble-msg-visitor", // class of visitors answer bubble
chatWrap: "chat-wrap", // wrapper of the chat bubbles
emojiPrefix: "em em-" // emoji class <i class="prefix-emoji"></i>
},
times: {
delay: {
"overall": 0, // general delay to start chatting
"dots": 700, // delay until dots will be replaced
"botsTalk": 1200, // delay between every single chat bubble
"showAnswer": 200 // delay after the last bubble has been displayed
},
speed: {
"dotsFadeInOut": 400, // fade in/out speed of dots display/removal
"chatBlockFadeIn": 400, // speed of chat block fadein
"scrollingSpeed": 700 // speed for scrollTo()
}
}
}
Writing a conversation
A conversation is called talk in js-site-chat-bot. A talk consists of at least one init element:
"talk": {
"init": {
"talks": [
"Hello world!"
],
"answers": [
"Yeah, sure!",
"Naah, I just want to look around.."
],
"next": [
"talking1",
"donttalk1"
]
},
//...
}
Writing multi language conversation
To ensure multi language functionality, e.g. by selecting the default browser language, simply enable language feature by passing the following options
{
"config": {
"behaviour": {
"useLanguages": false,
"autoDetectLanguage": true
}
}
}
To provide a conversation for each language, simply use the following structure for a talk element
"talk": {
"en": {
"init": {
"talks": ["...", "..."],
"answers": ["...","..."],
"next": ["a1","a2"]
},
"a1": {
"talks": ["...", "..."],
"answers": ["...","..."],
"next": []
},
"a2": {
"talks": ["...", "..."],
"answers": ["...","..."],
"next": []
}
},
"de": {
"init": {
"talks": ["...", "..."],
"answers": ["...","..."],
"next": ["a1","a2"]
},
"a1": {
"talks": ["...", "..."],
"answers": ["...","..."],
"next": []
},
"a2": {
"talks": ["...", "..."],
"answers": ["...","..."],
"next": []
}
}
}
Using emojis in conversations
You may also use emojis in a conversation. To use them, you have to enable emojis in configuration
{
"config": {
"behaviour": {
"useEmoji": true
}
}
}
Usage: In any bot message or answer, just use :emoji:XYZ: which will be transformed into an italic element <i class="em em-XYZ"></i>. You are able to change the emoji class by defining the following setup in the config tree config.classes.emojiPrefix.
Using wait in bubbles
By adding :wait:0-9: (e.g. :wait:3000: for 3 seconds), the ChatBot will wait the amount of milliseconds.
Input values
By adding :input:a-Z: to answers, an input field is displayed. The value is stored in the given parameter.
An example: The input by using :input:foo: is stored in foo. To retrieve values see the next chapter.
If the answer has an input field, the default event is prevented (clicks don’t work, only enter).
Display values
By adding :output:a-Z: to talk, a previous entered input value is displayed (if given).
If you’ve stored a value in foo, you can retrieve it by :output:foo:.
Submitting all values
If you asked the user to enter values, e.g. by adding :input:a-Z:, you can submit all previous entered values by adding :submit: anywhere in the chat.
Make sure you’ve defined a configuration.formPost.ajaxUrl in the configuration section.
License
Copyright 2017 Andreas Pabst
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is furnished to
do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.