Skip to content

Category: How-To

Mobile Group Chat with One Line of JavaScript

Published by ianjennings on June 5, 2014

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:

mobile group chat

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.

Concerned siblings

Published by ianjennings on March 21, 2014

Because margins collapse, the elements need not be concerned with their siblings.

Whenever you work with CSS, it is important that the properties and values you assign to a class are only relevant to that specific class and never in relation to a sibling.

For example you never want to add more margin-top to an element because it is “too close to the header.” The correct approach would be to add more margin-bottom to the header.