У чат-виджета Kookee была одна задача, и он с ней хорошо справлялся: посетитель задаёт вопрос, ассистент отвечает по центру помощи и ссылается на статью, из которой взял ответ. Потом посетитель кликает по ссылке, и виджет его подводит. Браузер уходит на другую страницу или открывает новую вкладку, и разговор, в котором появился ответ, остаётся где-то позади.
Клик, который должен был стать лучшим моментом разговора, его и обрывал.
Поэтому я перестроил виджет. Теперь это не только чат: у него три вкладки — Главная, Спросить и Помощь — и окно просмотра статей. Обновление вышло сегодня, и вот правила, по которым я его делал.
1. Статья открывается там, где задали вопрос
Источник под ответом, ссылка внутри ответа, статья в списке — всё это теперь открывается внутри виджета, в окне просмотра с кнопкой «Назад». Страница под виджетом остаётся на месте, разговор тоже.
Окно просмотра — это страница статьи из центра помощи, уменьшенная до размера виджета: оглавление, то же голосование «Была ли эта статья полезной?» и кнопка Спросить об этой статье, которая переносит заголовок статьи в чат. Пост блога или запись журнала изменений открываются так же, только вместо голосования у них кнопки реакций.
Если ваш сайт уже сам обрабатывает клики по источникам, ничего не меняется: ваш обработчик по-прежнему главнее, а окно просмотра не вмешивается.
2. Не каждый визит начинается с вопроса
Пустой чат просит посетителя начать с самого трудного — сформулировать проблему. А многие открывают виджет поддержки, чтобы осмотреться: проверить, не сломалось ли что-нибудь, узнать, что изменилось, или найти статью с примерно подходящим заголовком.
Для них есть Главная. Там ваше последнее объявление, ваши ссылки, свежие записи журнала изменений и посты блога и самые просматриваемые статьи центра помощи, а наверху поле для вопроса — для тех, кто знает, что спросить. Помощь — это сам центр помощи: строка поиска и ваши коллекции, у каждой указано число статей.
Нового контента здесь нет. Главная и Помощь собираются из того, что вы уже публикуете, а пустой список не показывается вовсе.
Спросить — тот же чат, что и раньше, с вашим приветствием и несколькими готовыми вопросами, чтобы было с чего начать.
3. Любая ссылка на вашей странице может открыть статью
Лучшее место для подсказки — рядом с тем, что она объясняет: знак вопроса у поля настроек, ссылка «Как устроена оплата?» на странице с ценами. До сих пор такая ссылка вела куда-то ещё.
Добавьте любому элементу один атрибут, и клик по нему откроет статью в виджете:
<a href="/help/getting-started" data-kookee-article="getting-started">С чего начать</a>Здесь важны две детали. href остаётся, поэтому ссылка работает, даже если виджет заблокирован или ещё не загрузился. А клик с зажатым Ctrl, Cmd или Shift или средней кнопкой мыши виджет не трогает: кто просит новую вкладку, получает новую вкладку. Все правила — в статье Открывайте статьи справки внутри виджета.
4. Тексты живут в панели управления, внешний вид — в вашем коде
Здесь я долго сомневался. У виджета два вида настроек, и хранить их нужно в разных местах.
Что виджет говорит — вкладки, заголовок, приветствие, готовые вопросы и ссылки — меняется часто и редко зависит от разработчика. Это хранится в панели управления, на вкладке Настроить, с живым предпросмотром, и сохранённое изменение доходит до вашего сайта примерно за минуту, без деплоя.
Как виджет выглядит — тема, положение, акцентный цвет, кнопка запуска — не хранится вовсе. Это остаётся в сниппете на вашем сайте. Внешний вид, загруженный с сервера, приходит, когда кнопка запуска уже нарисована, и виджет мигает; к тому же один проект часто работает на нескольких сайтах, которые не должны выглядеть одинаково. Панель управления всё равно помогает: вкладка Установка — это небольшой конструктор с предпросмотром, который пишет сниппет за вас.
Где настройки пересекаются, побеждает код, причём по каждому ключу отдельно. Сайт на нескольких языках передаёт переведённые тексты в коде, а остальное оставляет панели управления.
5. Запрос настроек не должен ломать виджет
Раз настройки сохраняются, виджет теперь запрашивает их у сервера, а новый запрос — это новый способ сломаться. Поэтому я дал этому запросу как можно меньше власти:
Он выполняется один раз за загрузку страницы, и браузер хранит ответ минуту.
Он не расходует месячную квоту API. Квота не для того, чтобы тратить её на чтение настроек при каждом просмотре страницы.
Если запрос не удался, виджет становится обычным чатом, каким был раньше. Посетитель увидит меньше вкладок, но не ошибку.
Чего я делать не стал
Это не чат с оператором. На той стороне никто не ждёт: ассистент отвечает по вашим статьям, а ваши инструкции подсказывают ему, куда направить человека, если ответить он не может.
Сами по себе новые вкладки не включаются. Каждый уже установленный виджет остаётся обычным чатом, пока вы не отметите вкладки в панели управления.
Как подключить
Тег script подхватывает это сам, на сайте ничего менять не нужно. В React обновитесь до @kookee/react 1.11.0 и @kookee/sdk 1.11.0. Затем откройте в проекте Виджет для сайта → Настроить и включите вкладки — по шагам это описано в статье Добавьте в виджет вкладки «Главная» и «Помощь», а первая установка — в статье Установите виджет на свой сайт.