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

22.12.2017
  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), цей пункт буде тільки у користувачів з адміністративними правами:

Доступ до MyChat Server

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

TCP порти MyChat Server

тепер ми знаємо порт, по якому будемо підключати відвідувачів сайту до чату, запам'ятаємо його.

Скористуємось вбудованим механізмом для генерації HTML коду чата. Відкриваємо розділ адмінки ”Інструменти” -> ”Web-підтримка на сайт”:

Налаштуування кнопки для сайту

Коли треба щось змінити (додати користувача, переглянути налаштування, змінити розташування) — достатньо зробити це в адмінці. Код на сайті залишається незмінним.

Створюємо локальну групу для веб-підтримки і додаємо туди операторів чату. З ними будуть спілкуватись відвідувачі сайту.

В списку користувачів зліва виділіть декілька користувачів або групу. Скопіюйте код і вставте його в сторінку на своєму сайті.

Приклад коду кнопки:

<!--== MyChat Web Support ==-->
<script type="text/javascript">
    window.__setMyChatOption = function (opt) {
        try {
            window.mc_uho_opt = Object.prototype.toString.call( opt ) === '[object Object]' ? opt : JSON.parse(opt);
            var run   = document.createElement("script");
            run.type  = "text/javascript";
            run.async = true;
            run.src   = "https://mychat-server.com/chat/uho/supportUho.js";
            var s     = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(run, s);
        } catch (e) {
            console.warn(e.message);
        }
    }
</script>
<script src="https://mychat-server.com/getSupportOptions.js" async type="text/javascript"></script>

Отже, у нас є готовий код HTML для вставки на сайт. Відкриваємо в менеджері сайта файл index.html і перед закриваючим тегом </body> додаємо код кнопки.

Таким чином, у вас з'явиться "наскрізна" кнопка, яка буде відображатись на всіх сторінках сайту. Якщо кнопка потрібна на якихось конкретних сторінках, розмістіть код тільки в потрібних місцях.


5. Для досвідчених користувачів

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

Заради простоти для серверів чату з одним сайтом і простим списком операторів ми зробили статичний код для сайту, щоби можна було побачити зміни у чаті веб-підтримки, просто натиснувши на щось у адмінці.

Проте, можливість налаштування нікуди не зникла, вона просто була прибрана з поля зорую

Опис параметрів чату:

text  — текст кнопки для відкриття чату (вушко);
position  — розташування "вушка" (від 1 (праворуч, зверху) і до 12, за годинниковою стрілкою);
_type — тип вибору користувачів, true - для груп і false - для конкретних операторів;
uin — UIN з ким буде відкритий чат або список UIN-ів, може мати вигляд: [1,2,3] або "1,2,3", для чату буде обраний один, випадковим чином;
group — ID групи операторів;
height — висота вікна чату (при відкритті в окремому вікні);
width — ширина вікна чату (при відкритті в окремому вікні);
btnID — список id-кнопок або інших HTML елементів, детальний опис буде нижче;
select — чи потрібно показувати вибір операторів перед початком чату: true / false (так / ні);
inFrame — показувати чат не в окремому вікні, а в середині сторінки (у фреймі): true / false (так / ні);
custom — довільний текстовий рядок, передається оператору без змін у полі поле Reflink;
url — адреса сервера чату (протокол HTTPS або HTTP в адресі вказувати не можна);
fields — поля, які повинен заповнити користувач при першому вході в чат, текстовий рядок: "email, name" або "name", або "email", або "" — нічого.

Параметр "btnID" може містити список id HTML елементів, при натисканні на яке буде відкрито чат з певним оператором, також в атрибутах цього елемента потрібно вказати UIN, з ким відкрити чат (uin = "3"), наприклад:

<div id="mcGifer" uin="3" style="cursor:pointer;">
    <img src="/img/Live_Chat.png" onmouseout="this.src='/img/Live_Chat.png';" onmouseover="this.src='/img/Live_Chat_2.png';">
</div>

Цей код відображає картинку з текстом "Відкрити вікно чату":

MyChat support button

І приклад скрипта:

<!--== MyChat Web Support ==-->
<script type="text/javascript">
    window.__setMyChatOption = function (opt) {
        try {
            window.mc_uho_opt = Object.prototype.toString.call( opt ) === '[object Object]' ? opt : JSON.parse(opt);
 
            window.mc_uho_opt.btnID = ["mcGifer", "mcHobit", "mcGlubber", "mcHelen"];
 
            var run   = document.createElement("script");
            run.type  = "text/javascript";
            run.async = true;
            run.src   = "https://mychat-server.com/chat/uho/supportUho.js";
            var s     = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(run, s);
        } catch (e) {
            console.warn(e.message);
        }
    }
</script>
<script src="https://mychat-server.com/getSupportOptions.js" async type="text/javascript"></script>

У рядку window.mc_uho_opt.btnID = ["mcGifer", "mcHobit", "mcGlubber", "mcHelen"]; вказані id усіх кнопок для відкриття чату.

Аналогічно цьому параметру в window.mc_uho_opt можна вказати будь-яке з вище перечислених полів, наприклад:

window.mc_uho_opt.position = 2; // кнопка чату справа в центрі
window.mc_uho_opt._type = true; // користувачі групи 1
window.mc_uho_opt.group = 1; // номер групи 1
window.mc_uho_opt.select = true; // показати вибір операторів, при першому підключенні
window.mc_uho_opt.inFrame = true; // відобразити чат в середині вікна, у фреймі
window.mc_uho_opt.fields = "name, email"; // вимагає від відвідувача ввести ім'я та пошту
window.mc_uho_opt.url = "192.168.10.10:8080"; // актуально, коли веб-сервер чату працює на одному порту, а ви його відкрили через портмапінг на іншому, зверніть увагу, адреса без "http (s): //"

Зазначені в скрипті поля мають пріоритет над налаштуваннями в адмінці сервера.

Таким чином можна вказувати на різних сайтах або сторінках window.mc_uho_opt.group, щоб використовувати окремі групи користувачів.

Окремо хочемо розповісти про параметр custom, його можна використовувати для додаткової ідентифікації користувачів. Наприклад, коли у вас декілька сайтів і з якоїсь причини не визначається Reflink для відвідувачів. Це поле буде додано в логіні, в полі Reflink, яке обробляється серверним скриптом "OnPrivateRequest" - "WebGuestInfo".

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


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




Завантажити MyChat
Служба поддержки