Виджеты 2.0

Виджеты — это один из подразделов платформы Fasttrack, Подраздел «Виджеты» позволяет генерировать скрипт виджета для вставки на ваш сайт.

Здесь картинка: attachments/2980446209/2980282582.png?width=224

Быстрая навигация:

  • Шаги создания виджета

  • (1) Общие

  • (2) Каналы

  • (3) Кнопка

  • (4) Дизайн

  • (5) Чат

  • (6) Контекст

  • Сохранение виджета

Чтобы создать виджет, нажмите на кнопку «Добавить виджет» в подразделе.

Здесь картинка: attachments/2980446209/2980282590.png?width=564

Откроется окно создания виджета с 6 шагами настроек для будущего виджета.

Здесь картинка: attachments/2980446209/2980380897.png

Разберём каждый из них более детально:

(1) Общие;

(2) Каналы;

(3) Кнопка;

(4) Дизайн;

(5) Чат;

(6) Контекст.

Шаги создания виджета

(1) Общие

На шаге «Общие» в левой части экрана настраивается название для будущего виджета. В поле «Установка виджета на сайт» скрипт появится после сохранения виджета.

Здесь картинка: attachments/2980446209/2980249784.png

В правой части отображён “визард” настройки виджета. Который показывает отображение виджета н при текущих настройках. Стандартно он показывает список каналов с кнопкой и чат. в дальнейшем можно будет изменить эти настройки на шаге (3) Кнопка.

Список каналов с кнопкой. Штатно выбраны 5 каналов и кнопка для их сворачивания.

Здесь картинка: attachments/2980446209/2980249790.png

В варианте виджета с чатом так же отображаются каналы и кнопка, но дополнительно отображён чат сообщения из которого будут доступны операторам в Чат-центре.

Здесь картинка: attachments/2980446209/2980348136.png

Управление статусом виджета имеет 2 варианта положения переключателя: Доступен и Недоступен.

Если перевести виджет в статус «Недоступен», то он не будет отображён на вашем сайте.

Здесь картинка: attachments/2980446209/2980380911.png

Дополнительно на первом шаге можно настроить варианты отображения виджета на различных страницах с делением на ПК и мобильные устройства.

Варианты отображения в зависимости от типа устройства представлены на 2 скриншотах ниже.

Здесь картинка: attachments/2980446209/2980348144.png

Здесь картинка: attachments/2980446209/2980282608.png

(2) Каналы

Шаг «Каналы» позволяет выбрать диплинк из имеющихся на вашем аккаунте. Если диплинков ещё нет, то можно более детально ознакомиться с их созданием в разделе Диплинки

Здесь картинка: attachments/2980446209/2980249800.png

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

Зажав ЛКМ на элементе (2) его можно сместить выше или ниже.

Поставив или убрав галочку в чекбоксе мессенджера можно скорректировать колличество мессенджеров в виджете. Максимально доступно 8 вариантов.

Здесь картинка: attachments/2980446209/2980380919.png

В примере ниже убран один мессенджер и переставлены 4 оставшихся. Фактический вид представлен в правой части экрана, что позволяет до создания виджета понимать его конечный вид.

Здесь картинка: attachments/2980446209/2980380925.png

Если Список каналов переключить в “визарде” на Чат, то так же будет видно как расположены мессенджеры.

Здесь картинка: attachments/2980446209/2980348156.png

(3) Кнопка

На третьем шаге создания виджета стоит обратить внимание на поле выбора вариантов отображения.

Дефолтно (стандартно) отображён вариант «Кнопка + список каналов».

Здесь картинка: attachments/2980446209/2980380935.png

Всего есть четыре варианта отображения виджета. Далее рассмотрим оставшиеся варианты.

Здесь картинка: attachments/2980446209/2980249810.png

«Кнопка + обложка». Данный вариант имеет больше всего настроек для дизайна и содержания.

Здесь картинка: attachments/2980446209/2980380943.png

«Список каналов». Вариант отображения при котором нет кнопки для сворачивания мессенджеров, в отличие от дефолтного варианта.

Здесь картинка: attachments/2980446209/2980282616.png

«Полоска» является самым минималистичным вариантом отображения. Отлично подходит для сайтов со сдержанным дизайном или наоборот с перегруженным интерфейсом, где нужно минимизировать размер виджета.

Здесь картинка: attachments/2980446209/2980348168.png

Пример вариантов настроек для виджета «Кнопка + обложка»

Здесь картинка: attachments/2980446209/2980282622.png

Стандартно положение кнопки всегда «Справа», но данная настройка может быть изменена в данном выпадающем списке.

Здесь картинка: attachments/2980446209/2980249818.png

Стандартный отступ 20 и 20 px, но на примере ниже видно как можно сместить виджет на 40 раз относительно стандартного положения.

Нужно учитывать возможности экрана пользователей, если у вас на устройстве с 4к получилось сместить виджет на 2000 px, то у пользователя с разрешением экрана HD он может “уехать” за границу экрана.

Здесь картинка: attachments/2980446209/2980249824.png?width=448

Анимация виджета при скрытых вариантах мессенджера. Имеет 2 варианта: Без анимации или Пульсация. Выбирайте более подходящее решение под дизайн вашего сайта.

Здесь картинка: attachments/2980446209/2980249830.png

Приветствие можно настроить под текущую задачу - “Уважаемый клиент” или “Аладдин” как в примере ниже.

Здесь картинка: attachments/2980446209/2980380953.png

Чтобы сориентировать клиента доступно изменение дополнительного текста.

К примеру у Аладдина есть возможность 3 раза загадать желание, о чём его оповестили до общения с оператором в виджете на сайте.

Здесь картинка: attachments/2980446209/2980348176.png

(4) Дизайн

Четвёртый шаг «Дизайн» позволяет настроить цвета виджета и логотип отображаемый в чате.

Здесь картинка: attachments/2980446209/2980348182.png

Цвет активных элементов, таких как кнопок настраивается отдельно от цвета шапки.

Выбрать цвет можно при помощи палитры или зная HEXцвет****(в формате #000000)

HEX– шестнадцатеричная система представления цвета, которая использует арабские десятичные цифры от 0 до 9 и латинские буквы от A до F.

Так же на данном шаге загружается логотип для виджета. Он может быть индивидуален для каждого виджета или аналогичен логотипу бота.

Здесь картинка: attachments/2980446209/2980380959.png

(5) Чат

На пятом шаге создания виджета можно задать ограничения на максимальный размер загружаемых файлов и их формат.

Примечание: Стандартно указаны все допустимые форматы файлов, можно сократить этот список, но дополнить нельзя.

Увеличивать размер файлов стоит осознанно, если дать пользователям виджета возможность загружать файлы не по 10, а по 1000 Мб это может существенно повысить нагрузку на ваш сайт.

Здесь картинка: attachments/2980446209/2980282630.png

(6) Контекст

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

Здесь картинка: attachments/2980446209/2980249842.png

Сохранение виджета

При сохранении виджета в верхней части экрана появится системное сообщение об успешной операции (1), а в центральной части откроется модальное окно (2) с скриптом для вставки на ваш сайт и ссылкой на встроенный чат. У каждой из этих двух строк есть иконка копирования упрощающая данный процесс.

Здесь картинка: attachments/2980446209/2980348192.png

Если сразу скопировать данные не вышло, в сохранённом виджете на шаге «Общие» уже сохранились и скрипт и ссылка.

Last updated