Инструкция по эксплуатации ПО «Сервис видеоконсультаций Voda»

Инструкция по эксплуатации ПО
«Сервис видеоконсультаций Voda»

Роль: Администратор

Регистрация и первый вход

  1. Регистрация и вход на платформу осуществляется по адресу https://voda-sale.ru
    • а) Для регистрации перейдите по кнопке "Регистрация", заполните форму (ФИО, Email, Телефон, Адрес веб-сайта) и нажмите "Зарегистрироваться"
      • i) На указанный адрес электронной почты придет письмо с вашим логином и паролем, вы сможете изменить пароль позднее в личном кабинете.
    • b) Для входа заполните поля "Логин" и "Пароль" из письма и нажмите кнопку "Войти"

Menu административной панели

  1. Консультации - Основная рабочая область консультанта, сюда приходят входящие звонки и чаты, здесь же проводятся консультации.
  2. Чат - Таблица чатов с возможностью просмотра
  3. Аналитика
    • а. Время работы консультантов - Таблица с учетом времени работы консультантов
    • b. Статистика консультаций - Таблица всех сессий консультаций
  4. Рабочий стол
    • а. Консультанты - Таблица подключенных консультантов
    • b. Клиенты - Таблица уникальных клиентов
    • с. Сайты - Таблица подключенных сайтов
    • d. Календарь консультаций - Таблица записей на консультации по календарю

Установка и настройка виджета

  1. Разместите код виджета на всех страницах вашего сайта, где он должен появляться:
    • а. Обычный режим (виджет появляется сразу при загрузке страницы)

        <script>
    (() => {
        const initWidget = () => {
            const urls = {
                css: 'https://service.voda-sale.ru/vs/main.css',
                react: 'https://service.voda-sale.ru/assets/libs/react/react.production.min.js',
                reactDom: 'https://service.voda-sale.ru/assets/libs/react/react-dom.production.min.js',
                widget: 'https://service.voda-sale.ru/vs/indexES5.js'
            }

            const fetchResource = (url) => fetch(url, {mode: 'cors'}).then(r => {
                if (!r.ok) throw new Error(`Failed to load ${url}`)
                return r.text()
            })

            // 1. Создаем или находим контейнер
            let root = document.getElementById('go-core-frame-on-react-root')
            if (!root) {
                root = document.createElement('div')
                root.id = 'go-core-frame-on-react-root'
                root.setAttribute('data-connect-go-core-query', 'https://service.voda-sale.ru')
                document.body.prepend(root)
            }

            // 1.1. Неблокирующая подгрузка CSS из urls.css (можно перечислить через запятую)
            const loadCSS = (href) => {
                if (!href) return
                const url = href.trim()
                if (!url) return
                // проверка на дубликаты
                const exists = Array.from(document.getElementsByTagName('link')).some(l => l.rel.includes('stylesheet') && l.href === url)
                if (exists) return

                // Неблокирующая загрузка: сначала preload, затем превращаем в stylesheet
                const link = document.createElement('link')
                link.rel = 'preload'
                link.as = 'style'
                link.href = url
                link.onload = function () {
                    // После загрузки меняем на полноценный stylesheet
                    this.onload = null
                    this.rel = 'stylesheet'
                }
                link.onerror = function () {
                    // Фолбэк: если preload не поддерживается/упал — создаем обычный stylesheet через media-хак
                    const css = document.createElement('link')
                    css.rel = 'stylesheet'
                    css.href = url
                    css.media = 'print'
                    css.onload = function () { this.media = 'all' }
                    document.head.appendChild(css)
                    this.remove()
                }
                document.head.appendChild(link)
            }

            if (urls.css) {
                // Строка может содержать несколько URL через запятую
                urls.css.split(',').forEach(loadCSS)
            }

            // 2. Загружаем все в параллели
            Promise.all([
                fetchResource(urls.react),
                fetchResource(urls.reactDom),
                fetchResource(urls.widget)
            ]).then(([react, reactDom, widget]) => {
                // 3. Выполнение скриптов в правильном порядке
                const executeScript = (code) => {
                    const script = document.createElement('script')
                    script.textContent = code
                    document.head.appendChild(script)
                }

                executeScript(react)
                executeScript(reactDom)

                const widgetBaseUrl = urls.widget.substring(0, urls.widget.lastIndexOf('/') + 1)
                const fullCode = `
              window.__webpack_public_path__ = "${widgetBaseUrl}";
              ${widget}
            `

                executeScript(fullCode)
            }).catch(err => console.error('Error loading widget resources:', err))
        }

        if (document.readyState === 'loading') {
            window.addEventListener('DOMContentLoaded', initWidget)
        } else {
            initWidget()
        }
    })()
</script>
    • b. Режим вызова по кнопке (для корректной работы, необходимо поставить галочку "Вызов виджета по кнопке" в таблице "Сайты")

        
       <button class="c-button" onClick="triggerInitGoCoreWidget()">Показать виджет</button>

<script>
    (() => {
        const initWidget = () => {
            const urls = {
                css: 'https://service.voda-sale.ru/vs/main.css',
                react: 'https://service.voda-sale.ru/assets/libs/react/react.production.min.js',
                reactDom: 'https://service.voda-sale.ru/assets/libs/react/react-dom.production.min.js',
                widget: 'https://service.voda-sale.ru/vs/indexES5.js'
            }

            const fetchResource = (url) => fetch(url, {mode: 'cors'}).then(r => {
                if (!r.ok) throw new Error(`Failed to load ${url}`)
                return r.text()
            })

            // 1. Создаем или находим контейнер
            let root = document.getElementById('go-core-frame-on-react-root')
            if (!root) {
                root = document.createElement('div')
                root.id = 'go-core-frame-on-react-root'
                root.setAttribute('data-auto-start', 'false')
                root.setAttribute('data-connect-go-core-query', 'https://service.voda-sale.ru')
                document.body.prepend(root)
            }

            // 1.1. Неблокирующая подгрузка CSS из urls.css (можно перечислить через запятую)
            const loadCSS = (href) => {
                if (!href) return
                const url = href.trim()
                if (!url) return
                // проверка на дубликаты
                const exists = Array.from(document.getElementsByTagName('link')).some(l => l.rel.includes('stylesheet') && l.href === url)
                if (exists) return

                // Неблокирующая загрузка: сначала preload, затем превращаем в stylesheet
                const link = document.createElement('link')
                link.rel = 'preload'
                link.as = 'style'
                link.href = url
                link.onload = function () {
                    // После загрузки меняем на полноценный stylesheet
                    this.onload = null
                    this.rel = 'stylesheet'
                }
                link.onerror = function () {
                    // Фолбэк: если preload не поддерживается/упал — создаем обычный stylesheet через media-хак
                    const css = document.createElement('link')
                    css.rel = 'stylesheet'
                    css.href = url
                    css.media = 'print'
                    css.onload = function () { this.media = 'all' }
                    document.head.appendChild(css)
                    this.remove()
                }
                document.head.appendChild(link)
            }

            if (urls.css) {
                // Строка может содержать несколько URL через запятую
                urls.css.split(',').forEach(loadCSS)
            }

            // 2. Загружаем все в параллели
            Promise.all([
                fetchResource(urls.react),
                fetchResource(urls.reactDom),
                fetchResource(urls.widget)
            ]).then(([react, reactDom, widget]) => {
                // 3. Выполнение скриптов в правильном порядке
                const executeScript = (code) => {
                    const script = document.createElement('script')
                    script.textContent = code
                    document.head.appendChild(script)
                }

                executeScript(react)
                executeScript(reactDom)

                const widgetBaseUrl = urls.widget.substring(0, urls.widget.lastIndexOf('/') + 1)

                const fullCode = `
                  window.__webpack_public_path__ = "${widgetBaseUrl}";
                  ${widget}
                `
                executeScript(fullCode)
            }).catch(err => console.error('Error loading widget resources:', err))
        }

        if (document.readyState === 'loading') {
            window.addEventListener('DOMContentLoaded', initWidget)
        } else {
            initWidget()
        }
    })()

    function triggerInitGoCoreWidget() {
        if (document.getElementById('go-core-frame-on-react-root')) {
            const _tiny = document.querySelector('.voda-show-btn-tiny.voda-show-btn-tiny_active')
            if (_tiny) _tiny.click()
        }
        document.dispatchEvent(new Event('goCore.init'))
    }
</script>
  1. Перейдите в меню Рабочий стол -> Сайты
  2. Кликните по строке таблицы с вашим сайтом правой кнопкой мыши и выберите "Открыть в форме"
  3. В открывшейся форме "Сайт" доступно 3 вкладки:
    • а. Кастомизация
    • b. Календарь консультаций
    • с. Тематики обращения
  4. На первой вкладке Кастомизация, вы можете настроить визуальные и функциональный характеристики виджета или оставить настройки по умолчанию, часть настроек определяется в таблице "Сайт", часть в форме сайта не вкладке кастомизация:
    • а. В таблице:
    • b. Адреса электронной почты для уведомлений (через запятую). По умолчанию ваш логин.
    • с. Таймер развертывания виджета в секундах
    • d. Включить экран оценки звонка
    • е. Отображать мессенджеры на главном экране
    • f. Форма клиента перед звонком
    • д. Кнопка чата вне звонка
    • h. Форма когда консультанты оффлайн
    • і. Текст бегущей строки, когда консультанты оффлайн
    • ј. Кнопка отправки файлов в чате
    • к. Удалять файлы в чате после завершения консультации
    • l. Заголовок виджета
    • m. Размер виджета по умолчанию при загрузке
    • п. Превью со звуком
    • о. Telegram
    • p. Whatsapp
    • q. Отправлять емейл оповещения
    • r. В форме:
    • s. Ширина и высота свернутого виджета
    • t. Отступ от низа экрана
    • u. Текст кнопки вызова
    • v. Цвет кнопки вызова
    • w. Адрес ссылки на вашу политику обработки персональных данных
    • х. Парсинг текста из DOM контейнера (позволяет динамически собирать данные со страницы, с которой происходит звонок, например наименование или артикул товара)
      • i. Пример записи: { "name1": [ ".class1", ".class2", ".class3" ], "name2": [ ".class3", ".class4", ".class5" ] }
    • у. Разместить виджет справа
    • z. Использовать маски полей
      • i. Маска поля для телефона
    • аа. Активировать подсказку "Как поделиться экраном"
      • i. Текст описания как поделиться экраном
      • ii. Текст кнопки как поделиться экраном
    • bb. Календарь
      • i. Активировать календарь
      • ii. Часовой пояс
      • iii. Начало рабочего дня (час)
      • iv. Конец рабочего дня (час)
      • v. Шаг записи на консультацию (мин)
      • vi. На сколько месяцев вперед позволять запись на консультации
  1. На второй вкладке Календарь консультаций, вы можете настроить выходные дни, недоступные для записи в календарь и просматривать активные и прошедшие записи.
    • а. Данная вкладка актуальна только в случае если календарь активирован в кастомизации.
  2. На третьей вкладке - Тематики обращения, вы можете настроить создать тематики обращения из которых пользователь сможет выбирать при заполнении формы перед звонком.
    • а. Для создания тематики нажмите кнопку "Создать" в правом верхнем углу таблицы, заполните поля "Тематика" и "Порядок вывода", затем нажмите сохранить.

Настройка профиля пользователя (консультанта)

  1. Кликните на свой профиль в правом верхнем углу экрана
  2. В открывшейся форме пользователя вы сможете изменить следующие данные:
    • а. Аватар - отображается на виджете, если не загружено видео-превью и служит заглушкой, когда консультант выключает камеру.
      • i. Рекомендуется загружать вертикально ориентированное изображение.
    • b. Имя
    • с. Фамилия
    • d. Отчество
    • е. Пол
    • f. Дата рождения
    • д. Телефон
  3. Также, доступна функция смены пароля
    • а. Для смены пароля кликните на кнопку "Сменить пароль", в появившейся форме введите старый пароль и дважды новый пароль, после чего нажмите кнопку "Установить новый пароль"

Консультации - интерфейс

  1. Перейдите в меню "Консультации"
Консультации
  1. В открывшемся интерфейсе доступны следующие функции:
    • а. Превью - позволяет записать видеоролик в качестве видео-превью или загрузить видеофайл с устройства
      • i. Для записи видео нажмите на кнопку "Превью", далее "Начать запись", по завершению - "Остановить запись", после чего созданную видеозапись можно использовать в качестве превью.
      • ii. Для загрузки видео с устройства нажмите "Выберите файл" в том же окне, после чего выберите загруженный файл в качестве превью.
    • b. Онлайн / Оффлайн - окно управления состоянием виджета на подключенных сайтах, кликните по кнопке "Онлайн" / "Оффлайн", в выпадающем списке переключайте состояние подключенных сайтов.
    • с. Очередь - левая область интерфейса в которой отображаются запросы на консультации, как звонки так и чаты.
    • d. Основная рабочая область - правая область интерфейса в которой отображается активная сессия консультации, будь то чат или звонок.
Консультации входящий запрос

Консультации - прием звонков и чатов

  1. При обращении за консультацией (звонок или чат) через виджет, клиент указывает свои данные, после чего новый звонок поступает в окно консультаций сотрудника.
  2. Для звонков
    • а. Входящий запрос консультации сопровождается звуковым сигналом, появлением сверху в очереди плашки с данными заявителя и миганием иконки вкладки.
    • b. Важное примечание - для того чтобы услышать и увидеть входящий звонок у консультанта должна быть открыта вкладка кабинета с выбранным (открытым) меню "Консультации"
    • с. Чтобы принять звонок кликните по плашке входящего звонка, в появившемся окне нажмите "Принять"
      • i. Чтобы оставить звонок в очереди нажмите "В очередь"
  3. Для чатов
    • а. Новый запрос чата появляется в очереди, для того чтобы ответить пользователю кликните на плашку входящего запроса, откроется интерфейс чата.

Консультации - активная сессия звонка

  1. После приема звонка открывается окно активной сессии
Консультации активная сессия
  1. В окне активной сессии доступны следующие элементы:
    • а. В левом верхнем углу - иконки отображающие состояние камеры и микрофона клиента
    • b. В правом верхнем углу кнопки
      • i. Перезагрузить сессию - Если со связью возникают неполадки, можно нажать на перезагрузку сессии, система бесшовно обновит соединение.
      • ii. Полноэкранный режим - Развернет активную сессию на весь экран
    • с. В левом нижнем углу, кнопки:
      • i. Завершить консультацию
      • ii. Выключить/включить микрофон консультанта
      • iii. Выключить/включить камеру консультанта
      • iv. Начать демонстрацию экрана - запустит стандартное диалоговое окно браузера, где необходимо выбрать область трансляции (окно, вкладка, весь экран)
      • v. Открыть карточку клиента - открывает карточку клиента, где консультант может заполнить данные (ФИО, телефон, почта, комментарий)
      • vi. Открыть/закрыть чат
    • d. В правом нижнем углу - видео консультанта, то что видит клиент.

Консультации - функции чата

  1. В чате доступны следующие функции:
    • а. Написать сообщение
    • b. Отправить файл/изображение
    • с. Удалить сообщение - удаленное сообщение будет заменено на надпись "Сообщение удалено"
    • d. Добавить консультанта в чат - для добавления другого консультанта чат, в верхней части чата, нажмите на "+" и выберите консультанта, он будет добавлен в чат и сможет писать клиенту.
    • е. Завершить консультацию - завершит текущую сессию чата
    • f. Выйти из чата - удалит вас из текущей сессии чата
    • д. Карточка клиента - открывает карточку клиента, где консультант может заполнить данные (ФИО, телефон, почта, комментарий)
Консультации активная сессия

Чаты - таблица

  1. В меню "Чат" отображается таблица всех чатов, кликнув на строку таблицы в правой части экрана отобразится окно чата со всеми сообщениям. Данный интерфейс предусматривает только просмотр.
  2. Поля таблицы:
    • a. id Чата
    • b. id Клиента
    • с. Консультация завершена (признак да/нет)
    • d. Чат с сайта (откуда было обращение)
    • е. ФИО
    • f. Емейл
    • д. Телефон
    • h. id Консультантов подключенных к чату
    • і. Параметры со страницы (текст, динамически подтянутый со страницы обращения, например название товара)
    • ј. Дата время создания чата

Аналитика - Время работы консультантов

  1. Таблица логирующая отработанное время консультантов (отражает время в течении которого консультант был онлайн), поля:
    • а. Сайт
    • b. Имя и фамилия консультанта
    • с. Дата время начала работы
    • d. Дата время окончания работы
    • е. Отработанное время

Аналитика - Статистика консультаций

  1. Таблица статистики консультаций, поля
    • а. Дата обращения
    • b. Тип консультации (чат, видео звонок, аудио звонок)
    • с. Соединение установлено (признак да/нет)
    • d. Консультант
    • е. Начало разговора
    • f. Завершение разговора
    • д. Время разговора (продолжительность)
    • һ. Филиал
    • і. Устройство
    • ј. Статус
    • К. Комментарий
    • 1. Компания
    • т. Сайт
    • п. Оценка звонка (от 1 до 5)
    • о. Отзыв звонка (отзыв клиента о проведенной консультации)
    • р. Тематика обращения
    • q. Почта клиента
    • г. Телефон клиента
    • s. Время принятия звонка (через сколько звонок был принят с момента запроса консультации)
    • t. Количество сообщений в чате
    • u. Время ответа в чат (через сколько был написан первый ответ клиенту в чат)
    • v. ФИО клиента
    • w. Параметры со страницы (динамически подгружаемые данные со страницы откуда была запрошена консультация)

Рабочий стол - Консультанты

В текущей версии ПО, создание и блокировка консультантов а также их подключение к сайту производиться через обращение в поддержку support@voda-sale.ru

В таблице представлен список подключенных, активных консультантов.

Рабочий стол - Клиенты

  1. Таблица уникальных клиентов
  2. Поля
    • а. ФИО
    • b. Емейл
    • с. Телефон
    • d. Сайт
    • е. Страница обращения (с которой поступил запрос на консультацию)
    • f. Тематика обращения
    • д. Дата создания

Рабочий стол - Сайты

  1. Таблица подключенных сайтов
  2. Поля
    • а. Наименование
    • b. URL
    • с. Виджет включен
  3. Для редактирования сайта кликните правой кнопкой мыши по строке и выберите "Открыть в форме"
    • а. Откроется форма настроек сайта
      • i. Кастомизация
      • ii. Календарь консультаций
      • iii. Тематики обращения

Рабочий стол - Календарь консультаций

  1. Таблица запланированных консультаций
  2. Поля
    • а. ФИО клиента
    • b. Емейл клиента
    • с. Телефон клиента
    • d. Дата и время начала консультации
    • е. Дата и время окончания консультации
  3. Для проведения консультации по записи достаточно просто быть онлайн в указанное время, клиент получит напоминание и позвонит сам в указанном диапазоне.
Made on
Tilda