# WP Flat Visual Chat

This plugin is an unique chat allowing you to visually guide your clients on the site. You can view the user current page, and show any element to the user. By Loopus

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here.

Item Support

Author: | Loopus
Contact: | http://codecanyon.net/item/wp-flat-visual-chat/8329900/support/

Author URL: | http://codecanyon.net/user/loopus
Item URL: | http://codecanyon.net/item/wp-flat-visual-chat/8329900

# Installation How to Install the plugin

### 1. Install Plugin

Here's a brief information about how to install this plugin

1.1) Installation

Simply upload the file "WP_Visual_Chat.zip" from the plugins panel of Wordpress then activate it clicking the link "Activate" under the name of the plugin.

# Usage How to use this plugin

### 2. Use the plugin

Here's a brief information about how to use this plugin

2.1) Chat Console

Click on "Visual Chat" menu link to open the chat console page :

In the main toolbar, you can find links to open the settings and the canned messages.
You can also edit your personal informations by clicking the account box at right of the toolbar.

To login as operator and be able to chat with your customers, simply click the button "Log in" :

Once logged, you will see a panel at left of the page that shows your current chats, the online users (if the option "View online visitors in realtime" is activated") and the other logged operators.
Simply click the bubble icon of a user to start a chat with him.

When you start a chat with a visitor, you see the page of the website where the customer is on the background of the console page.
At right of the chat text field, you will find some links that allow you to use a canned message, send a file or show an element of the website to your interlocutor.

2.2) Settings

Simply click the gears icon in the console toolbar to open the settings window.

Here are the different settings tabs :

#### General

Here you can find and edit all the general settings of the plugin, such the detection delays, the permissions etc ...

#### Login panel

You can choose to show a login panel to your customers before starting the chat, and freely manage its fields.

#### Login panel

You can choose to show a contact form to your customers if there is no operator online. You can freely manage its fields from this panel.

#### Operators roles

This panel allows you to freely choose which wordpress roles can use or not the chat operator console.

#### Design

You can find all the settings relative to the design of the frontend chat panel.

#### Texts

You can freely edit each frontend text from this panel.

2.3) Show an element of the website

To show an element of the website to your interlocutor, simply click the eye icon from the chat operator panel to start the selection.

Now simply navigate on your website to the wanted page, click the button "Select the element" in the top right panel, then click the target element on the page :

The selected element is now highlighted on the page. Simply click the button "Yes" to return to the chat panel and write your message.
The customer will be automatically redirected to the page that contains the selected element and will see it highlighted.

2.4) Apply an update

##### Automatic Updates

To apply an automatic update, click on the Dashboard > Updates menu link in the WP menu, then select the plugin in the list and click the "Update plugins" button to apply the update.

##### Manually apply an update

To manually apply an update, simply replace the files of the plugin using ftp.
The path is :
/wp-content/plugins/WP_Visual_Chat/ .

2.5) Use with WPML
To apply WPML translations to the texts of the chat panel, open the menu link "String Translation" in the WPML submenu and set the option "Select strings within domain" to "VisualChat Frontend". You will see the list of the texts and field labels used on the frontend chat panel and will be able to apply the wanted translations onside .
The frontend chat panel will automatically show the texts in the current language used by the customer.

### Credits

### JavaScript & CSS

1. jQuery
2. jQuery UI
3. Bootstrap 3
4. Flat UI

### Images

1. IconsDB