Minimal jQuery Based Chat Simulator - FakeChatBot

FakeChatBot is a jQuery plugin used for creating a multi-line text typing effect to simulate chat messages on the webpage.

How to use it:

1. Add custom text messages to the chat simulator and specify the typing delay using HTML5 data-pause attribute as follows:

<div id="chatbot">
  <div class="fakechatbot-message" data-pause="1000"><strong>User:</strong> Hello!</div>
  <div class="fakechatbot-message" data-pause="3000"><strong>Bot:</strong> Good morning! How can I help you?</div>
  <div class="fakechatbot-message" data-pause="2000"><strong>User:</strong> Do you want to join us?</div>
  <div class="fakechatbot-message" data-pause="1000"><strong>Bot:</strong> Of course, where are you?</div>
  <div class="fakechatbot-typing">Typing ...</div>
</div>

2. Insert the required styles as displayed below to your CSS file or webpage.

.fakechatbot-typing, .fakechatbot-message { display: none; }

.fakechatbot-typing-active, .fakechatbot-message-display { display: block; }

3. Place the main JS file fakechatbot.js after jQuery but before the closing body tag.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="fakechatbot.js"></script>

4. Initialize the chat simulator and done.

$('#chatbot').fakechatbot();

5. Set the typing duration per word in milliseconds.

$('#chatbot').fakechatbot({
  durationPerWord: 200
});

---

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