jQuery Plugin To Create Pretty Chat Bubbles - chatbubble.js

chatbubble.js is a dead small jQuery plugin used to create mobile-style chat/speech bubbles with a message typing effect on your html page.

How to use it:

1. Import the stylesheet jquery.chatbubble.min.css to stylize the chat bubbles.

<link rel="stylesheet" href="jquery.chatbubble.min.css">

2. Create an empty html list in which the chat bubbles should be placed.

<ul id="messages"></ul>

3. The plugin relies on the latest jQuery library (slim build is recommended) to work properly.

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

4. Initialize the plugin and define an array of text messages to display in the chat bubbles.

var messages = ['Message 1', 'Message 2', 'Message 3']
$('#messages').chatBubble({
  messages: messages
});

5. Specify the typing speed in words per minute.

$('#messages').chatBubble({
  messages: messages,
  typingSpeed: 40,
});

6. Set the delay between adding messages.

$('#messages').chatBubble({
  messages: messages,
  typingSpeed: 40,
  delay: 1000
});

---

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