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.