Статья размещена автором Бетке Сергей Сергеевич

Добавим online чат на сайт, или p3chat plugin для wordpress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавим online чат на сайт, или p3chat plugin для wordpressДля моей задачи необходимо предоставить возможность посетителям оставить 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.

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

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

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

Заключение

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

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

Отзывы » (8)

  1. Сегодня имел удовольствие общаться с Павлом Бондарем (Pavel Bondar, я надеюсь, я правильно применил транслитерацию). Обратился за помощью через чат на сайте p3chat. Заодно обсудили несколько предложений по развитию сервиса, их с согласия Павла и публикую:

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

    Кстати, пока Вы смотрите, озвучу пару предложений. Было бы здорово поддержать для авторизации на Вашем сервисе openid и предоставить API, с помощью которого можно было бы из плагина (типа того, что я написал) получить user id (uid), чтобы не заставлять рядового блоггера «ходить на сайт».

    Pavel Bondar: отличная статья, супер! Про openid: google и т.д добавим

    Спасибо за столь высокую оценку :-)
    В идеале, конечно, было бы так: через API плагин регистрирует новую учётку на Вашем сервисе (с помощью openid провайдера, интегрированного в блог), и дальше создаёт оператора и всё необходимое.
    Было бы такое API — было бы очень удобно. Я бы под него плагин написал для wordpress :-)

    Pavel Bondar: Очень интересно

    Речь шла не о google id, а в целом о произвольном openid. например — http://sergey-s-betke.blogs.novgaro.ru — тоже OpenID провайдер (даже работает, проверял).

    Pavel Bondar: вопрос по поводу апи и плагина. Вы хотите интеграцию какого уровня сделать? Заменить плагином всю админку?

    [не хватает, конечно, анимации того, что собеседник набирает текст]. Не обязательно.

    Pavel Bondar: Тогда что будет уметь делать плагин?

    Базовые функции для рядового блоггера, то бишь настройка на тарифе Free (настройка одного оператора, его jabber или других IM, отдела, оффлайн сообщений и e-mail под них, по умолчанию — всё на администратора блога и его координаты)

    Можно, безусловно, и всю админку «вставить». Кстати — можно и не усложнять всё сильно. Если у Вас будет раздел, который можно будет «разместить» в iframe в админке плагина — будет удобно.

    Pavel Bondar: Да, усложнять не нужно. Регистрация тоже через плагин?

    Самое важное, что желательно получить через API — userid (UID). Да, регистрацию я представляю следующим образом: на wordpress интегрируем openid провайдер, плагин пытается зарегистрироваться / авторизоваться на Вашем сервисе, указывая url блога в качестве OpenID. В таком варианте openid провайдер «отдаст» контактную информацию администратора блога, что и нужно. А дальше уже обычный механизм авторизации через openid (то есть openid consumer на Вашем сервисе авторизации), через который Вы получите e-mail, имя и т.д.

    Pavel Bondar: Понятно.

    Тогда всё максимально просто, и плагинов появится под Ваш сервис масса, я уверен. [только главное не забыть про iframe вариант админки для "тонкой" настройки сервиса, он должен быть "уже", чтобы влезать в админку wordpress и других CMS].

    Pavel Bondar: Очень интересно. Всего хорошего, напишу вам и ссылку вставлю

    .

    Pavel Bondar: Я сегодня новый билд выкачу. Будут пофикшены такие вещи как: «В бесплатной редакции “выключив” оператора Вы не сможете “включить” его обратно очевидным путём. Но решение есть: смените язык для “выключенного” оператора, а потом верните его обратно, и, о чудо, оператор будет “включен”»

    Ещё бы кнопочку добавить — скопировать историю разговора в буфер обмена…

    Pavel Bondar: Можно

    Такой вот у нас состоялся приятный диалог. Есть надежда, что в обозримом будущем смогу порадовать Вас плагином, который поможет Вам провести всю настройку сервиса через консоль wordpress.

  2. Вчера получил уведомление от авторов сервиса:

    Сергей, добрый день.
    Пофиксили мы эту проблему:
    «Будьте осторожны! В бесплатной редакции “выключив” оператора Вы не сможете “включить” его обратно очевидным путём. Но решение есть: смените язык для “выключенного” оператора, а потом верните его обратно, и, о чудо, оператор будет “включен”»

    Можете отметить это в блоге. Перехожу к интеграции с openID, отпишусь как что-то будет готово.

    С уважением,
    Павел Бондарь

    Сейчас поправлю информацию в статье.

  3. [...] Настало время опубликовать наш плагин в репозитории WordPress. Сделаем! P.S. Так уж получилось, что описывать процедуру публикации плагина я буду на примере p3chat, написанного мною недавно. [...]

  4. Наконец-то опубликовал плагин в репозитории wordpress. Он здесь: http://wordpress.org/extend/plugins/p3chat/. Мучения, связанные с публикацией, описал здесь.

  5. Если обратите внимание на сайт, на котором я установил чат, то увидите, что кнопка по вертикали не центруется, что плохо. На другом проекте — reformal.ru нашёл красивое решение этой проблемы:

    <div class="frgtd" style="width:auto; z-index:5; position: fixed; height:100%: top:0; right:0;">
    	<table height="100%"><tbody><tr><td valign="middle">
    		<img style="padding:0;"/>
    	</td></tr></tbody></table>
    </div>
    

    Естественно, style прописан в css, я вставил просто его в html для наглядности. В таком варианте всё замечательно центруется.
    P.S. Правда, в «родном» css на reformal.ru косяк имеется — жёстко задана width для внешнего div, в результате чего кнопка обрезается по ширине. и padding не сбрасывается в 0. Пришлось переопределять самому.
    Предложение разработчикам p3chat написал, будем ждать реакции.

Опубликовать комментарий

XHTML: Вы можете использовать следующие HTML теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Tags Связь с комментариями статьи:
RSS комментарии
Обратная ссылка