Відображення віджета чату на вашому сайті

Розширені параметри відображення
Написано Марина
Оновлено 2 місяці тому

Вирішуйте, коли відображати чат HelpCrunch

За замовчуванням віджет чату HelpCrunch з’являється на вашій сторінці після ініціалізації через метод showChatWidget у JS-коді вашого віджета:

HelpCrunch('showChatWidget');

Ви можете змінити це, вирізавши цю частину коду та відобразивши віджет одразу після будь-якої обраної вами події (наприклад, після натискання кнопки).

Також ви можете приховати віджет, викликавши метод hideChatWidget:

HelpCrunch('hideChatWidget');

Примусово відкривайте/закривайте чат після спеціальної події

Якщо ви хочете відкрити або приховати чат HelpCrunch на вашій сторінці після будь-якої потрібної саме вам події, просто викличте методи openChat / closeChat, коли ваша подія запускається:

HelpCrunch('openChat');
HelpCrunch('closeChat');

Як створити власний віджет чату

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

Скопіюйте код API (див. інтеграцію).

Додайте до виключень виклик showChatWidget зі скопійованого коду API:

HelpCrunch('showChatWidget');

Після завантаження пакета SDK скористайтеся подією onReady, щоб показувати свій власний віджет:

HelpCrunch('onReady', function() {
  // Show your widget
});

Щоб відкрити чат, використовуйте openChat:

HelpCrunch('openChat');

Якщо вам потрібно змінити вигляд віджета залежно від того, відкритий чи закритий ваш чат, скористайтеся подіями onChatOpen і onChatClose:

HelpCrunch('onChatOpen', function() {});
HelpCrunch('onChatClose', function() {});

Щоб відобразити кількість непрочитаних повідомлень, використовуйте подію onNewUnreadChat:

HelpCrunch('onNewUnreadChat', function(event) {
  // event.unreadMessages
});

Приклад: відкрити чат за натисканням на кнопку або посилання

Якщо ви не хочете відображати віджет на всіх сторінках свого сайту/продукту за замовчуванням, але все одно бажаєте відкривати чат, якщо відвідувач/користувач натисне кнопку "Зв’язатися з нами", виконайте наступне:

1. Видаліть HelpCrunch('showChatWidget'); з коду JS віджета чату HelpCrunch. Це зробить чат прихованим за умовчанням.

2. Щоб показувати чат після натискання кнопки/посилання, додайте цей JS-код на свій сайт:

HelpCrunch('onReady', function() {
  document.getElementById('contact-us').onclick = function() {
    HelpCrunch('openChat');
  }
});

Ось і все. Тепер перейдіть на свій сайт і перевірте, як все працює.

Приклад: приховати чат до першого повідомлення від оператора або першого проактивного повідомлення чату

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

1. Видаліть HelpCrunch('showChatWidget'); з коду JS віджета чату HelpCrunch:

2. Щоб відображати чат лише після першого повідомлення в чаті, додайте цей код JS на свій сайт:

HelpCrunch('onNewUnreadChat', function() {
  HelpCrunch('showChatWidget');
});

Приклад: створіть посилання, яке автоматично відкриватиме чат

Якщо ви хочете створити сторінку, після відвідування якої чат відкриватиметься автоматично, ви можете додати цей рядом до URL-адреси сторінки:

?HelpCrunchOpenChat=1

Final result: https://yourwebsite.com/some_page/?HelpCrunchOpenChat=1

Приклад: попередньо заповніть повідомлення в області вводу чату посиланням

Припустимо, у вас є сторінка, на якій ви хочете, щоб ваші клієнти надіслали вам в чат певне повідомлення. Наприклад, там є кнопка "запитати про ціни", натиснувши на яку, чат відкривається автоматично з попередньо заповненим першим повідомленням в області введення. Скажімо, повідомлення буде "Чи можете ви розповісти більше про ціни?", а користувачеві потрібно лише натиснути кнопку "надіслати".

Найпростіший спосіб досягти цього – додати наступне до посилання на сторінку:

?HelpCrunchInputText=test

Final result: https://yourwebsite.com/some_page/?HelpCrunchInputText=test

Чи була наша стаття корисною?