Добавим online чат на сайт, или p3chat plugin для wordpress
Продолжаем работу по сайту туристического агентства. Решил предоставить всем посетителям сайта возможность 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"> © <?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.
Отзывы » (9)
RSS комментарии
Обратная ссылка
Сегодня имел удовольствие общаться с Павлом Бондарем (Pavel Bondar, я надеюсь, я правильно применил транслитерацию). Обратился за помощью через чат на сайте p3chat. Заодно обсудили несколько предложений по развитию сервиса, их с согласия Павла и публикую:
Если интересно, посылаю Вам ссылочку на мою статью о интеграции Вашего сервиса в wordpress, накидал нечто типа плагина для этих целей, планирую в ближайшие дни выложить его в репозиторий wordpress.
Кстати, пока Вы смотрите, озвучу пару предложений. Было бы здорово поддержать для авторизации на Вашем сервисе openid и предоставить API, с помощью которого можно было бы из плагина (типа того, что я написал) получить user id (uid), чтобы не заставлять рядового блоггера «ходить на сайт».
Спасибо за столь высокую оценку
В идеале, конечно, было бы так: через API плагин регистрирует новую учётку на Вашем сервисе (с помощью openid провайдера, интегрированного в блог), и дальше создаёт оператора и всё необходимое.
Было бы такое API — было бы очень удобно. Я бы под него плагин написал для wordpress
Речь шла не о google id, а в целом о произвольном openid. например — http://sergey-s-betke.blogs.novgaro.ru — тоже OpenID провайдер (даже работает, проверял).
[не хватает, конечно, анимации того, что собеседник набирает текст]. Не обязательно.
Базовые функции для рядового блоггера, то бишь настройка на тарифе Free (настройка одного оператора, его jabber или других IM, отдела, оффлайн сообщений и e-mail под них, по умолчанию — всё на администратора блога и его координаты)
Можно, безусловно, и всю админку «вставить». Кстати — можно и не усложнять всё сильно. Если у Вас будет раздел, который можно будет «разместить» в iframe в админке плагина — будет удобно.
Самое важное, что желательно получить через API — userid (UID). Да, регистрацию я представляю следующим образом: на wordpress интегрируем openid провайдер, плагин пытается зарегистрироваться / авторизоваться на Вашем сервисе, указывая url блога в качестве OpenID. В таком варианте openid провайдер «отдаст» контактную информацию администратора блога, что и нужно. А дальше уже обычный механизм авторизации через openid (то есть openid consumer на Вашем сервисе авторизации), через который Вы получите e-mail, имя и т.д.
Тогда всё максимально просто, и плагинов появится под Ваш сервис масса, я уверен. [только главное не забыть про iframe вариант админки для "тонкой" настройки сервиса, он должен быть "уже", чтобы влезать в админку wordpress и других CMS].
.
Ещё бы кнопочку добавить — скопировать историю разговора в буфер обмена…
Такой вот у нас состоялся приятный диалог. Есть надежда, что в обозримом будущем смогу порадовать Вас плагином, который поможет Вам провести всю настройку сервиса через консоль wordpress.
Ещё один обзор нашёл IM решений для сайта: http://ish.com.ua/2009/03/online-chat-2.
Наткнулся на статью про интеграцию чата от Skype на сайт: http://21jvek.ru/2010/08/knopka-skype-na-nashem-sajte.
А ещё нашёл автономное решение для wordpress с плагином: http://olga-smirnova.ru/kak-sdelat-chat-na-sajte-wordpress/ustanovit-chat-na-sajt.
Вчера получил уведомление от авторов сервиса:
Сейчас поправлю информацию в статье.
[...] Настало время опубликовать наш плагин в репозитории WordPress. Сделаем! P.S. Так уж получилось, что описывать процедуру публикации плагина я буду на примере p3chat, написанного мною недавно. [...]
Наконец-то опубликовал плагин в репозитории wordpress. Он здесь: http://wordpress.org/extend/plugins/p3chat/. Мучения, связанные с публикацией, описал здесь.
Если обратите внимание на сайт, на котором я установил чат, то увидите, что кнопка по вертикали не центруется, что плохо. На другом проекте — reformal.ru нашёл красивое решение этой проблемы:
Естественно, style прописан в css, я вставил просто его в html для наглядности. В таком варианте всё замечательно центруется.
P.S. Правда, в «родном» css на reformal.ru косяк имеется — жёстко задана width для внешнего div, в результате чего кнопка обрезается по ширине. и padding не сбрасывается в 0. Пришлось переопределять самому.
Предложение разработчикам p3chat написал, будем ждать реакции.
тыц