p3chat live

Joomla Live Chat

2012-02-07T16:17:00.000-08:00

Here is screen cast about how to integrate p3chat into your Joomla CMS.

1. We have a site powered by Joomla.

2. In admin control panel we need to select Extensions->Template Manager.

3.Click on default template. Beez_20 for me.

4. Click on "Edit main page template"

5. Scroll down to "</body>" tag.

6. Copy p3chat widget code.

7. Paste it before "</body>" tag and save changes.

8. Back to site and refresh page.

9. p3chat widget button appears on page.

10. Click it and you will see chat window.

That's all. Thank you :)

Let's add an online chat to the web site, or p3chat plugin for wordpress

2011-12-12T13:18:00.000-08:00

In this article I will explain how to add an p3chat online chat solution to web sites powered by Wordpress platform.
First, let me highlight the benefits of this particular service:

both free edition (1 operator, 1 IM channel, 1 department) and commercial editions for advanced users (starting at $6/mo) are available.
the chat does not slow down page load time. Actually, the script doesn't even start loading before chat is "activated";
localization (interfaces in Russian, French, Spanish and more);
cross-browser support;
support for a wide range of IM protocols for chat operators (in my case -- for my travel agency representatives). This includes XMPP (jabber), ICQ, Yahoo.

Now let's proceed and try to implement this easy chat solution.

Register your account for the online chat service

First of all we need to register with the service. You don't have to use your customer support representative's contact info. It's best to use your own contact info, and your password, to do that.
I used my XMPP (jabber) account within our agency domain powered by Yandex services (analogue to Google Apps).

Let's go ahead and configure the service for our needs. The service allows the web site visitor to talk to different departments of your organization, but the free version only supports a single department. That's why I used my organization name as the department name. Now you can choose your user interface language (English is default) and customize the greeting message. It will be displayed as the first operator message when the visitor activates the chat. Free version also limits you to a single operator.

Configure the operator

After saving your changes, you can go ahead and configure your single operator. Set a proper operator screen name -- you don't want your visitor to talk to someone named "operator". It's far more pleasant being greeted by "Natalie". Don't forget to set the operator language (I used Russian).

Choose the chat button that will appear on your web site

Let's continue configuring the chat for our web site, and we're getting closer. Now you can configure the button that your web site visitors will see and click to activate the online chat. You can also configure the button location on the page – see "Floating button" and "Static button" sections. As you can see from the name, the floating button will be always visible on the left, right, top or bottom side of the web page, and it will not scroll when the page content is scrolled. If you use the static button, you are free to place it wherever you like. Let's say, in the "Contact Us" section.
For the button design (meaning the button image) you can either upload a custom image, or specify an existing button design URL. If your language is any other than English, you will have to worry about the button design right there as the service provides you with English design by default.

Finish configuring the service

For the purposes of my agency, I needed to allow visitors leaving offline messages. You can do the same by enabling "Accept offline messages" option and entering the contact email address. I entered the email alias address so that messages left by the web site visitors would be delivered to all travel agency representatives in case the particular operator is on vacation. After you specify the contact email address, you will receive a confirmation email and will need to confirm the email address.
If you wish to be able to review the whole history of conversations between visitors and operators, you will need to enable "Save the whole conversation history" option in the "Message history" section.
The last thing for you to configure is the chat window size and position. The online chat is not using pop up window technique. Using a pop up window could get your web site banned from search engines and would force your users to go through a bunch of browser security dialogs. Instead the chat is loaded in a safe and friendly AJAX dialog (to be precise, a regular set of HTML tags with style=“position:absolute”). If you are using Russian or other international localizations, I would recommend to set the window width to no less than 320, otherwise your visitors might not see parts of the UI labels.

Integrate the chat service into your wordpress web site

In fact, the integration is quite easy -- you just need to insert the chat widget HTML code into your web site source code right before the <body> tag closure (before </body>). Another option is to manually hack the Wordpress theme files but this is not an elegant solution, and moreover you will have to repeat this work if you choose to change your theme. The best solution is to create your own plugin for p3chat integration, where you would intercept wp_footer event, and output the necessary HTML code in the event handler. What can you do if you use a theme that doesn't have a footer? Well, first of all, be informed that your theme source code is far from best practices -- and we're talking about the footer in the theme source code, not about the footer in the theme UI design. But if your theme does not have a footer (like the one I used) your solution is to use use wp_head event. Here we go. Oh and by the way it makes sense to include the buttons into the plugin. Another good idea is to implement a shortcode for static chat activation buttons in the plugin.
The only parameter that our plugin will accept is uid. All other parameters are configured directly on the p3chat web site.
Let's call our plugin p3chat.
First, let's fix the theme and add footer support to it:

01
02
03
04
05
06
07
08
09
10
11
12
13

               <a href="<?php bloginfo('rss2_url'); ?>" title="Subscribe to our RSS" class="rss"></a>
           <?php if(function_exists('post_notification_get_link')) { ?>
               <a href="<?php echo post_notification_get_link(); ?>" title="Receive our news by email" class="subscribe"></a>
           <?php }; ?>
               <div class="clear"></div>
       </div>
       <div id="footer">
       © <?php echo date("Y");?> - <?php bloginfo('name'); ?> powered by <a href="http://wordpress.org/">WordPress</a>
       </div>
   </div></div>
<?php wp_footer(); ?>
</body>
</html>

Note the highlighted line, it was not there originally, altough it should have been there.
Below I provide the plugin source code. Plugin source code archive is here.
?

001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229

<?php
/*
Plugin Name: P3Chat
Plugin URI: http://sergey-s-betke.blogs.novgaro.ru/
Description: This plugin provides support for p3chat service (online chat, offline messages) on Your wordpress website
Version: 1.0
Author: Sergey S. Betke
Author URI: http://sergey-s-betke.blogs.novgaro.ru/
License: GPL2

Copyright 2011 Sergey S. Betke (email : sergey.s.betke@novgaro.ru)

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
*/

if (defined('ABSPATH') && defined('WPINC')) {

   global $wp_version;
   if ( version_compare($wp_version, "3.0", "<") || version_compare(phpversion(), "5.0.0", "<") ) {
       $pluginError = sprintf(__('P3chat plugin requires WordPress %1$s and PHP %2$s or newer. <a href="http://codex.wordpress.org/Upgrading_WordPress">Please update!</a>'), "3.0", "5.0.0");
       exit ($pluginError);
   };

   register_activation_hook ( __FILE__, array('p3chat', 'activation'     ));
   register_deactivation_hook ( __FILE__, array('p3chat', 'deactivation' ));
   register_uninstall_hook ( __FILE__, array('p3chat', 'uninstall'      ));

   add_action('plugins_loaded', array('p3chat', 'plugins_loaded'));

};

class p3chat {

   private static $_name;
   private static $_namespace = __CLASS__;
   private static $_folder;
   private static $_domain;
   private static $_path;
   private static $options;

   public static function activation() {
   }

   public static function deactivation() {
       unregister_setting(
           self::$_namespace,
           self::$_namespace . '_options',
           array(__CLASS__, 'validate_options')
       );
   }

   public static function uninstall() {
       delete_option(self::$_namespace . '_options');
   }

   public static function plugins_loaded() {
       self::$_folder = dirname(plugin_basename(__FILE__));
       self::$_domain = self::$_folder;
       self::$_path = WP_PLUGIN_DIR . '/' . self::$_folder . '/';

       add_action('init', array(__CLASS__, 'init'));
   }

   public static function init() {
       self::$options = self::validate_options(get_option(self::$_namespace . '_options'));
       load_plugin_textdomain(self::$_domain, false, self::$_folder . '/languages/');
       self::$_name = __('P3Chat', self::$_domain);

       add_action('admin_init', array(__CLASS__, 'admin_init'     ));
       add_action('admin_menu', array(__CLASS__, 'admin_menu'     ));
       if (self::$options['code_location'] == 'footer') {
           add_action('wp_footer', array(__CLASS__, 'insert_widget_code'));
       } else {
           add_action('wp_head', array(__CLASS__, 'insert_widget_code'));
       };
   }

   public static function validate_options($options) {
       if (!is_array($options)) {
           $options = array();
       };

       if ($options['code_location'] != 'head')
           $options['code_location'] = 'footer';

       return $options;
   }

   public static function admin_init() {
       register_setting(
           self::$_namespace,
           self::$_namespace . '_options',
           array(__CLASS__, 'validate_options')
       );

       add_settings_section(
           self::$_namespace . '_main_options',
           __('Main Settings', self::$_domain),
           array(__CLASS__, 'option_section_main'),
           self::$_namespace . '_options_page'
       );
       add_settings_field(
           self::$_namespace . '_options[UID]',
           __('p3chat UID', self::$_domain),
           array(__CLASS__, 'option_control_UID'),
           self::$_namespace . '_options_page',
           self::$_namespace . '_main_options'
       );

       add_settings_section(
           self::$_namespace . '_extra_options',
           __('Extra settings', self::$_domain),
           array(__CLASS__, 'option_section_extra'),
           self::$_namespace . '_options_page'
       );
       add_settings_field(
           self::$_namespace . '_options[code_location]',
           __('Code in the head', self::$_domain),
           array(__CLASS__, 'option_control_code_location'),
           self::$_namespace . '_options_page',
           self::$_namespace . '_extra_options'
       );
   }

   public static function option_section_main () {
     ?>
        <p>
           <?php _e('You must obtain UID from <a href="http://p3chat.com/signup">p3chat website</a> and set it in the UID field. Other options You must set on the p3chat site.', self::$_domain); ?>
        </p>
     <?php
   }

   public static function option_control_UID() {
     ?>
           <input
               name="<?php echo self::$_namespace . '_options[UID]' ?>"
               type="text"
               maxlength="16"
               style="width: 100%"
               value="<?php echo self::$options['UID']; ?>"
           />
           <br/><?php _e('Your UID.', self::$_domain); ?>
     <?php
   }

   public static function option_section_extra () {
     ?>
        <p><?php _e('Additional settings for p3chat plugin.' , self::$_domain); ?></p>
     <?php
   }

   public static function option_control_code_location() {
   ?>
      <div>
           <label>
               <input
                   type="radio"
                   name="<?php echo self::$_namespace . '_options[code_location]' ?>"
                   value="head"
               <?php if (self::$options['code_location'] == 'head') { ?>
                   checked="checked"
               <?php } ?>
               />
               <?php _e('At the begin of pages (wp_head), when wp_footer isn`t used in the theme.', self::$_domain) ?>
           </label>
      </div>
      <div>
           <label>
               <input
                   type="radio"
                   name="<?php echo self::$_namespace . '_options[code_location]' ?>"
                   value="footer"
               <?php if (self::$options['code_location'] != 'head') { ?>
                   checked="checked"
               <?php } ?>
               />
               <?php _e('At the end of pages (wp_footer), by default.', self::$_domain) ?>
           </label>
      </div>
   <?php
   }

   public static function admin_menu() {
       add_options_page(
           __('P3Chat options', self::$_domain)
           , self::$_name
           , 'manage_options'
           , self::$_namespace . '_options_page'
           , array(__CLASS__, 'options_page')
       );
   }

   public static function options_page() {
       ?>
       <div class="wrap">
           <?php screen_icon('options-general'); ?>
           <h2><?php _e('P3Chat options', self::$_domain) ?></h2>
           <form method="post" action="options.php">
               <?php
                   settings_fields(self::$_namespace);
                   do_settings_sections(self::$_namespace . '_options_page');
               ?>
               <p class="submit">
               <input name="Submit" type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
               </p>
           </form>
       </div>
       <?php
   }

   public static function insert_widget_code() {
       ?><script type="text/javascript" src="http://p3chat.com/widget/uid/<?php echo self::$options['UID']; ?>"></script>
<?php
   }

}
?>

I will not paste the readme.txt content here, you can find it in the archive .
As you can see, this plugin is not something very sophisticated. Note that at this point, it will only work provided the theme supports wp_footer.

You can take a look at the live implementation p3chat + wordpress integration if you visit the "Enjoyable voyage" “travel agency web site”. At this screenshot you can see how the web site looks like, and the chat activation button on the left. Yeah I haven't changed the button design yet but I'm going to do that in the coming days. The button you can see at this picture will look this way in case the operator is currently online. If the operator is offline, the button change it look and feel to "offline mode" or can be hidden altogether. You can configure this in the p3chat service settings.

New feature for business

2011-10-19T01:09:00.000-07:00

We’ve just completed an enhancement asked enormous number of times. It is automatic chat initiation based on user behavior. No more passive waiting for user to click that chat button and no more risk of never getting a chance to catch her up! Now you’re well-armed to turn every visitor into new customer.

We call this feature Rules and it means that chat window is opened automatically as soon as user behavior conforms to certain rules configured.

There are 3 types of rules:

Time on site

Pages/visits

URL destination

(In a sense, it is similar to Google Analytics’ Goals.)
Time on site
— for this simplest type, you configure the total time spent on site (say, 1 minute) and chat will be opened after that time to let user see there’s someone to help. It doesn’t matter how many pages a visitor will navigate during that period — this is total time as name suggests.

Pages/visits
— lets you catch up visitors demonstrated strong interest. E.g., after configuring 5 pages you’ll get the user invited to chat after she navigated to the 5th page of your site. Note: additionally there can be configured a small timeout of, say, 15 sec before chat is opened upon page load; it can help not insult user immediately after landing new page and get comfortable with it first (psychology, you know).

URL destination
— it is used to open chat when user is on specific page address of your site, e.g. on payment page or exclusive offer materials. Page URL can be configured as Exact Match, Head Match or Regexp (sounds familiar, isn’t it?).

Moreover, all rules can be equipped with a special welcome message that visitor will see when the rule is fired. And, of course, Message history section was enhanced to let you see the performance of your rules.

p3chat quick setup video (UPDATED)

2011-08-04T13:44:00.001-07:00

p3chat quick setup instruction

2011-07-26T14:55:00.000-07:00

Register your account for p3chat online chat service

First of all you need to register witht he service. You don’t have to use your customer support representative’s contact info. It’s best to use your own contact info, and your password, to do that.

We recommend using XMPP (jabber) accounts as the most stable and reliable to date.

Let’s go ahead and configure the service for your needs. The service allows the web site visitor to talk to different departments of your organization (free version only supports a single department). It is a good idea to use your organization name as the department name. Now you can choose your user interface language (English is default) and customize the greeting message. It will be the first operator message visitor receives from operator after opening the chat. Free version also limits you to a single operator.

Configure the operator

After saving your changes, you can go ahead and configure your operator(s). Set a proper operator screen name — you probably don’t want your visitor to talk to someone named “operator”. It’s far more pleasant being greeted by “Natalie”. Don’t forget to set the operator language.

Choose the chat button that will appear on your web site

Let’s continue configuring the chat for our web site, and we’re getting closer. Now you can configure the button that your web site visitors will see and click to open the online chat. You can also configure the button location on the page – see “Float button” and “Inline button” sections. As you can see from the name, the floating button will be always visible on the side of the web page (it can be either left, right, top or bottom side), and it will not scroll when the page content is scrolled. If you use the inline button, you are free to place it wherever you like. Let’s say, in the “Contact Us” section of your web site.

For the button design (meaning the button image) you can either upload a custom image, or specify an existing button design URL. The default button design is in English. If your language is any other than English, you will have to worry about creating the button design that matches your language of choice.

Finish configuring the service

Normally you’d want to allow visitors leaving offline messages. You can do this by checking “Enable offline messages” option and entering the contact email address. After you specify the contact email address, you will receive a confirmation email and will need to confirm the email address.

If you wish to be able to review the whole history of conversations between visitors and operators, you will need to enable “Store all message history” option in the “History Settings” section.

The last thing for you to configure is the chat window size and position. The online chat is not using the pop up window technique by default. Using a pop up window could get your web site banned from search engines and would force your users to go through a bunch of browser security dialogs. Instead the chat is loaded in a safe and friendly AJAX dialog. As for the width, some international localizations are better viewed with window width of 320 or more, otherwise your visitors might not see parts of the UI labels.

Integrate the chat service into your web site

In fact, the integration is quite easy — you just need to insert the chat widget HTML code into your web site source code. Please follow the following simple rules:

1. Copy script from “Widget HTML Code” and “Inline button” sections. Make sure it looks exactly the same to avoid typing errors.

2. Paste it at the bottom your web page source code, right before the <body> tag closure (before </body>). In case if you have any other scripts with the same recommendation (say, Google Analytics) just put P3chat’s widget source code above of them.

Just released!

2011-06-29T15:54:00.000-07:00

No more Beta label on the main page which means we're in release. Fixed many bugs and added features you've asked, we are proud to announce this now. Please check out our pricing and enjoy more operators/departments/channels for a very affordable (we believe) fee. Extended support is included in all paying accounts!

Few more languages

2011-06-29T15:50:00.000-07:00

By courtesy of contributors we've got new widget languages: Spanish and Galician (by Ramón J González), German (by Christian Marquart) and Persian (by Hamid Zaeri). Thanks to you guys for your valuable work!

New languages

2011-04-27T12:22:00.000-07:00

We added French and Ukrainian widget translations by courtesy of contributors heuzef.com and kudest.com respectively. Thanks for great work!

Load button from URL

2011-04-27T12:18:00.000-07:00

Up until now, button customization form let you upload images to store them on our servers. Now it additionally supports a 3rd-party image URLs that will be loaded directly from your pages. This may further improve performance!

Clear History

2011-04-27T12:07:00.000-07:00

More control and privacy for free! Added ability to delete message history both on client and on server. Now visitors can feel more control of what is saved in their browser. Operators can be sure no unwanted pair of yes can ever see their confidential conversation.

MSN protocol

2011-03-09T00:14:00.001-08:00

We add full Microsoft MSN protocol support as of today. Users of MSN Messenger or Windows Live Messenger can talk to their visitors through p3chat now. Create new operator and put your Live ID to start using the feature.

Away/DND status

2011-03-09T00:10:00.000-08:00

Introduced support of Away and DND status familiar to most IM users. Messages will not be delivered to operators whose status is set to DND/Away. Also fixed annoying secondary authorization request experienced by ICQ users during channel adding.

Faster loading

2011-02-20T13:56:00.000-08:00

In our ongoing effort to bring the best user experience we improved performance of widget loading. The button appears much smoother now and scripts are not loaded at all until really needed. Lazy loading in action!

Operator commands

2011-02-20T13:31:00.000-08:00

Introduced new ability for operators to manage conversations with commands typed directly into IM clients. Try !help (or !h) in your messenger and follow the guidance.

Launched new site design

2011-02-06T10:00:00.000-08:00

About p3chat

2011-01-30T10:14:00.000-08:00

p3chat features:

-AJAX web interface

-Supporting Google Talk / Jabber, MSN, ICQ...

-Takes 1 minute to set up

-Supporting Firefox, Chrome, IE, Opera...

-Won't slow down your web site

-Supporting English, Russian and more languages

-Based on strict web standards: HTM5, XMPP, etc.

p3chat site