# Виджеты

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

<figure><img src="/files/6G73kM0yzC7KF2GIZPVt" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/c76Px1Wc4bB38AE8dV77" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/VQHvHJLqWwk5DpGWh8Oe" alt=""><figcaption></figcaption></figure>

1. Диплинк - нужно выбрать из диплинков доступных на вашем аккаунте. Это обязательное поле, без него не активируется кнопка «Получить код виджета»;
2. Мессенджеры - в зависимости от выбора у сгенерированного скрипта будут “шарики” соц сетей которые вы тут укажете.

> **Примечание:** Для продвинутых пользователей.

Можно выбрать все, а те, мессенджеры, которые пока не нужны закомментировать в коде. Так можно иметь ссылки сразу на все мессенджеры, но подключать уже из админки сайта или конструктора сайта минуя повторную генерацию скрипта из UI платформы.

3. Виджет - настройки цвета, текста сообщения и задержки показа сообщения.

* Настройки цвета

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

К примеру “#111111” - чёрный.

* Текст сообщения. Для примера было использовано “Напишите нам” как самое часто встречающееся, так же часто встречается вариант “Мы в социальных сетях”, но вы вольны выбирать свои варианты текста для виджета, у этого поля свободный ввод.
* «Показать сообщение через» - задержка показа сообщения в секундах.

4. «Получить код виджета». Когда все настройки для виджета закончены, нужно нажать эту кнопку.

> **Примечание:** Нажав «Получить код виджета» вы уже не сможете вернуться к настройкам виджета. Делайте это, когда уверены, что всё выбрано и заполнено корректно.

<figure><img src="/files/gSfczy9dr3dtSoyJQRhA" alt=""><figcaption></figcaption></figure>

Когда мы нажали «Получить код виджета» открывается следующее модальное окно в котором есть кнопка «Копировать» для удобного копирования скрипта в буфер обмена.

При нажатии на кнопку «Копировать» появится системное сообщение об удачной операции.

<figure><img src="/files/9aTzZA9TW7O7zXPJTadk" alt=""><figcaption></figcaption></figure>

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

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

После вставки виджета из примера на сайт, он будет выглядеть следующим образом↴

<figure><img src="/files/7IeWzyI7BhOYjz5GXlqJ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/fQVROMHnQbpeCF1SXKlc" alt=""><figcaption></figcaption></figure>

При нажатии на него откроются иконки выбранных мессенджеров↴

<figure><img src="/files/kzjkjzp9G1mBPpQdhem5" alt=""><figcaption></figcaption></figure>

### Как редактировать код виджета?

Для продвинутых пользователей.

Расскажем как редактировать скрипт из вашей админки или редактора конструктора сайтов.

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

#### Как закомментировать строку

**Кейс.**

Вам сказали, что в виджете нужно отключить Viber.

<figure><img src="/files/3koINhJlv5lkPD959XhV" alt=""><figcaption></figcaption></figure>

В начале строки, где расположена ссылка на Viber нажимаем “ctrl + /”

**Готово.**

Вы закомментировали строку и теперь виджет при нажатии не будет выдавать Viber, но у вас осталась строка и если нужно будет опять включить его, вам не нужно будет заново создавать виджет из UI платформы Fasttrack.

<figure><img src="/files/rcA9mivb37xL33vDKphY" alt=""><figcaption></figcaption></figure>

#### Как поменять цвета виджета и текст в скрипте?

**Кейс**

Вам сказали заменить цвета и текст виджета. Ещё добавили, что цвета возможно нужно будет вернуть в ближайшее время к исходному виду.

<figure><img src="/files/XBAlXc6gf3qcW97iphTn" alt=""><figcaption></figcaption></figure>

В строках 24 и 25 выделены новые цвета, которые мы установили для виджета, но чтобы не потерять старые варианты цветов, в 37 и 38 строках мы в закомментированных строках сохранили старые цвета.

Текст редактируется строке tip Text, как правило в виджетах он не сильно большой и сложный, поэтому старую версию не сохраняли. В примере текст виджета в 31 строке красным цветом, но фактические номера строк могут отличаться на вашем виджете, в документации номера строк используются для упрощения восприятия материала.

**Готово**

#### Пример замены цвета и текста

**Старая версия**

\#123456

\#654321

Напишите нам

<figure><img src="/files/gjrq9bnSBNMrAuKZ1GwQ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/w7LdmY8uQ65hwga834U4" alt=""><figcaption></figcaption></figure>

**Обновлённая**

\#663399

\#800080

Мы в соц сетях

<figure><img src="/files/0LIPQvXkULX6QxYnj3Ac" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/mv3ntXGyRE9x8zvAV5Fm" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.fstrk.io/knowledge_base/instructions/old/razdel-marketing/vidzhety.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.