Integrating WordPress Contact Form 7 with LiveAdmin Chat

Written by: Ivan in How-To, Web Technology

Contact Form 7 with LiveAdmin Integration

Integrating your forms with a live chat systems can be a great way for your customers to talk with one of your representatives when they need help the most.

We had a little quote form made in Contact Form 7 and one of the possible selections was to “Discuss your Quote with a Representative”. Only thing left to do was to find and connect a live chat system to that form selection. Finding a good WordPress  chat for online customer support is hard and I tried at least a few dozen plugins until I discovered LiveAdmin.

LiveAdmin is an easy to use live chat software designed for online customer relations. It has its own WordPress plugin (we didn’t use, but is useful), and clear instructions on how to install and use it.

LiveAdmin Setup

If you are looking for basic chat features you could use LiveAdmin Lite  (we used this version and if you want to test it first, you can sign up and LiveAdmin will give you a 30 day free trial user).

Getting and setting up LiveAdmin Lite:

1. Download the LiveAdmin Lite.

2. After you unzip the file, you can move the folder to a location that will be easy to remember. I treated it is a plugin and put it in my Plugins folder.

3. Type LiveAdmin folder location in the url ex:www.yoursite.com/wp-content/plugins/liveadmin/ . This will launch LiveAdmin control panel.

4. If this is your first time launching LiveAdmin you will need to create a new user and provide your data base information. LiveAdmin will need that information to access the data base and store its own data. Just follow the instructions.

5. After you are done installing LiveAdmin, you will need to make it work on your site. Press Configuration and it will open a new tab that has all the configurations you will need to setup you live chat (or at least most them). Press Installation Guide. Copy the step 1 code and paste it in your header.

6. Step 2 has the code that will be replaced by a clickable status image. Better to put this in a separate div – just so you can access it later.

<div class="chat_image"><span id='liveadmin'></span></div>

Place the code somewhere on your site to test if the chat is working. A suggestion for a good place would be a text widget on a sidebar.

If you look at the source of your agent image, you will see that the tag has an onclick command

onclick="Live_xxxxxx_Admin.StartChatPanel();

Keep this in mind because we will need it later.

Once you get the chat to work, you can change the LiveAdmin agent image. You can do that by pressing Configuration->Chat Panel->Status Image Theme->press on the Custom Image and put a full link for your online and offline agent images.

When the chat is working,  we moveto the Contact Form 7 quote form. While in the Chat Panel window you change the settings for the chat skin, waiting time, ring, and many other features. When you have finished setting up LiveAdmin chat to your liking we can move to the integration of our Contact Form 7 quote form.

Contact Form 7 Quote Form

To begin, lets create a basic quote form where we can provide initial questions that will help you provide a quick quote.  Usually if a form is quick to complete people are more likely to fill it out.  Once the user selects Chat with a Representative and submits the form, a LiveAdmin chat window will pop up. The online agent can quickly access his email, retrieve the information of the person he is about to chat with and provide him with a quick quote.

First Name*[text* first-name]
Last Name*[text* last-name]
Email*[email* email]
Telephone*[text* telephone]
Please Choose Insurance Preference*
[checkbox preference "Auto" "Home" "Life" "Business"]
Message
[textarea  message 87x5 class:long_text]
Please Choose Contact Preference*
[radio preference2 "Chat with a Representative to get a Quick Quote Now" "Call me within the next 4 hours" "Email me within the next business day"]
Enter [captchac captcha-759] Here
[captchar captcha-759]  [submit "Submit Quote"]

Here comes the tricky part. We will need to create a script that will check if Chat with a Representative is selected to activate the LiveAdmin chat only after Submit is pressed. In a situation like this I usually add the script to the form as it prevents it from loading on every page, and it is easier to manage.

The script bellow will check if Chat with a Representative is selected and then once the form is submitted it will run the onclick action that we mentioned earlier.  Please note that your form class might be different.

<script language="javascript" type="text/javascript">
jQuery("input[name='preference2']").change(function(){
if (jQuery("input[name='preference2']:checked").val() == 'Chat with a Representative to get a Quick Quote Now')
{
jQuery('.wpcf7-form').submit(function() {
Live_xxxxxx_Admin.StartChatPanel();
});
} });
</script>

Note: Be carefull with the script in Contact Form 7 as it is very picky and can change things without warning.

Also note that StartChatPanel(); doesn’t work unless <span id=’liveadmin’></span> is present on the same page.

If you want to start the chat on submit without having the agent image in the sidebar, just add display none to chat_image class.

If you want to have a more refined control, like activating the chat only if the form submission was successful (right now it just needs the Chat with a Representative selected and Submit clicked for the chat window to open – regardless if the form went through or not), you will need to add the StartChatPanel(); command in ContactForm 7 controler.php file.  You could probably do something like this:

 echo '<script language="javascript" type="text/javascript">$(document).ready(function() {  Live_xxxxxx_Admin.StartChatPanel(); });</script>';

See How to Integrate Contact Form 7 with MailChimp for exact line location.

If all works correctly, a chat window should pop up on form submission. Hope this helps with your LiveAdmin and Contact Form 7 integration. Please let us know if this tutorial was helpful, or if you have any notes and comments.