Skip to content
Bootstrap 3 Chat Plugin
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.


PubStrapChat is a jQuery plugin that lets you add chat to a website easily. It plugs right into Bootstrap so it looks great out of the box, is fully responsive, yadda yadda.



This plugin requires PubNub. If you use a custom key, you need to enable the presence feature on your account.

<script src=""></script>

Since it's a jQuery plugin, it also requires jQuery.

<script src="//"></script>

It's designed to look great with Bootstrap, but does not require the Bootstrap stylesheet.

Barebones Example

<script src=""></script>
<script src="//"></script>
<script src="../lib/pubstrap-chat.js"></script>
<link href="//" rel="stylesheet">
<div id="target">
<script type="text/javascript">
$(function() {


You can configure PubStrapChat with a number of options.

var options = {};
Parameter Default Description
publish_key 'demo' Your PubNub publish key.
subscribe_key 'demo' Your PubNub subscribe key.
channel 'pubstrapchat' A channel name for this chatroom. Acts as a PubNub channel.
submit_text 'Send' What the chat button should say.
height '200px' How tall the chatroom iframe should be (not including chat input)

Options example

var options = {
  publish_key: 'demo',
  subscribe_key: 'demo',
  channel: 'pubstrapchat',
  submit_text: 'Send',
  height: '200px'


Custom User System

By default, users will get a random username like 'Purple Penguin' (color + animal). Despite how awesome these usernames may be, you probably want to configure your own user system.

You can configure PubStrapChat to use a custom user system like your own login system, facebook, twitter, etc. This way you get accurate usernames and ids for your system.

Parameter Example Description
data_from_session callback(user_data) A function that identifies the current user. Passes a callback as the only parameter. The callback must be called with the user's session data: callback(data). More examples below.
id_from_data return; A function to extract a user's id from the data returned by data_from_session
username_from_data return user_data.username A function to extract a user's username from the data returned by data_from_session

Custom user system examples

Here's an example that uses to generate user profiles. View the full example at /examples/randomuserme.html.

The AJAX request returns a JSON object like the following:


We pass that into the callback for data_from_session and our user is populated.

  channel: 'pubstrapchat-randomuserme',
  data_from_session: function(callback) {
      url: "",
      cache: false
    .done(function(data) {
      // we pass the first result to the callback
  id_from_data: function(data) {
    // extract the "seed" (id) from the data returned by data_from_session
    return data.seed;
  username_from_data: function(data) {
    // do the same for username
    return data.user.username;

Here's another one that uses the Facebook api. View the full example at /examples/facebook.html.

  channel: 'pubstrapchat-facebook',
  data_from_session: function(callback) {

    FB.api('/me', function(data) {

  id_from_data: function(data) {
  username_from_data: function(data) {

Running the examples locally

Clone and run:

python -m SimpleHTTPServer

Load http://localhost:8000/examples/bare.html and http://localhost:8000/examples/facebook.html

You can’t perform that action at this time.