Как установить чат на сайт?

25.12.2017
  1. Чат на сайт, что это такое?
  2. Что должен уметь чат?
  3. Безопасно или бесплатно?
  4. Как запустить чат для сайта?
  5. Примеры, примеры

1. Чат на сайт, что это такое?

Обратная связь с посетителями сайта и возможность пообщаться с клиентами — важная часть бизнеса. Сейчас для этого есть миллион возможностей, без преувеличений.

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

Но почти все чаты для сайтов – это сторонние сервисы с платными и бесплатными функциями. Нужно добавить виджет к CMS или просто вставить специальный HTML код на WEB-страницу, чтобы заработал чат на сайте.

Это удобно, если вопросы безопасности вас не интересуют. Используя такие сервисы, вы даёте своё согласие на то, что все сообщения клиентов и ответы операторов будут храниться на каком-то чужом сервере.

Мы подходим к делу серьёзно, и считаем, что переписка между вашими сотрудниками и клиентами слишком важна, чтобы так легко доверять её третьей стороне.


2. Что должен уметь чат?

Необходимый минимум.

Чат должен уметь делать три важные вещи:

  • Отправлять текстовые сообщения. Важно, чтобы система «помнила» человека, и показала историю сообщений, если он будет общаться с оператором во второй или в третий раз.
  • Делать голосовые и видео звонки с сайта. Без установки плагинов или Flash (браузеры планомерно отказались от него). Идеально подходит WebRTC, эту технологию поддерживают все современные браузеры.
  • Отправлять изображения и документы. Очень хорошо, если можно вставлять скриншоты экрана (PrintScreen, Ctrl+V).

3. Безопасно или бесплатно?

И то, и другое. Как ни странно, но такой продукт есть. Это корпоративный мессенджер MyChat. В минимальной бесплатной лицензии на 20 онлайн-подключений можно легко запустить чат для сайта.

Со звонками, передачей файлов, хранением истории сообщений и неограниченным количеством операторов. С приложениями под Windows/Linux/Mac OS/Android и WEB.

Скачать дистрибутив.


4. Как запустить чат для сайта?

Сначала нужно установить MyChat Server. Как это сделать, написано в официальной справке.

Необходимо иметь внешний IP адрес, чтобы к вашему серверу MyChat могли подключаться пользователи через Интернет. Если не знаете, как настроить сервер для работы в Интернете — вам сюда.

За работу веб-чата отвечает встроенный в MyChat веб-сервер, по умолчанию он работает на 80 TCP порту без использования шифрования.

Чтобы самостоятельно узнать, какой у вас порт использует веб-сервер — зайдите в веб-админку через меню MyChat Client ”Инструменты” -> ”Администрирование сервера” (CTRL+F10), этот пункт будет только у пользователей с административными правами:

Затем, уже в браузере, в админ-панели, откройте раздел ”Настройки” -> ”Web-сервисы”, там указан порт вашего веб-сервера:

Теперь мы знаем порт, по которому будем подключать посетителей сайта к чату, запомним его.

Воспользуемся встроенным механизмом для генерации HTML кода чата. Открываем раздел админки ”Инструменты” -> ”Web-поддержка на сайт”:

Создаем локальную группу для веб-поддержки и добавляем туда пользователей — операторов чата. С ними будут общаться посетители сайта.

В списке пользователей слева выделите одного или нескольких человек и нажмите кнопку ”Получить”, чтобы получить текст HTML-кода для вставки на сайт.

Пример кода кнопки:

<!--== MyChat Web Support ==-->
		<script type="text/javascript">
		(function () {
		  window.mc_uho_opt = {
			id    : "119368490_1932_6-13-6-600000000",
			text  : "Задать вопрос",
			position: "1",
			uin   : [3,30],
			url   : "mychat-server.com", 
			secure: false
		  };
		  
		  var run   = document.createElement("script");
		  run.type  = "text/javascript";
		  run.async = true;
		  run.src   = (mc_uho_opt.secure ? "https://" : "http://") + mc_uho_opt.url + "/chat/uho/supportUho.js";
		  var s     = document.getElementsByTagName("script")[0];
		  s.parentNode.insertBefore(run, s);}
		)();
		</script>

Параметры:

  • id — генерируется автоматически;
  • text — текст кнопки чата на сайте;
  • position — расположение кнопки чата на сайте:

  • uin — один или несколько идентификаторов, с кем будет открыт чат, выбор делается случайным образом;
  • url — IP адрес или доменное имя вашего сервера в Интернете (очень важно, чтобы это значение было таким же, как и в разделе админ-консоли ”Настройки” -> ”Сетевые настройки” -> ”IP адрес или Host сервера для внешних клиентов”. Если там пусто — впишите свой внешний адрес;
  • secure — используется шифрование трафика веб-сервером или нет. По умолчанию не используется, поэтому пишем ”false”.

Итак, у нас уже есть готовый код HTML для вставки на сайт. Открываем в менеджере сайта файл index.html и перед закрывающим тегом </body> добавляем код кнопки.

Таким образом, у вас появится ”сквозная” кнопка, которая будет отображаться на всех страницах сайта. Если кнопка нужна на каких-то конкретных страницах, поместите код только строго в нужных местах.


5. Примеры, примеры

Стандартный HTML-код кнопки может показаться сложным и не очень понятным.

Им можно и не пользоваться, ведь он всего лишь рисует ”ушко” с текстом, а ”под капотом” у него ссылка на ваш MyChat сервер с набором параметров. Зная их, можно делать свой дизайн и функционал кнопки для веб-чата.

Когда посетитель вашего сайта нажмет на кнопку — он перейдет по ссылке и откроет отдельное окно браузера.

Пример рабочей ссылки веб-чата на сайте разработчиков MyChat.

Формат ссылки:

HTTP(s)://YOU_SERVER_IP_OR_HOST:PORT/support/?uin=UIN

  • Протокол: HTTP используется по умолчанию, если у вас настроено шифрование — нужно писать HTTPS.
  • Адрес: YOU_SERVER_IP_OR_HOST замените на ваш внешний IP адрес или доменное имя, по которому доступен MyChat Server.
  • Порт: PORT нужно подставлять только в тех случаях, если ваш веб-сервер работает на нестандартных портах (порт 80 для протокола HTTP и 443 для HTTPS писать не нужно).
  • Идентификатор пользователя: UIN нужен обязательно, чтобы веб-чат знал, с каким именно оператором будет открыт диалог.

Пример №1: стандартный HTTP порт 80, IP адрес — 10.10.123.123 и UIN — 55:

http://10.10.123.123/support/?uin=55

Пример №2: нестандартный порт — 8080, host — mysite.org, UIN — 12 и еще включенное шифрование на веб-сервере:

https://mysite.org:8080/support/?uin=12

Как видите, после названия host-а явно через двоеточие указан порт mysite.org:8080, потому что он нестандартный.

Пример №3: включено шифрование, домен третьего уровня voronezh.mycompany.com, UIN — 7 и свой дизайн кнопки:

<a href="https://voronezh.mycompany.com/support/?uin=7" target="_blank">
		<img src="images/pretty_button.png" alt="mychat">
		</a>

Вот и вся магия.


Если у вас еще остались вопросы — ждем на форуме поддержки MyChat.


Скачать MyChat
Служба поддержки