Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


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


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


Bootstrap 3 Chat Plugin






No releases published


No packages published