This time I will share jQuery Plugin and tutorial about Create A Smart Chat Bot From An Html Form – convForm, hope it will help you in programming stack.
convForm is a fancy jQuery plugin to create a smart, interactive live chat bot from a normal html form that you can define your own questions for each form field using conv-* attributes.
How to use it:
1. The plugin requires the latest jQuery library is loaded properly in the document.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2. Load the jQuery convForm plugin’s JavaScript and CSS files in the document.
1 |
<link rel="stylesheet" href="dist/jquery.convform.css"> |
2 |
<script src="dist/jquery.convform.js"></script> |
3. Define the question to ask using conv-question attribute as this:
1 |
<input type="text" name="name" conv-question="Question to ask"> |
4. If you’d like to show specific questions based on your user’s answer.
01 |
<select name="conversation" conv-question="Question To Ask"> |
02 |
<option value="yes">Yes</option> |
03 |
<option value="no">No</option> |
06 |
<div conv-fork="conversation"> |
08 |
<input type="text" conv-question="Question To Ask" no-answer="true"> |
11 |
<select name="thought" conv-question="Question To Ask"> |
12 |
<option value="yes">Yes</option> |
13 |
<option value="no">No</option> |
5. Possible plugin options with default values.
01 |
var convForm = $('.my-conv-form-wrapper').convform({ |
02 |
placeHolder : 'Type Here', |
03 |
typeInputUi : 'textarea', |
04 |
timeOutFirstQuestion : 1200, |
05 |
buttonClassStyle : 'icon2-arrow', |
06 |
selectInputStyle: 'show', |
07 |
selectInputDisabledText: 'Select an option', |
09 |
onSubmitForm : function(convState) { |
10 |
console.log('completed'); |
11 |
convState.form.submit(); |
14 |
onInputSubmit : function(convState, readyCallback) { |
15 |
if(convState.current.input.hasOwnProperty('callback')) { |
16 |
if(typeof convState.current.input.callback === 'string') { |
17 |
window[convState.current.input.callback](convState, readyCallback); |
19 |
convState.current.input.callback(convState, readyCallback); |
26 |
formIdName : 'convForm', |
27 |
inputIdName : 'userInput', |
28 |
loadSpinnerVisible : '', |
Changelog:
2019-03-02
- added selectInputStyle and selectInputDisabledText options
2019-02-20
2019-02-13
- fixed disappearing chat box
2018-12-26
- adjusted wrapper height when showing options
2018-11-08
- changes to callback functions to also pass ready
2018-10-18
- multiple select not able to select bug fixed, multiple select not
2018-07-12
- new option eventList: onInputSubmit, called on every input submit.
2018-04-20
- Attributes changed to be w3c compliant
2018-03-20
- added option to change button text (buttonText)
2018-02-21
- changed default loader color, removed round border-top-right radius from
2018-02-20
- fixed a bug with rollback example, and prevent js from throwing error
2018-02-19
- callback functions now receive the ConvState object as a parameter so the user can interact with the conversation states and do cool things like rollback
2018-02-08
- fixed bug when user typed an invalid option and then clicked on a valid
2017-12-06
- fixed bug where form didn’t submit when last question was a no-answer=”true”
2017-08-23
2017-05-26
- added callback support to options on a select
This awesome jQuery plugin is developed by eduardotkoller. For more Advanced Usages, please check the demo page or visit the official website.
