Create A Smart Chat Bot From An Html Form - convForm

Create A Smart Chat Bot From An Html Form - convForm
File Size: 52.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

<script src="//code.jquery.com/jquery.min.js"></script>

2. Load the jQuery convForm plugin's JavaScript and CSS files in the document.

<link rel="stylesheet" href="dist/jquery.convform.css">
<script src="dist/jquery.convform.js"></script>

3. Define the question to ask using conv-question attribute as this:

<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.

<select name="conversation" conv-question="Question To Ask">
  <option value="yes">Yes</option>
  <option value="no">No</option>
</select>

<div conv-fork="conversation">
  <div conv-case="yes">
    <input type="text" conv-question="Question To Ask" no-answer="true">
  </div>
  <div conv-case="no">
    <select name="thought" conv-question="Question To Ask">
      <option value="yes">Yes</option>
      <option value="no">No</option>
    </select>
  </div>
</div>

5. Possible plugin options.

var convForm = $('.my-conv-form-wrapper').convform({
    placeHolder : 'Type Here',
    typeInputUi : 'textarea',
    timeOutFirstQuestion : 1200,
    buttonClassStyle : 'icon2-arrow',
    eventList : {
      onSubmitForm : function(convState) {
        console.log('completed');
        convState.form.submit();
        return true;
      },
      onInputSubmit : function(convState, readyCallback) {readyCallback()}
    },
    formIdName : 'convForm',
    inputIdName : 'userInput',
    loadSpinnerVisible : '',
    buttonText: '▶'
});

Changelog:

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

  • fixed bug

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.