As I am currently working on a Fraud Analytics Web Application based on Shiny (currently on beta version, more later on this blog) I found myself asking: wouldn’t be great to add live chat support to my Web Application visitors?
It would indeed!
an ancient example of chatting - Camera degli Sposi, Andrea Mantegna 1465 -1474
an ancient example of chatting – Camera degli Sposi, Andrea Mantegna 1465 -1474
But how to do it?
Unfortunately, looking on Google didn’t give any useful result.
Therefore I had to find it out by myself.

step by step tutorial

Going to the core, you can find here below a step-by-step tutorial on how to add a live chat to your Shiny App.
I did it using jivochat , mainly because it offers a good free entry-level; but with little changes you can replicate it with other chat services providers.

1. Create an account on jivochat

just type jivochat.com into your address bar, and you will find on the top right the ‘sign up’ button
 signup jvochat

2. Add a new site

to add a new site, log in into jivochat and then press the “Add site” button
 jivo add a site

3. Specify Site Url and language

You will be prompted by a window asking you to specify the URL of your site and the chat language.
site and language

4. Get the Javascript Code

After pressing the ‘Add’ button you will be prompted with a window showing the javascript code. Copy it and go to the next step
javascript code

5. Go to your Shiny App Root Folder and create a create a .txt file named ‘chat.js’

 into your App Root Folder ( the one created by Rstudio itself when you created the new app) create a .txt file, and then change it into a javascript file named ‘chat.js’. Be sure to change the file extension, removing the .txt default.
if (you need help with that & you are a Mac user)
else if (you need help with that & you are a Windows user)
else{do some googling for help}
I know what you are thinking : couldn’t we just create a javascript file? Of course you can! But I was looking for a way anyone could follow, from beginners to experts.

6. Remove the “script” tags from chat.js

you can open ‘chat.js’ using Rstudio (link) itself or any other text editor.
after removing the tags, your script should look like that:
function(){ var widget_id = 'u3ltusnn0Q'; 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = '//code.jivosite.com/script/widget/'+widget_id; 
var ss = document.getElementsByTagName('script')[0]; 
ss.parentNode.insertBefore(s, ss);})();
be sure that no change was introduced during the copy-paste job.

6. Go to your Shiny App ui.R file and insert a call to chat.js

you can do this adding the following code just after the function indicating the type of page Shiny is going to use (fluidpage(),navbarpage() etc):
tags$head(includeScript("chat.js"))
For instance, your code could look like that:
shinyUI(fluidPage(
tags$head(includeScript("chat.js")),
titlePanel("my very first chat")
))
As you can see, we are simply adding into the head of the app html code a script, retrieved from the ‘chat.js’ file.

7. Enjoy your chat

Everything is ready to start your chat support experience, but in order to see your chat actually working you will have to deploy your app, which can be easily done using shinyapps.io .
live chat support shiny
Moreover, jivochat gives you the possibility to change some settings within your chat, like colors and texts fonts. To do that you just have to go to the jivochat admin panel and press the ‘settings’ button.
JivoChat Admin Panel
If you are planning to develop a Shiny app for professional or commercial purposes, adding a live chat support could be a good way to enhance user experience. This post showed you in details how to do it.
As always feel free to comment for (kind) criticism and any possible ( related 🙂  ) question.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s