Коммуникация клиента с колл-центром уже давно не ограничивается телефонным звонком — теперь это мессенджеры, электронная почта и другие каналы. Но иногда поиск нужного способа связи превращается в “квест” для клиента, и не способствует положительному впечатлению. А менеджеры, со своей стороны, должны работать сразу в нескольких приложениях. В результате — потерянные обращения и снижение лояльности клиентов. В статье мы рассмотрим, как с помощью “Oki-Toki: e-commerce call & chat” можно объединить звонки и мессенджеры в одном виджете.
Что такое Oki-Toki: e-commerce call & chat?
Oki-Toki: e-commerce call & chat — это омниканальный виджет на вашем сайте, объединяющий каналы коммуникации. Основные преимущества:
- Все в одном — клиенту больше не нужно искать по сайту способ для связи, он может написать или позвонить с любой веб-страницы в один клик;
- Простая установка — подключение занимает 10–15 минут. Достаточно вставить код на сайте;
- Брендирование — выбор цвета, расположения, добавление логотипа и настройка приветственных сообщений;
- Удобство — виджет работает на телефонах, планшетах и компьютерах;
- Интеграции — поддержка популярных мессенджеров.
Подготовка к установке виджета
Перед установкой виджета нужно настроить внешние ресурсы и каналы коммуникаций. Это обеспечит корректную работу всех функций на сайте.
Настройка голосовой связи
Сначала нужно подготовить ресурсы для звонков в системе Oki-Toki:
- Web Call — клиент может совершить звонок прямо с сайта через браузер. Для этого создаётся виртуальный номер, настраивается маршрут звонков и очередь операторов.
- Get Call — заказ звонка. Клиент оставляет заявку, и система соединяет его с оператором в указанное время. При настройке задаются правила дозвона, время ожидания и распределение заявок между операторами.
Как подключить Web Call и Get Call — в отдельной статье.
Подключение каналов связи
Далее настраиваются дополнительные способы общения с клиентами. В Оки-Токи это:
- Мессенджеры (WhatsApp, Facebook, Telegram, Instagram, Viber) — для подключения интеграций нужно пройти авторизацию, получить API-ключи и настроить обработку сообщений.
- Электронная почта — подключается E-mail (IMAP/SMTP).
После настройки всех каналов можно перейти к виджету в системе и его интеграции на сайте.
Как подключить виджет?
Виджет можно настроить в разделе “Внешние ресурсы” — здесь происходит привязка и кастомизация заранее настроенных каналов: голосовых, мессенджеров и электронной почты. Это обеспечит удобное и единое общение с клиентами.
Основные настройки
Выберите из списка внешних ресурсов “Oki-Toki: e-commerce Call & Chat”, укажите название и создайте новую интеграцию.
В строку “Домены сайта” нужно вписать URL веб-страницы, где будет размещен виджет. Он может быть один или несколько, разделитель — запятая. Для тестирования работы виджета внутри сервиса необходимо указать домен админки Oki-Toki.
Следующий шаг — добавление каналов коммуникации в виджет, используя выпадающие списки.

Введите текст в поле справа, чтобы добавить описание.
Пример: “У вас возникли вопросы? Позвоните нам с сайта — операторы уже ждут!”
Этот текст будет отображаться под названием канала.

Важно! Имя канала задается при подключении интеграции и не редактируется в настройках виджета. Для его изменения нужно внести корректировки в саму интеграцию.
Для смены порядка каналов коммуникации в виджете перетащите элемент, удерживая значок с тремя точками рядом с его названием.
С помощью переключателя активности можно отключить неактуальные каналы. Отвязывать интеграцию для этого не нужно. Перетяните ползунок в положение “выключить” и элемент не будет отображаться в виджете.

После настройки и активации каналов можно перейти к кастомизации виджета под интерфейс вашего сайта.
Персонализация виджета в Оки-Токи
Чтобы виджет отображал стиль компании и вписывался в интерфейс сайта, нужно настроить внешний вид — дизайн, цвет, текст и расположение элементов.
Текст в виджете
В этом разделе задаются текстовые подписи, которые отображаются внутри виджета. Все поля редактируемые — можно использовать как стандартные варианты, так и собственные формулировки, соответствующие стилю компании.
Поля настроек:
- Заголовок — основной текст, который отображается в верхней части виджета. Обычно это название компании или сервиса;
- Описание — краткое сообщение, поясняющее назначение виджета или приветствующее клиента;
- Или — текст, разделяющий альтернативные способы перехода в канал связи. Например, чтобы открыть Telegram c мобильного устройства, а не с браузера;
- Отправить — надпись на кнопке для отправки формы или сообщения;
- Открыть — текст кнопки, чтобы открыть канал;
- Назад в меню — возврат к списку каналов;
- QR Code — надпись, сопровождающая QR-код в интерфейсе виджета;
- QR Code подсказка — пояснение под QR-кодом для информирования пользователя (как им воспользоваться);

В разделе “Текст в виджете” можно адаптировать интерфейс под фирменный стиль и тон общения компании.
Настройки для вставки на сайт
Задать параметры отображения виджета на веб-странице можно в разделе “Настройки вставки на сайт”. Например, позиция виджета на сайте, внешний вид, цвета, отступы, тизерное сообщение и т.д.
Поля настроек:
- Расположение — размещение виджета на сайте: сверху справа, снизу слева и т.д.
- Отступы задают расстояние от краёв экрана до виджета. Принимаются значения в пикселях (px);
- Иконка в переключателе — выбор типа отображения иконки:
- Статичная — используется логотип первого активного канала связи;
- Анимированная — иконки динамически сменяются, создавая эффект живого движения.
- Тизер — текст короткого приглашения, который появляется рядом с кнопкой виджета;
- Появление тизера — время (в секундах) до появления всплывающего сообщения после загрузки страницы;
- Длительность показа — сколько секунд тизер остаётся видимым;
- Ссылка на иконку — путь к изображению, которое используется в качестве основного логотипа виджета;
- Основной цвет — цвет фона кнопки-переключателя. Можно задать вручную или выбрать из палитры ниже;
- Цвет текста и иконок для элементов интерфейса внутри кнопки;
- Рекомендованные палитры — готовые цветовые комбинации для быстрой настройки внешнего вида;
- Код для вставки в <body> — формируется автоматически, в зависимости от установленных параметров. Его необходимо скопировать и перенести в HTML-код сайта для активации виджета.
Важно! После изменения параметров в разделе “Настройки вставки на сайт” нужно обновить код интеграции на веб-странице — иначе изменения не вступят в силу.

Для проверки, как виджет выглядит и работает, есть тестовый прототип. Он повторяет поведение реального виджета на сайте. Можно увидеть, что все параметры правильны, например: отображение каналов связи, функциональность кнопок и внешний вид — без внесения изменений на рабочий сайт.

Параметры и примеры использования
Поведение и отображение виджета может отличаться на разных девайсах. В разделе “Параметры и примеры использования” есть подходящие примеры кода, чтобы донастроить виджет.
Основные параметры:
- Метод mount — основной метод для инициализации виджета на странице. Он позволяет задать позицию виджета, его внешний вид, текст и поведение в интерфейсе;
- Параметры отступов — можно задать разные отступы для мобильных и десктопных устройств;
- Параметры позиционирования — управляют расположением виджета на экране. Например, чтобы он располагался в углу или сдвигался по мере прокрутки страницы.
Можно открывать и закрывать виджет программно, используя доступные методы, например, для динамической смены виджета в зависимости от действий пользователя. Дополнительные настройки помогут адаптировать виджет под дизайн и требования сайта.
Oki-Toki e-commerce call & chat — это способ собрать все каналы связи в одном интерфейсе и персонализировать под любой веб-сайт. Простота интеграции обеспечит эффективную и удобную связь, снизит нагрузку на операторов, упростит обработку запросов для поддержки высокого уровня обслуживания клиентов.

