LiveEngage - Use Your Own Custom Chat Button By Using JQuery

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 you can use your own chat buttons with LiveEngage by using JavaScript.

Currently in LiveEngage, you have a limited number of options for creating a chat button in the LiveEngage studio. This can make it hard for the chat button to match the look of your site, especially with all of the things you can do with CSS and JavaScript today.

So, in order to work around this,you will need to create your own chat that you would like to use on your website, and you will need to create a basic embedded chat button in the LiveEngage studio. Don't worry about what the embedded chat button looks like because we are going to use CSS styling to hide the chat button, and then use JavaScript to click the LiveEngage chat button when your button is clicked.

If you have created both buttons, then we can get started.

1. The first thing you will want to do is add the div for your LiveEngage chat button to your site to make sure it works.

2. Now, we are going to wrap this div inside an anchor tag with a class, which is what we are going to use to trigger the click on the chat button. For example, if your LiveEngage div is: <div id="slideout1"></div>, your code will look like this now:

<a class="live-person-ghost"><div id="slideout1"></div></a>

3. Next, we are going to add an id to our custom button. By adding an id, it will allow use to check to see if that button was clicked. Here is an example:

<button type="button" id="live-engage-link">Instant Live Chat</button>

4. If you do not have JQuery on your website, you will need to add the following script to the head section of your site:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

4. Now, we are going to add the JavaScript that will allow us to trigger the click on the LiveEngage button when someone clicks on your custom chat button. Add the following code before your closing body tag:

5. Now that you have added the JavaScript, we can test the code to make sure it works. If you click on your custom chat button, and it triggers the LiveEngage chat button, then the last thing we need to do is hide the LiveEngage chat button. You will need to add the following style to your LiveEngage div: style="display:none".

Here is a complete example of the code:

Summary: This tutorial showed you how to use JavaScript and CSS to use your own custom chat buttons with LiveEngage.

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

Free Code Camp - A Community Where You Can Learn To Code And Help Nonprofits

Today I wanted to share with everyone a website that I came across and that I have started using: http://www.freecodecamp.com/

Free Code Camp is a community that provides to you hundreds of hours of coding lessons, a way to build your portfolio, and they will put you in touch with non-profit organizations that will allow you to apply your new skills.

Some of the skills you can learn include:

• HTML5
• CSS3
• JavaScript
• Databases
• Git and GitHub
• Node.js
• React.js
• D3.js

The best part of this community, is that it is free, and you can access all of the lessons without having to sign up. However, I do recommend that you join because then you can save your progress, and you will also gain access to their online community that has over 100,000 users, which allows you to network and have people you can talk to about your code.

With the coding lessons, you are able to select any lesson at any time, which means you can work on the particular skills that you are interested in learning without having to go through all of the lessons in a particular order. However, if you are new to coding, then you can definitely start with the earlier lessons and work your way up to the harder concepts.

Here is an example of what their map looks like:

So far, I have worked on some of the lessons in my free time over the past few weeks, and I have enjoyed the experience. If you are interested in picking up new skills, I would definitely recommend that you check out this site.

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

LiveEngage - Connecting To The Engagement History API In Python Example

Hi Everyone. In a previous post, I showed you how to connect to the Engagement History API by using Java.  In case you missed the previous post, the Engagement History API is a REST API that is available from LivePerson. This API allows you to access your transcript data without having to go in and manually export them.

Here is a link to the previous post in case you missed it: Java Engagement History API Tutorial

Today, I wanted to share with you some sample code that will allow you to connect to the API in Python. Basically, the code uses the requests and requests_oauthlib libraries to connect to the API, and then it prints the response to the console.

Here is the code sample:

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

AEM Gems - Oak Lucene Indexes

Adobe will be holding another "AEM Gem" on January 20th at 11 A.M. - 12:00 P.M. EST.

This session will be a technical deep dive on Oak Lucene Indexes and how they can be used to get your queries perform better. This gem will also provide insight into how asynchronous indexing works and how it can be monitored.

Here is a link to sign up if you are interested: Register

This session will be hosted by Chetan Mehrotra and Alex Parvulescu.

Update: 3/23/2106

Here is a link to the recorded presentation and the slides: http://dev.day.com/content/ddc/en/gems/oak-lucene-indexes.html