Відкриття чату власним посиланням або кнопкою

Замість хмаринки чату в куті відвідувачі можуть відкривати чат посиланням або кнопкою на сайті — наприклад «Допомога й підтримка» в бічній панелі або «Запитання про тариф» на сторінці цін. Вікно чату тоді відкривається безпосередньо поруч із цим елементом.

Додатковий код не потрібний: достатньо звичайного фрагмента з розділу Вбудовування віджета. Приклад для копіювання є також в обліковому записі в розділі Проєкт → Вбудовування → Відкрити чат власним посиланням.

Найпростіший випадок

Посилання на #rc-open:

<a href="#rc-open">Help & support</a>

Або кнопка з атрибутом data-rc-open:

<button type="button" data-rc-open>Open chat</button>

data-rc-open працює на будь-якому елементі, не лише кнопці. Окрім #rc-open, віджет приймає ціль посилання #reactive-chat.

Натискання враховується, навіть якщо віджет ще не завантажився: вікно відкриється після готовності.

Де з’являється вікно

• Праворуч від елемента, якщо достатньо місця, інакше — ліворуч. Верх вікна вирівнюється з елементом.
• Завжди повністю видиме: вікно залишається в межах видимої області й рухається за елементом під час прокручування чи зміни розміру браузера.
• На вузьких екранах (менш як 480 пікселів завширшки, тобто більшість смартфонів) чат, як завжди, відкривається на весь екран. Поруч з елементом місця немає.
• Як бічна панель: якщо в розділі Вигляд вікно задано як повновисотну бічну панель, воно відкривається там, а не поруч з елементом.
• Якщо чат уже відкритий, вікно переміщується до останнього натиснутого посилання.
• Коли чат закривається (зокрема клавішею Escape), фокус клавіатури повертається до посилання або кнопки, що його відкрили.

Щоб відкрити вікно у звичайному кутовому положенні, задайте data-rc-open="corner". data-rc-anchor="none" робить те саме:

<button type="button" data-rc-open="corner">Open chat</button>

Попереднє заповнення поля повідомлення

Із data-rc-message речення вже є в полі повідомлення після відкриття чату. Воно не надсилається: відвідувач може доповнити, змінити чи видалити його й надсилає сам.

<button type="button" data-rc-open data-rc-message="I have a question about my plan">
  Question about my plan
</button>

Використовуються до 200 символів. Для цього чат переходить на вкладку розмови.

Вибір вкладки

Якщо чат має кілька вкладок, data-rc-tab визначає, яка буде попереду після відкриття:

• msg — розмова,
• home — головна сторінка,
• help — статті довідки.

<a href="#rc-open" data-rc-tab="help">Browse help articles</a>

Якщо названої вкладки немає (наприклад help без статей довідки), чат просто відкривається як завжди.

Відкриття з власного JavaScript

Ті самі параметри доступні у виклику. anchor — елемент, поруч із яким має з’явитися вікно; message і tab необов’язкові:

document.querySelector('#my-button').addEventListener('click', function (ev) {
  ReactiveChat('open', {
    anchor: ev.currentTarget,
    message: 'I have a question about my plan',
    tab: 'msg'
  });
});

Без anchor вікно відкривається у звичайному місці. ReactiveChat('open') без параметрів працює як раніше. Якщо сам елемент містить data-rc-message або data-rc-tab, вони теж діють для виклику; явно передані у виклику значення мають пріоритет.

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

window.ReactiveChat = window.ReactiveChat || function () { (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments); };

Зовсім без хмаринки чату

Якщо чат має бути доступний лише через власні посилання, наприклад «Допомога й підтримка» в бічній панелі, є два способи.

В обліковому записі: у розділі Проєкт → Вигляд → Оформлення задайте Показ як Лише через власні посилання (без значка чату) і збережіть. Налаштування діє без змін сайту. Утім, потім ще раз скопіюйте фрагмент у розділі Проєкт → Встановлення: новий уже не містить кольору бренду, тому значок чату не з’являється на мить під час завантаження. Доки віджет не отримав налаштування із сервера, наприклад без з’єднання або під час першого відвідування до прийняття cookie, значок залишається запасним варіантом, щоб чат був доступний.

У фрагменті: якщо значок не повинен з’являтися ніколи, приховайте хмаринку через data-rc-hide-launcher="true" у фрагменті вбудовування. Атрибут діє завжди, незалежно від облікового запису:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-hide-launcher="true"
        async></script>

Тоді переконайтеся, що на кожній сторінці, де відвідувачі мають доступ до чату, є щонайменше одне таке посилання.

Усунення несправностей

• Натискання лише додає #rc-open до адреси: віджет не вбудований на цій сторінці або не завантажився (наприклад без згоди). Перевірте наявність фрагмента.
• Вікно відкривається в куті замість місця біля посилання: чи є на елементі data-rc-open="corner" або data-rc-anchor="none"? Чи вужче вікно браузера за 480 пікселів? Чи задано бічну панель?
• Текст не з’являється в полі повідомлення: атрибут називається data-rc-message і має бути безпосередньо на натиснутому елементі.

Інші налаштування фрагмента описано в розділі Вбудовування віджета. Показ картки власної пропозиції всередині чату пояснено в розділі Промокартка в чаті.

Докладніше в документації

Докладно: Довідник тегу скрипту та JavaScript API. Усі розділи є в документації.