[ChatBot] A JavaScript Plugin to Help Developers Build a Conversation

Flow Chat JS Plugin is a JavaScript plugin to help developers build a simple chat flow. Flow Chat is a jQuery-based chat framework to create an interactive chat-box-like interface for common questions, storytelling, live support, etc.

Future scope:

Image and GIF support
URL message support
Design options – background image, etc.
TSV to JSON converter
Link to Google spreadsheet for pulling data

How to make use of it:

1. Load the stylesheet flowchat.css within the header and the JavaScript file flowchat.js.

<link rel="stylesheet" href="/path/to/src/flowchat.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/flowchat.js"></script>

2. Create a placeholder for the conversation chat.

<div id="flowchat"></div>

3. Prepare your JSON information to be rendered as a conversation.

// data.json 
[
   {
      "id":1,
      "text":"Hey",
      "messageType":"Question",
      "imageUrl":"",
      "nextMessageId":"",
      "option1":"Hi",
      "option1_nextMessageId":2,
      "option2":"",
      "option2_nextMessageId":"",
      "option3":"",
      "option3_nextMessageId":"",
      "option4":"",
      "option4_nextMessageId":"",
      "option5":"",
      "option5_nextMessageId":"",
      "option6":"",
      "option6_nextMessageId":""
   },
   {
      "id":2,
      "text":"Would you like to hear an interesting story?",
      "messageType":"Question",
      "imageUrl":"",
      "nextMessageId":"",
      "option1":"Yes",
      "option1_nextMessageId":4,
      "option2":"No",
      "option2_nextMessageId":3,
      "option3":"",
      "option3_nextMessageId":"",
      "option4":"",
      "option4_nextMessageId":"",
      "option5":"",
      "option5_nextMessageId":"",
      "option6":"",
      "option6_nextMessageId":""
   },
   {
      "id":3,
      "text":"No? That's too bad. Would you like to reconsider?",
      "messageType":"Question",
      "imageUrl":"",
      "nextMessageId":"",
      "option1":"Yes, ok. This story better be good.",
      "option1_nextMessageId":4,
      "option2":"",
      "option2_nextMessageId":"",
      "option3":"",
      "option3_nextMessageId":"",
      "option4":"",
      "option4_nextMessageId":"",
      "option5":"",
      "option5_nextMessageId":"",
      "option6":"",
      "option6_nextMessageId":""
   },
   // ...
]

4. Initialize the plugin to create a dialog chat.

$.getJSON( "data.json", function( dataJSON ) {
  $('#flowchat').flowchat({
    dataJSON: dataJSON
  });
});

5. By default the plugin will routinely begin the conversation chat on the web page.

$.getJSON( "data.json", function( dataJSON ) {
  $('#flowchat').flowchat({
    dataJSON: dataJSON,
    startButtonId: '#startButton',
    autoStart: false
  });
});

6. Determine the time to wait earlier than beginning the conversation chat.

$.getJSON( "data.json", function( dataJSON ) {
  $('#flowchat').flowchat({
    dataJSON: dataJSON,
    delay: 500
  });
});

7. Set which message id the dialog chat begins from.

$.getJSON( "data.json", function( dataJSON ) {
  $('#flowchat').flowchat({
    dataJSON: dataJSON,
    startMessageId: 2
  });
});

Parameters

data (required): default false. Data should be passed as a JSON. Check the format of the JSON below.
delay: default ‘1500’ms. This allows you to add a time delay to simulate typing before the bot messages.
startButtonId: default #startButton. You can define a start button id. Clicking this button will restart the chat flow.
autoStart: default true. If true, the chat flow will start as soon as the page load. If you need to delay the start, set it to ‘false’
startMessageId: default 1. Change if you wish to start from a different message-id.