Conversation Chats Plugin In jQuery – ConvoJs

File Size:168.98 KB
Views Total:352
Last Update:May 5, 2018
Publish Date:December 30, 2017
Official Website:Go to website
License:MIT

It is a sort of a fancy jQuery chat box plugin that help people to create the different, mobile-friendly, responsive, interactive kind of conversations on the web applications is known as ConvoJs.It has easy going process of the chat box plugin that helps in the different creations of the conversations.

 

How to use :

1. Add jQuery JavaScript library and the jQuery ConvoJs plugin’s files :

<link href="css/convo.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/convo.js"></script>

2. Add the HTML for the chat UI :

<div class="top-bar"></div>
<div class="header-tools">
  <a href="javascript:void(0)">
    <img src="logo.png" alt="Your Logo Here" id="logo"/>
  </a>
</div>
<div class="convo__wrapper">
  <ul class="bubble__wrapper">
  </ul>
</div>
<div class="cui__response">
</div>
<div class="background"> </div>

3. Prepare your own chat messages, choices, questions for the chat bot :

var chatz = [{
    "path": "intro",
    "messages": [{
            "text": "What’s up fam!",
            "author": "ConvoJs"
        },
        {
            "text": "What is 1 + 1?",
            "author": "ConvoJs"
        }
    ],
    "choices": [
        {
            "path": "block1",
            "text": "Meh",
            "type": "input"
        },
        {
            "path": "block1",
            "text": "Meh",
            "type": "button",
            "expected": "2",
            "pathTrue": "block1-correct",
            "pathFalse": "block1-wrong"
        }
    ]
}, {
    "path": "block1-correct",
    "messages": [{
            "text": "You got it, good job",
            "author": "ConvoJs"
        }
    ],
    "choices": [{
            "path": "block2",
            "text": "Continue",
            "write": false
        }
    ]
}, {
    "path": "block1-wrong",
    "messages": [{
            "text": "Wrong Answer!",
            "author": "ConvoJs"
        }
    ],
    "choices": [{
            "path": "intro",
            "text": "Try Again",
            "write": false
        }
    ]
},{
    "path": "block2",
    "messages": [
        {
            "text": "Now, what is 2 + 3?",
            "author": "ConvoJs"
        }
    ],
    "choices": [
        {
            "path": "block2",
            "text": "Meh",
            "type": "input"
        },
        {
            "path": "block2",
            "text": "Meh",
            "type": "button",
            "expected": "5",
            "pathTrue": "block2-correct",
            "pathFalse": "block2-wrong"
        }
    ]
}, {
    "path": "block2-correct",
    "messages": [{
            "text": "Fantastic! ",
            "author": "ConvoJs"
        }
    ],
    "choices": [{
            "path": "block__",
            "text": "That's all for now!",
            "write": false
        }
    ]
}, {
    "path": "block2-wrong",
    "messages": [{
            "text": "Wrong Answer!",
            "author": "ConvoJs"
        }
    ],
    "choices": [{
            "path": "intro",
            "text": "Try Again",
            "write": false
        }
    ]
}];

4. Initialize the chat bot :

$(".bubble__wrapper").convo({
  data: chatz
});

5. Update for response input :

$("[contenteditable]").focusout(function () {
  var element = $(this);
  if (!element.text().trim().length) {
      element.empty();
  }
});

6. All possible plugin options :

$(".bubble__wrapper").convo({
  headerTopColor: null,
  logo: null,
  pageColor: null,
  inputCharLimit: 65,
  element: $(".bubble__wrapper")
});

Done 🙂