Press "Enter" to skip to content

[ChatBot] A JavaScript Plugin to Help Developers Build a Simple Conversation | flow-chat-js

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.

jquery chatbot plugin, jquery chatbot github, javascript chatbot github, chat popup box in jquery demo, multiple chat popup box in jquery demo

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

Chatbot-like Conversational UI, Flow Chat JS Plugin/Github, chatbot using html and javascript, javascript chatbot popup


See Demo And Download

Official Website(karanmhatre1): Click Here

This superior jQuery/javascript plugin is developed by karanmhatre1. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.