Виджет на сайте

То, что видит посетитель. Настраивается в панели — код на сайте менять не нужно.

Как он выглядит

На компьютере — строка приглашения внизу экрана с вопросами-подсказками. Посетитель может её закрыть, тогда останется узкая вкладка у края экрана; вкладку можно перетащить на любой край.
На телефоне — круглая кнопка в углу, диалог открывается на весь экран.
Окно диалога можно растянуть, открепить и перетащить — настройки запоминаются у посетителя.

Посетитель видит, когда оператор печатает, слышит звук нового сообщения и получает бейдж непрочитанного, даже если свернул окно.

Своё оформление

Меню в панели → «Сайты» → блок «Оформление виджета». Настраиваются:

Основной цвет — кнопка, шапка диалога, сообщения посетителя, кнопка отправки.
Фон окна диалога и цвет текста поверх него.
Подписи — строка над полем вопроса, подсказка в поле ввода, текст пустого диалога.

Достаточно выбрать один основной цвет и один фон: второй тон градиента и контрастный цвет текста считаются автоматически, поэтому виджет не рассыпается на несочетаемые цвета. Кнопка «Вернуть наше оформление» сбрасывает всё разом.

Логотип не меняется. В шапке диалога и на боковой вкладке всегда логотип «Прямой Диалог» — виджет остаётся нашим продуктом. Настраиваются палитра и подписи.

Вопросы-подсказки

Там же, блок «Вопросы-подсказки»: вопрос и ответ к нему. Вопросы по очереди показываются в строке виджета — это заметно повышает шанс, что посетитель начнёт разговор.

Если посетитель отправит вопрос слово в слово (регистр, «ё» и пунктуация не важны) — ответ придёт сразу, как от живого оператора: с паузами «печатает…».
Абзацы ответа становятся отдельными сообщениями — пустая строка между абзацами делит ответ на части, максимум четыре.
Вопрос можно оставить без ответа — тогда он просто подсказка, а отвечает оператор.
Как только посетитель напишет что-то своё — автоответы прекращаются, дальше только человек.

Если оператор не отвечает

Через несколько минут ожидания виджет сам напишет посетителю, что вопрос не потерян, и предложит оставить контакт или продолжить разговор в МАКС. Диалог при этом остаётся в панели — оператор ответит позже, а посетитель получит ответ на сайте или в мессенджере.

Кнопка на сайте с готовым вопросом

Любая кнопка или ссылка на сайте может открыть чат и подставить вопрос в поле ввода — отправит его посетитель сам, одним нажатием. Удобно для «Спросить про доставку» рядом с корзиной или «Помочь с выбором» на карточке товара:

<button onclick="DirectDialog.push(['ask', 'Подскажите про доставку в мой город'])">
  Спросить про доставку
</button>

Вопрос впечатывается в поле на глазах у посетителя, а потом от кнопки отправки расходятся красные круги — видно, что от него ждут одного нажатия. Текст он может дописать или стереть: это обычное поле ввода, сообщение за него никто не отправляет. Если в системе включено «уменьшение движения», текст появляется сразу, а кнопка обведена неподвижным красным кольцом.

Если такой вопрос есть среди вопросов-подсказок с ответом, посетитель получит ответ сразу — как от оператора. Вызывайте команду по клику, а не при загрузке страницы: иначе чат будет открываться сам собой у каждого посетителя.

Своя кнопка вместо нашей

Если у сайта уже есть своя кнопка «Чат» или пункт меню, наш виджет можно подключить без собственной кнопки: на компьютере не будет строки приглашения и вкладки у края, на телефоне — круглой кнопки. Для этого в строке подключения добавьте &launcher=0 после кода сайта:

<script src="https://app.direct-dialog.ru/widget.min.js?site=ВАШ-КОД&launcher=0" defer></script>

Чат тогда открывает ваша кнопка, а счётчик непрочитанных ответов она рисует сама — виджет сообщает его событием dd:unread:

<button onclick="DirectDialog.push(['open'])">Чат <span id="chat-count"></span></button>
<script>
  window.DirectDialog = window.DirectDialog || [];
  window.addEventListener('dd:unread', function (e) {
    document.getElementById('chat-count').textContent = e.detail.count || '';
  });
</script>

Команда ['ask', 'текст'] работает и здесь — открывает чат с готовым вопросом. Объявите очередь window.DirectDialog до строки подключения: тогда нажатие, сделанное раньше, чем загрузился виджет, не потеряется.

Переписка не теряется

Посетитель вернулся на сайт — история на месте.
Оператор может прислать «ссылку-продолжение»: по ней диалог откроется на другом устройстве.
Файлы и картинки летают в обе стороны.