Building Live Chat Between Users in a Rails application using Planga.io

Planga is a new web-service that is currently in open Beta, that allows you to seamlessly integrate live chat functionality in your existing web-app.

We are super excited to let you try out Planga.io! This guide is intended to show you how easy it is to get started.

In the next couple of minutes, I will explain how to use Planga.io to implement seamless live chat between users of your Ruby on Rails application.

Planga.io — Seamless Live Chat for Applications and Platforms

Planga makes it simple to implement live chat as if it were part of your app. The UX is top notch, which is hard to achieve when building such a feature in-house.

Let me show you!

We start with a very simple Rails 5 application. It has a Devise model named User. There is a profile page for every user on the route /users/:id. To easily test out the chat we’ re building, there is a list of users on the root page, from here you can sign in to any of the seeded (pre-defined) user accounts.

Find the code of the example application on Github.

Here you see the routes-file config/routes.rb which has actions to list all users, show the profile page of a single user, and become that user.

Rails.application.routes.draw do
  root 'users#index'
  resources :users, only: [:show] do
    member do
      get :become
    end
  end
end

Running The Example Application

Clone the repository and enter the folder:

git clone https://github.com/renevanpelt/planga-rails-example.git
cd planga-rails-example

Run the migration and seed the database:

rake db:migrate
rake db:seed

Run the server on any port you like:

rails s -p 3000

Finally verify the application runs on localhost:3000as it should. If you have problems running the app, don’t hesitate to comment below.

Now, register an account at Planga.io and get an API key, it’s less than a minute work.

Add the Planga Ruby language integration to your gemfile Gemfile.rb:

gem 'planga', '~> 0.0.4'

And run bundle in your command line

Create the file config/initializers/planga.rb and add your API keys:

Rails.configuration.planga = {
  :public_id => '[YOUR PUBLIC ID]',
  :secret_key      => '[YOUR SECRET KEY]'
}

Don’t forget to restart the server after updating an initializer file!

In app/controllers/users_controller.rb add the following to the show action:

class UsersController < ApplicationController
  def index
    @users = User.all.order(created_at: :desc)
  end
def show
  @user = User.find(params[:id])
  if user_signed_in?
      @planga = Planga.new({
        :public_api_id => Rails.configuration.planga[:public_id],
        :private_api_key => Rails.configuration.planga[:secret_key],
        :conversation_id => "private-#{[current_user.id, @user.id].sort.join("-")}",
        :current_user_id => current_user.id,
        :current_user_name => current_user.full_name,
        :container_id => "chat"
      })
    end
end
def become
    sign_in(:user, User.find(params[:id]))
    redirect_to "/"
  end
end

This adds a chat screen to the profile page, but only if the current visitor of the page has been signed in.

The one detail that needs some extra clarification is the line

:conversation_id => “private-#{[current_user.id, @user.id].sort.join(“-”)}” 

What happens here, is that we create the conversation ID based on the IDs of the two users. We sort these two IDs so that it does not matter if user A (with ID, say, 678) is logged in visits user B’ s profile page, or if user B (with ID, say, 123is logged in an visits A’ s profile page: In both cases, the result would be private-123-678.

Now, change app/views/users/show.html.erb so it looks like this:

<h1>User: <%= @user.full_name %></h1>
<p>
  <strong>Bio</strong>
</p>
<p><%= @user.bio %></p>
<p><%= link_to "All Users", root_path %></p>
<% if user_signed_in? %>
  <%= @planga.chat_snippet.html_safe %>
<% end %>

And last but not least, we need some styling for the chat, add this to app/assets/stylesheets/application.css:

.planga--chat-container {
    margin-bottom: 50px;
}
.planga--chat-messages {
    height: 400px;
    overflow-y: scroll;
    border: 1px solid #777;
}
.planga--chat-message {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    transition-duration: .3s;
}
.planga--chat-message:hover {
    background-color: rgba(0,0,0,0.08);
}
.planga--chat-current-user-message  .planga--chat-author-wrapper {
    color: green;
}
.planga--chat-message-sent-at-wrapper {
    display: inline-block;
    font-size: 0.8em;
    opacity: 0.5;
    float: right;
cursor: help;
}
.planga--chat-author-wrapper {
    display: inline-block;
    min-width: 50px;
    font-weight: bold;
    text-align: right;
}
.planga--chat-message-content {
    display: inline-block;
    margin-left: 0px;
    word-break: break-all;
}
.planga--new-message-field-wrapper {
    width: 85%;
    float: left;
}
.planga--new-message-form {
    min-height: 33px;
}
.planga--new-message-field {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
}
.planga--new-message-submit-button {
    float: right;
    height: 33px;
    padding: 0px;
    box-sizing: border-box;
}

Here is Planga and the example application in action

That’s all. If you have any questions don’t hesitate to contact us at https://planga.io/contact

If you are a developer, we would very much appreciate if you try Planga.io out and let us know what you think.