Engage Your Audience With A Conversational Form - Chatty

Chatty is a jQuery Conversation Chat plugin designed to engage your audience and collect user data with a beautiful, interactive conversational form just like a real-time chatbot.

The plugin dynamically generates a conversational form from the form field you defined in the JavaScript/JSON. Feel free to add your messages and actions that your visitor can perform.

How to use it:

1. Load the required dependencies in the document:

• Font Awesome Iconic Font
• jQuery JavaScript Library.
• Velocity.js Animation Engine.

<link rel="stylesheet" type="text/css" href="/path/to/fontawesome/all.min.css" />
<script src="/path/to/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/velocity.min.js"></script>
<script type="text/javascript" src="/path/to/velocity.ui.min.js"></script>

2. Load the Chatty's files in the document.

<!-- From Local -->
<link rel="stylesheet" href="chat-style.css" />
<script src="chatModule.js"></script>
<!-- From CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WiFuchs/chatty@latest/chat-style.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/WiFuchs/chatty@latest/chatModule.js"></script>

3. Create a placeholder element for the conversational form.

<div id="chat-context"></div>

4. Insert your own messages and actionsinto the conversational form using input and msg:

var tags = [{
    type: "input",
    tag: "text",
    name: "name",
    "chat-msg": "Hi, I'm Chatty. What's your name?"
  },
  {
    type: "input",
    tag: "radio",
    name: "language",
    "chat-msg": "Nice to meet ya, {{name}}! Pick a language!",
    children: [{
        value: "jQuery",
        text: "jQuery",
      },
      {
        value: "Angular",
        text: "Angular",
      },
      {
        value: "React",
        text: "React",
      }
    ]
  },
  {
    type: "msg",
    "chat-msg": "You know, my favorite language was also {{language}}...",
    delay: 1250,
    callback: function() {
      var name = Chat.getData().name;
      Chat.addTags([{
        type: "input",
        tag: "radio",
        name: "tricked",
        "chat-msg": "What's your REAL name???",
        children: [{
            value: true,
            text: "jQuery"
          },
          {
            value: false,
            text: name
          },
          {
            value: true,
            text: "Script"
          }
        ],
        success: function(data) {
          var msg = data.tricked == 'true' ? "No chatbot for you, Mr. Voldemort!" : "My Custom Message Aboyt {{language}}";

          Chat.addTags([{
            type: "msg",
            "chat-msg": msg,
            delay: 2000
          }]);
        }
      }])
    }
  }
];

5. Initialize the conversional form and done.

$(function(){
  Chat.start($('#chat-context'), tags);
});

---

This awesome jQuery plugin is developed by WiFuchs. For more Advanced Usages, please check the demo page or visit the official website.