Mobile Group Chat with One Line of JavaScript

2 min readJun 5, 2014

Waving Hand

Good News! We’ve launched an all new Chat Resource Center.

We recommend checking out our new Chat Resource Center, which includes overviews, tutorials, and design patterns for building and deploying mobile and web chat.

Take me to the Chat Resource Center →

One of our first and most popular blog posts is Chat in 10 Lines of Code. In my constant quest to outperform PubNub founder and CTO Stephen Blum, I decided to challenge myself to create a mobile group chat demo that was responsive and ready for mobile in just one line of JavaScript.

mobile group chat

Yes, that’s right…with one line of code you’ll get a mobile group chat app that looks like this:

Today, I’m happy to announce the release of the PubStrapChat jQuery plugin. With this library you can add mobile group chat to your site, mobile or otherwise, with a single line of javascript:

The chat box drops right into any div on your page. It’s fully responsive and will look great on any mobile site with Bootstrap. Or, you can ditch Bootstrap and style it yourself.

You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal.

All the code you need to get started and an example is below:

See the Pen PubStrapChat by Ian Jennings (@ianjennings) on CodePen.

The PubStrapChat plugin can be extended to use your own PubNub API keys and even your own user authentication system. You can configure the plugin by using an options object.

Check out the documentation to get it working with your custom user system. You can even set it up to use third party authentication systems like Facebook.

More from PubNub

How to Create a Dating App: 7 Steps to Fit Any Design
Insights6 minMar 15, 2023

How to Create a Dating App: 7 Steps to Fit Any Design

There are common underlying technologies for a dating app, and in this post, we’ll talk about the major technologies and designs...

Michael Carroll

Michael Carroll

How to Create a Real-time Public Transportation Schedule App
Build6 minMar 14, 2023

How to Create a Real-time Public Transportation Schedule App

How to use geohashing, JavaScript, Google Maps API, and BART API to build a real-time public transit schedule app.

Michael Carroll

Michael Carroll

How to Create Real-Time Vehicle Location Tracking App
Build2 minMar 9, 2023

How to Create Real-Time Vehicle Location Tracking App

How to track and stream real-time vehicle location on a live-updating map using EON, JavaScript, and the Mapbox API.

Michael Carroll

Michael Carroll

Talk to an expert