Як встановити чат на сайт?

  1. Чат на сайт, що це таке?
  2. Що повинен вміти чат?
  3. Безпечно чи безкоштовно?
  4. Як запустити чат для сайту?
  5. Приклади, приклади

1. Чат на сайт, що це таке?


Чат-підтримка на сайт

Зворотній зв'язок з відвідувачами сайту і можливість поспілкуватися з клієнтами — важлива частина бізнесу.

Клієнт продивляється сайт компанії, шукає інформацію про необхідний товар чи послугу,і, не покидаючи сторінку, може поговорити з оператором, щоб з'ясувати важливі для себе деталі. Як з консультантом в реальному магазині.

Але майже всі чати для сайтів — це сторонні сервіси з платними і безплатними функціями. Потрібно додавати віджет до CMS або просто вставити спеціальній HTML код на WEB-сторінку, щоб чат запрацював на сайті.

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

Ми підходимо до справи серйозно, і вважаємо, що переписка між вашими співробітниками і клієнтами надто важлива, щоб так легко довіряти її третій стороні.


2. Що повинен вміти чат?


Необхідний мінімум, три важливі речі:

  • Відправляти текстові повідомлення. Важливо, щоб система пам'ятала людину і показала історію повідомлень, якщо вона буде спілкуватися з оператором вдруге чи втретє.
  • Робити голосові та відео дзвінки з сайту. Без встановлення плагінів або Flash (браузери поступово відмовились від нього). Ідеально підходить WebRTC, цю технологію підтримуюсь усі сучасні браузери.
  • Відправляти зображення та документи. Дуже добре, якщо є можливість скріншоти екрана (PrintScreen, Ctrl+V).

3. Безпечно чи безкоштовно?


І те, й інше. Як не дивно, але такий продукт існує. Це корпоративний месенджер MyChat. В мінімальній безплатній версії на 20 онлайн-підключень можна легко запустити чат для сайту.

З дзвінками, передачею файлів, збереженням історії повідомлень і необмеженою кількістю операторів. З програмами під Windows/Linux/macOS/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: увімкнено шифрування, домен третього рівня lviv.mycompany.com, UIN — 7 та свій дизайн кнопки:

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

Ось і вся магія.


Якщо у вас залишились питання — чекаємо на форумі підтримки MyChat.

Служба поддержки