Бетке Сергей: iT блог

Продолжаем работу по сайту туристического агентства. Решил предоставить всем посетителям сайта возможность online общения с менеджерами агентства. Решений, как выяснилось, достаточно много, приведу то, что выбрал сам.

Решение искал долго, и в репозитории плагинов wordpress, и не только. Сразу должен сказать, достойных решений масса, но в основном они платные. Есть решения в том числе и с интегрированными видео и голосовым чатом. Но мне на этом этапе нужен просто обычный текстовый чат, не более. И цель простая – удержать посетителя на сайте.

Наткнулся на обзор сервисов для организации чата на сайте. Познавательный обзор, в том числе – и видеочатов. Но на сегодняшний день мне требуется бесплатное решение, потому как экономический эффект от него я пока не готов оценить. Посему, внимательно изучив комментарии к указанной выше статье, выбрал для эксперимента сервис p3chat. О нём и его интеграции в сайт на базе wordpress и пойдёт речь.

Отмечу плюсы выбранного мною сервиса:

• доступна бесплатная редакция free (1 оператор, 1 IM канал, 1 отдел). Указанная редакция идеальна для собственных блогов, если Вы готовы отвечать на вопросы посетителей в realtime, я не готов . Но ради эксперимента для турагентства это решение меня устраивает;
• не увеличивает время загрузки страницы (до “активации” чата сценарии просто не подгружаются);
• локализация (русский интерфейс);
• кроссбраузерность;
• поддержка широкого круга IM протоколов для оператора (в моём случае – для менеджера агентства). В том числе – XMPP (jabber), ICQ, MSNP. Меня интересовал XMPP, так как, благодаря реализации почтового домена турагентства на базе сервисов Яндекса, XMPP сервисы для сотрудников в рамках домена уже реализован.

Приступим к реализации.

Регистрация на сервисе

В первую очередь, естественно, мы должны пройти процедуру регистрации на сервисе. Совершенно не обязательно указывать “координаты” менеджера, который будет отвечать посетителям, лучше Ваши собственные. Одна беда: при регистрации сервис ведёт себя некорректно при проверке e-mail адреса: он не допускает символа “.” в lname (слева от @). Это не проблема для нас, Яндекс позволяет указать псевдонимы к ящикам (алиасы), посему я и завёл псевдоним без “.” в lname. Но позднее, в разделе “Мои данные” Вы можете изменить и  e-mail (там проверка реализована правильно), и пароль.

Указал XMPP (jabber) учётную запись, реализованную на домене агентства через сервисы Яндекс.

Теперь переходим к настройке сервиса под наши нужды. Сервис предоставляет возможность общения посетителю сайта с разными отделами Вашей организации, но бесплатная версия подразумевает только один отдел. Поэтому я его и назвал по наименованию организации. Выбираем язык интерфейса (русский присутствует), изменяем приветственное сообщение (оно будет появляться в качестве первого сообщения оператора при инициализации чата посетителем). Оператор в бесплатной версии также доступен только один.

Настраиваем “оператора”

После сохранения изменений переходим к “настройке” нашего единственного оператора. Исправляем отображаемое имя оператора (мы же не хотим, чтобы к нашим посетителям обращался operator, куда лучше, когда к посетителям будет обращаться Елена). Также не забываем указать язык оператора (в нашем случае – русский).

Выбираем “кнопку” для чата на нашем сайте

Продолжаем настройку чата для нашего сайта. Выбираем кнопку, с помощью которой посетитель сможет активировать чат, и её расположение на странице – разделы “Плавающая кнопка” и “Статическая кнопка”. Как понятно из названия, плавающая кнопка будет всегда видна на странице слева, снизу, справа или сверху окна, и не будет “скроллироваться” вместе с содержимым страницы. Статическую же кнопку мы сами вольны разместить там, где нам того захочется. Например – в разделе “Контакты”, почему бы и нет?

Дизайн кнопки (то есть – картинку для неё) можно либо загрузить свою, либо указать url своей картинки для кнопки. Поиском кнопок имеет смысл озаботиться сразу, так как сервис предоставляет нам только один дизайн, и тот – англоязычный.

Завершаем настройку сервиса

Для моей задачи необходимо предоставить возможность посетителям оставить offline сообщение. Включаю опцию “Принимать offline сообщения”, корректирую e-mail адрес. В данном случае я указал адрес группы рассылки, чтобы сообщения, оставленные посетителями сайта, были доставлены всем турагентам (вдруг – наш оператор в отпуске). После изменения адреса Вам будет выслано письмо для его подтверждения, подтверждаем.

Также я хочу иметь возможность просмотреть всю историю общения посетителей и агентов, для чего включаю опцию “Сохранять всю историю сообщений” в разделе “История сообщений”.

Ну и последнее, что следует настроить – положение и размеры окна чата. Чат открывается не в popup окне (за что можно вылететь из индекса поисковых систем, да и браузеры будут задавать посетителям кучу всяких ненужных вопросов), а в AJAX окне (ну, точнее, – обычный набор HTML элементов со style=“position:absolute”). Рекомендую ширину окна для русскоязычного интерфейса установить не менее 320, иначе не всё посетитель увидит.

Интегрируем чат-сервис в наш wordpress

Интеграция, на самом деле, крайне проста – необходимо дописать предложенный Вам в разделе “HTML код виджета” код непосредственно перед закрытием тега <body> (перед </body>). Можно, безусловно, и “руками” лезть в файлы темы, но это некрасиво, да и при смены темы потребуется работу повторять. Лучше всего создать свой плагин для целей интеграции p3chat, в котором перехватить событие wp_footer, и в обработчике уже и реализовать вывод необходимого кода. Ну а для тем, в которых нет “подвала” (что, безусловно, не делает чести теме, речь ведь идёт не о дизайне, а о коде, хотя в теме, которую я использовал, эта ошибка допущена), можно воспользоваться событием wp_head. Ну что же, так и сделаем. Да, кстати, будет нелишним также в состав плагина включить и набор кнопок. Ну и следует не забыть о реализации shortcode в плагине для статических кнопок инициализации чата.

Из параметров наш плагин должен принимать только uid, все остальные параметры мы настраиваем непосредственно на сайте сервиса p3chat.

Назовём наш плагин p3chat.

Для начала исправим тему, введём поддержку “подвала”:

                <a href="<?php bloginfo('rss2_url'); ?>" title="Подпишитесь на наш RSS" class="rss"></a>
            <?php if(function_exists('post_notification_get_link')) { ?>
                <a href="<?php echo post_notification_get_link(); ?>" title="Получайте наши новости по e-mail" class="subscribe"></a>
            <?php }; ?>
                <div class="clear"></div>
        </div>
        <div id="footer">
        &copy; <?php echo date("Y");?> - <?php bloginfo('name'); ?> при поддержке <a href="http://wordpress.org/">WordPress</a>
        </div>
    </div></div>
<?php wp_footer(); ?>    
</body>
</html>

Обратите внимание на выделенную строку, её не было, а должна быть.

Теперь приведу код плагина. Архив с плагином здесь.

<?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
    }

}
?>

Текст readme.txt приводить не буду, он в архиве есть.

Как видно, ничего сложного плагин из себя не представляет. И пока он будет работать только при том условии, что тема поддерживает wp_footer.

Рабочий результант интеграции сервиса p3chat в wordpress можно посмотреть на сайте турагентства “Приятное путешествие”. Справа Вы можете видеть внешний вид страницы сайта и кнопку слева. Да, пока дизайн кнопки я не менял, поменяю в ближайшие дни. Представленная кнопка будет таковой в том случае, если оператор, которого мы указали при настройке сервиса, сейчас online. Если он offline, кнопка будет иной, либо её можно вообще не показывать (эта опция доступна в настройках сервиса).

Если посетитель сайта нажмёт на эту кнопку, он получит окно чата (слева). Оператор будет получать сообщения через тот протокол и на тот IM клиент, который ему нравится, благо сервис поддерживает множество IM протоколов (судя по всему, в его основу положен, всё-таки, XMPP со всеми его преимуществами). В моём случае – протокол XMPP (jabber), и в качестве клиента – Я.Онлайн от Яндекса. Учётная запись XMPP на нашем домене также поддерживается серверами Яндекса (через сервис “Яндекс.Почта для домена”).

Если же оператор в настоящее время offline, посетителю будет сразу предоставлен интерфейс для отправки электронного письма, а не IM сообщения (справа).

Заключение

Сервис p3chat мне понравился, и для реализации чата в блоге вообще ничего другого и не нужно, как мне кажется. Но для фирм крупнее, чем малые, потребуется либо уже платный вариант (для поддержки более, чем одного оператора), либо платные сервисы (если требуется голосовой и видео чат).

P.S. В ближайшие дни добавлю в плагин поддержку shortcode для статических кнопок активации чата, да и выложу плагин в репозиторий wordpress, после чего ссылку здесь уже дам на репозиторий, и поправлю readme файл плагина. Буду благодарен за Ваши комментарии по результатам использования плагина, сервиса p3chat, либо иного сервиса чата для сайта на wordpress.