Чат-віджет на ваш сайт

Це той маленький круглий значок у нижньому правому куті сайту, через який клієнт натискає і починає чат. Технічно — це один <script>-тег на ваш HTML. На все про все — 30 секунд встановити, ще 5 хвилин причесати під вигляд сайту.

Вставити на сайт

У робочому столі: Налаштування → Віджет на сайті. Унизу сторінки знайдете блок «Код для вставки». Виглядає так:

<!-- TaskSkill chat widget -->
<script>
  window.TaskSkill = window.TaskSkill || function(){
    (window.TaskSkill.q = window.TaskSkill.q || []).push(arguments)
  };
</script>
<script async src="https://widget.taskskill.in.ua/widget.js"
  data-tenant="ваш-ідентифікатор"
  data-api="https://api.taskskill.in.ua"
  data-kb="https://kb.taskskill.in.ua"></script>

Скопіюйте і вставте перед закриваючим тегом </body> у HTML вашого сайту. Перший <script> створює маленький буфер — він дозволяє вам викликати TaskSkill(...) з JavaScript ще до того, як основний бандл завантажився. Другий завантажує сам віджет асинхронно. На WordPress — додайте через тему або плагін типу WPCode; на Tilda — поле «HTML-код перед </body>»; інші конструктори — шукайте «Custom HTML» або «Footer code».

Через 30 секунд після збереження ви побачите значок чату на сайті. Якщо ні — перевірте, що скрипт реально дійшов до браузера (відкрити DevTools → Network → знайти widget.js).

JavaScript API

Маленький буфер у першому <script> — це не косметика. Він дає вам можливість керувати чатом програмно з вашого сайту: відкривати з натиску власної кнопки, передавати дані залогованого клієнта, реагувати на події. Виклики, зроблені до повного завантаження, вишикуються у чергу і виконаються одразу як віджет буде готовий.

Керування станом

TaskSkill('open');     // відкрити чат
TaskSkill('close');    // згорнути
TaskSkill('toggle');   // перемкнути open/close
TaskSkill('show');     // показати значок (після hide)
TaskSkill('hide');     // приховати значок повністю
TaskSkill('destroy');  // повне знищення (для SPA при logout)

Типовий приклад: ваша власна кнопка «Зв'язатися» на сторінці, що відкриває чат:

<button onclick="TaskSkill('open')">Поговорити з менеджером</button>

Ідентифікація клієнта

Якщо клієнт залогінений на вашому сайті, передайте його дані — оператор побачить їх одразу, без зайвих питань:

TaskSkill('identify', {
  name: 'Іван Петренко',
  email: 'ivan@example.com',
  phone: '+380501234567',
  custom: {
    plan: 'pro',
    user_id: '12345'
  }
});

Поля name / email / phone заповнять pre-chat-форму (клієнт не побачить її, якщо всі обов'язкові поля передані). Об'єкт custom — будь-які додаткові дані, що з'являться у профілі клієнта в оператора (план підписки, ID користувача, мова, регіон).

Події

Реагуйте на дії клієнта у чаті:

TaskSkill('on', 'ready', function () {
  console.log('Віджет завантажений і готовий');
});

TaskSkill('on', 'chat:opened', function () {
  // напр., відправити подію у Google Analytics
  gtag('event', 'support_chat_opened');
});

TaskSkill('on', 'message:sent', function (detail) {
  console.log('Користувач надіслав:', detail.text);
});

Доступні події: ready (одразу після ініціалізації), chat:opened, chat:closed, message:sent (detail: {id, text, attachments}), message:received (detail: {id, body, sender_type}).

Відписатися — той самий API з off:

function myHandler() { /* ... */ }
TaskSkill('on', 'chat:opened', myHandler);
// ...пізніше
TaskSkill('off', 'chat:opened', myHandler);

Альтернативний формат — токен замість slug

Якщо ви мігруєте з іншого helpdesk-у (Tawk, JediDesk тощо) і звикли до embed-коду виду token: "31484a4a..." — TaskSkill це теж підтримує. Той самий tenant можна записати у hex-форматі, і backend автоматично розкодує:

<!-- Звичайний slug -->
<script async src="https://widget.taskskill.in.ua/widget.js"
  data-tenant="acme"
  data-api="https://api.taskskill.in.ua"
  data-kb="https://kb.taskskill.in.ua"></script>

<!-- Той самий tenant, hex-формат -->
<script async src="https://widget.taskskill.in.ua/widget.js"
  data-tenant="61636d65"
  data-api="https://api.taskskill.in.ua"
  data-kb="https://kb.taskskill.in.ua"></script>

Обидва варіанти приведуть до одного тенанта. У Налаштування → Віджет на сайті блок «Альтернативний формат» дає готовий hex-варіант з кнопкою копіювання — не треба нічого кодувати вручну.

Це не security, а лише косметика — будь-хто з елементарними інструментами розкодує hex назад у slug. Перевага у тому, що embed-код не «видає» внутрішнє ім'я компанії на сторінці клієнта і виглядає більш технологічно. Якщо для вашого випадку це важливо — використовуйте; якщо ні — звичайний slug простіший для діагностики.

Що змінювати у налаштуваннях

Сама вставка — це лише початок. У Налаштування → Віджет є 7 секцій. Усе з лайв-прев'ю праворуч — змінюєте, відразу бачите.

Старт

Текст вітання («Привіт! Чим допоможемо?»), час до автоматичного розгортання чату (можна 0 — не розгортати, нехай клієнт сам клікне), позиція значка (праворуч/ліворуч), колір значка. Для більшості компаній варто залишити правий низ і колір вашого бренду.

Повідомлення

Тут визначаєте, чи питати ім'я / телефон / тему до початку розмови. Не вмикайте всі три одразу — це форма у три поля, яку клієнти ненавидять. Зазвичай досить імені (якщо ви не плануєте перетелефоновувати) або імені + телефону (якщо плануєте).

Діалог

Скільки часу тримати історію розмови (за замовчуванням 7 днів), показувати чи ні «у мережі XX операторів», коли почати pre-chat-форму. Зачастую дефолти підходять.

Зовнішній вигляд

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

Тарифи PRO+

Custom CSS — для тих, хто хоче поправити вигляд тонко. Прибрати бренд-плашку «На TaskSkill». На стартовому тарифі цих опцій нема.

Тестування перед публікою

Не публікуйте відразу на головну сторінку. Я зазвичай раджу так:

1. Вставити віджет на тестову сторінку (не індексовану), напр. вашсайт.com/test-chat.
2. Відкрити її з іншого пристрою (телефон, режим інкогніто) — як клієнт.
3. Натиснути значок, написати «тест». Перевірити, що тікет з'явився в інбоксі.
4. Відповісти з інбоксу — і подивитись, що ваш «клієнт» отримав відповідь.
5. Закрити браузер, повернутися через 10 хв — переписка має зберегтися.
6. Тільки після всього цього — публікувати на основні сторінки.

Часті проблеми

Значок не з'являється

У 90% випадків — <script> не дійшов або заблокований. Перевірте: чи скрипт є в HTML (View Source — там має бути), чи не блокує AdBlock на тестовому пристрої, чи не Mixed Content (http-сайт намагається підвантажити https-скрипт через якісь dev-настройки).

Значок є, але натиснення нічого не робить

Зазвичай — CORS або CSP. У DevTools → Console побачите помилку. Якщо ваш сайт має жорстку Content-Security-Policy — додайте https://widget.taskskill.in.ua у script-src, а https://api.taskskill.in.ua і wss://api.taskskill.in.ua — у connect-src.

Переписка не зберігається між сесіями

Перевірте, що cookies дозволені на сайті. Без них клієнт виглядає для системи як новий при кожному відкритті — і отримує чисту розмову.