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:3000 as 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])



:public_api_id => Rails.configuration.planga[:public_id],

:private_api_key => Rails.configuration.planga[:secret_key],

:conversation_id => "private-#{[current_user.id,

:current_user_id => current_user.id,

:current_user_name => current_user.full_name,

:container_id => "chat"

})

end 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

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, 123 is 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:

User: @user .full_name %> <p>

<strong>Bio</strong>

</p> @user .bio %> <p><%= link_to "All Users", root_path %></p>

<%=

<% end %> @planga .chat_snippet.html_safe %>

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.