LiveEngage - Using CSS To Modify Embedded Chat Buttons

Update: With the new HTML engagements in LiveEngage, this method is now outdated. It is recommended that you use the supported method listed above.
The purpose of this tutorial is to show you how to use your own custom CSS to modify your embedded chat buttons from LiveEngage.

Currently in LiveEngage, the only options you have for an embedded button is to use an image or the few text styling elements that are available in the engagement studio. There is no way to use your own fonts, CSS, or HTML elements for your chat button, which can sometimes make it hard for your chat button to match the rest of the theme of your site.

For example, if the rest of the links on your site have hover effects, or if the font family of the text in the links is 'Comic Sans MS', your embedded chat button will not match the feel of your site. In order to fix this, you can use custom CSS on your site to modify the default styling of the button.

The embedded chat buttons have a class called 'LPMlabel', so by adding a CSS styling to the page with the !important attribute, it will override the default CSS.

In the first example, we are going to use CSS to change the font-family of the embedded chat button, and in the second example we are going to use CSS to add a hoover effect to the embedded chat button. 

Let's get started:

Example 1: Change the default font-family

Code:


Result:

Before	After

Example 2: Add Hover Effect

Code:


Result:

Before	After

Summary: This tutorial showed you how to use custom CSS to modify the default styling of your embedded chat buttons.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.

Ask the Community Experts Session: AEM Apps Deep Dive

Adobe will be holding another "Ask the Community Experts Session" this month on November 24th at 11 A.M. - 1:00 P.M. EST.

By attending this session you will gain a better understanding of:

• Using AEM Apps
• Ask questions related to using AEM Apps for mobile apps solutions

If you have not attended one of these AEM sessions, they are a great chance to listen to some of the best experts in the industry, a great place to ask questions, and a good way to start networking. 

Here is a link to sign up if you are interested: Ask the Community Experts

This session will be hosted by Scott Macdonad, and Ken Beaton.

LiveEngage - Use The Web App SDK To Send Chat Lines To The Agent Console

The purpose of this tutorial is to show you how to use the Web Application SDK to send chat lines from your own web application.

The Web Application SDK is a client-side package that can be used to communicate with the LivePerson Agent Workspace. In order to use the SDK, your web application needs to be able to open inside an iFrame, and your application must be hosted over SSL. You can read more about the SDK here: Web App SDK PDF

For this tutorial, we are going to use create a simple web page that will send a "Hello World!" chat line to the agent console.

Let's get started:

1. The first thing we will want to do is create a basic HTML template for our web application. Create an index.html file in your favorite editor and add the following code:

2. The next thing we need to do is reference the SDK code in your web application. To do this, you need to add the following code to the head element of your HTML page:

3. Next, you need to add the following JavaScript right before your closing body element of your HTML page:

For the code we just added, we declared a variable that is set to the SDK, and then we initialized it, which allows to communicate with the agent console. By doing this, we are able to send data to the chat input line of the agent console, and we are able to pull information about the chat from the agent console.

Lastly we defined a variable that contains the data we want to send to the chat input line, and then we sent the data.

4. Your final index.html page should look like this:

5. Now that we have our web application ready to go, you just need to host it on a secure site. Once this is done, we need to add the widget inside LiveEngage. You can read more about that here: Add Widget To LiveEngage

Summary: This tutorial showed you how to use the Web Application SDK to send a chat line to the agent console. and how to add the your web application as a widget inside the agent console.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.

LiveEngage - Chat Transcript XML Parsing Tool

Today I wanted to share with you a XML Chat Transcript Parsing tool that I created to parse the chat transcripts that you can export from LiveEngage.

Inside LiveEngage, there is no easy way to see/analyze the chat transcripts without going through them one at a time. One of the options that is available to you, is you are able to export the transcripts as a text file or as xml file.

With the tool, you are able to load in these transcripts, and it will parse the information into a data table, which then you can filter to find the information you are looking for. For example, if you only want to look at chats with low CSAT scores, or if you are looking for chats where an agent answered yes to an Agent Survey question, or even if you are looking for a particular visitor's chat, you can filter the table to only contain this information.

The tool allows you to print out individual chats, export the data to a csv file, or even copy the content of the table.

Besides allowing you to search the transcripts, the tool also offers some reporting that is currently not available in LiveEngage. Here is a list of some of the reports that are currently available:

• Average Agent Response Time
• Average Visitor Response Time
• Average Agent Response Time Per Agent
• CSAT Reporting 
• CSAT Reporting By Agent
• Revenue Reporting (Based On Agent Survey Question)
• A Map Of Where Your Chats Are Coming From
• Custom Reports (Choose the questions from your surveys you would like to report on)

If you are interested in checking out the tool, you can find a live version here: http://scottwestover.github.io/

If you are interested in getting a local copy, or forking a copy of the project, you can find the tool on GitHub here: https://github.com/scottwestover/LiveEngage-Chat-Transcript-Tool

I hope you enjoyed this post. If you have any questions or comments, please feel free to post them below.

LiveEngage - Use URL To Pre-fill Your Account ID On The Login Page

On the LiveEngage login page, there is a 'remember me' check box that you can check to have your information stored in a cookie, however this is not always a valid option for everyone. For example, if your computer automatically clears your cookies and cache every night, or if you have cookies disabled, then the 'remember me' check box will not remember your information, which then requires you to enter your account number, username, and password every time you want to login.

You can get around this by adding some additional parameters to the URL, which will then automatically fill out the fields on form when you request the login page.

Here is an example:

https://authentication.liveperson.net/login.html?stId=123456

By adding the stId variable as a parameter on this URL, and by assigned it a value, it will populate the account number field on the login page. You just need to replace the 123456 with your Account ID for this to work.

I hope you enjoyed this post. If you have any questions or comments, please feel free to post them below.