# Виджеты 2.0

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FoLwUTVQGCGfPU7HHXwK2%2F2980282582.png?alt=media&#x26;token=d81982e2-f6fc-49f7-89a2-c3e4c6a6c363" alt=""><figcaption></figcaption></figure>

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

* Шаги создания виджета
* (1) Общие
* (2) Каналы
* (3) Кнопка
* (4) Дизайн
* (5) Чат
* (6) Контекст
* Сохранение виджета

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2Ft8BkDTaZeSWXveUu3Qu6%2F2980282590.png?alt=media&#x26;token=b86b4364-51f5-411e-8ea3-5c4218f189f0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FdoutvtmumPditVOgAXI5%2F2980380897.png?alt=media&#x26;token=1072b24a-dc1f-4f62-979e-3065fd51856d" alt=""><figcaption></figcaption></figure>

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

(1) Общие;

(2) Каналы;

(3) Кнопка;

(4) Дизайн;

(5) Чат;

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

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

#### (1) Общие

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FbmAFkofGKVH3h0VhYBYR%2F2980249784.png?alt=media&#x26;token=f3ba005c-8aac-4097-8156-8cbf35f51d30" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FCHaXEHDmZzZ7T7wKSLth%2F2980249790.png?alt=media&#x26;token=7cfa803b-358d-4d22-abfb-bc8da6bd3cc9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FEd2KzoKqTcTrG6XLZ3em%2F2980348136.png?alt=media&#x26;token=ad7b4df8-55e9-44f8-9310-f5433d7f710b" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FjU3gF4fKSEBH16bPXDcp%2F2980380911.png?alt=media&#x26;token=e9646749-f167-4c53-973d-155e950de2e7" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2F2NPdTuakpqdcbyhPyQZi%2F2980348144.png?alt=media&#x26;token=456491e7-6689-4265-83f0-67c79851aef8" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FFojiylYBHBCz4r5xxCT5%2F2980282608.png?alt=media&#x26;token=84433ffe-1136-437a-81e1-8071994510a2" alt=""><figcaption></figcaption></figure>

#### (2) Каналы

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FMyW4l0Dw3iFnQeZvCVLU%2F2980249800.png?alt=media&#x26;token=7f335cce-6659-4e65-8b87-3130104c23f3" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FxjBZPDXOpC5fWDL5l2TI%2F2980380919.png?alt=media&#x26;token=1a960e32-43b0-4c7f-807e-f78259b3dfb4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FgfP9LrEG0cv4YEm4EYYC%2F2980380925.png?alt=media&#x26;token=a36b7c8d-f9c7-4f79-9358-54171f845f44" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FoLcuKJBnP9YyVGQCcMkr%2F2980348156.png?alt=media&#x26;token=d631112d-a547-4c76-b721-b62795c30e57" alt=""><figcaption></figcaption></figure>

#### (3) Кнопка

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

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2F7Zxt4rCpN7LjbIbqL8N4%2F2980380935.png?alt=media&#x26;token=7164cc73-f2ce-4251-84a0-1c9b3c90126a" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FHClNHd9rZnsuDdRJ4T7W%2F2980249810.png?alt=media&#x26;token=aa68c181-b556-4181-bb38-40d5a902e9b7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FUDt0UV8dBXSsVz0i0wyL%2F2980380943.png?alt=media&#x26;token=612453c2-b4a2-433c-8900-0ba40c689db6" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FElTs4MgRPaikES18n14B%2F2980282616.png?alt=media&#x26;token=671ca228-de21-4af5-8002-27e2eaba4f2e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FMNbWIs3JfT3dcdPQJDCY%2F2980348168.png?alt=media&#x26;token=2fd31a96-64f8-4a34-8d5d-29fe1a11d57b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FHQagiR5uNg01vrqNfBoP%2F2980282622.png?alt=media&#x26;token=9c7c71ab-1f5d-4b2c-a022-35a2a201c16b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2Fr5xxJfHusZGV9YRlS1vF%2F2980249818.png?alt=media&#x26;token=3a92f4e4-bbf9-469b-a6ba-3fcdeb5ee1c4" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FgV56j4NHw1BPYwj2vqC7%2F2980249824.png?alt=media&#x26;token=2ca993d7-242e-4bc9-b52c-e2c854aa96d0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FpjJZe88LaQfSQL2FXRPb%2F2980249830.png?alt=media&#x26;token=8812432c-55a7-4be8-b3b6-5b574f7cb778" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FyQS9BUo9rdwuKUkTuvw1%2F2980380953.png?alt=media&#x26;token=539a7dbd-d3fa-4cc8-b22c-3282a9a7f6c4" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FETXFfeeRypZgIDzetojP%2F2980348176.png?alt=media&#x26;token=ba863ba0-e004-4e36-bde9-dcea06a5285e" alt=""><figcaption></figcaption></figure>

#### (4) Дизайн

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FIVbju8Lg7isoV3L3JWZL%2F2980348182.png?alt=media&#x26;token=87adffc2-659c-42ff-9ae2-f1939e23fd68" alt=""><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2F1QbDpcbZp1SOXAnETQl3%2F2980380959.png?alt=media&#x26;token=c65a95de-f750-410f-ac66-6fe8c257d81d" alt=""><figcaption></figcaption></figure>

#### (5) Чат

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

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

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FLGqFaQ4dk2XJ4R0Y9vIv%2F2980282630.png?alt=media&#x26;token=7c6cd4a8-1d26-4c10-a42b-f6e23ffd67d5" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FH0ai0DhZOFdWJBWe4qKP%2F2980249842.png?alt=media&#x26;token=1e84702a-66ee-41fd-9188-10fe4d67c14a" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2F3rZSvdXYfJjVCH6ZIALT%2F2980348192.png?alt=media&#x26;token=df41b827-3e7c-4c94-a85d-16a8f78e9993" alt=""><figcaption></figcaption></figure>

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