> For the complete documentation index, see [llms.txt](https://help.webstoryz.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.webstoryz.com/sozdanie-nastroika-i-upravlenie-widgetom.md). # Создание, настройка и управление виджетом **Содержание:** * [Создание виджета](/sozdanie-nastroika-i-upravlenie-widgetom.md#sozdanie-vidzheta) * [Настройка виджета](/sozdanie-nastroika-i-upravlenie-widgetom.md#parametry-vidzheta) * [Параметры виджета](/sozdanie-nastroika-i-upravlenie-widgetom.md#parametry-vidzheta-1) * [Заголовок виджета](/sozdanie-nastroika-i-upravlenie-widgetom.md#zagolovok-vidzheta) * [Автоматическая загрузка сторис из Instagram](/sozdanie-nastroika-i-upravlenie-widgetom.md#avtomaticheskaya-zagruzka-storis-iz-instagram) * [Цвет фона](/sozdanie-nastroika-i-upravlenie-widgetom.md#cvet-fona) * [Расположение на сайте](/sozdanie-nastroika-i-upravlenie-widgetom.md#raspolozhenie-na-saite) * [Стиль хайлайта](/sozdanie-nastroika-i-upravlenie-widgetom.md#stil-khailaita) * [Форма хайлайта](/sozdanie-nastroika-i-upravlenie-widgetom.md#forma-khailaita) * [Параметры хайлайта](/sozdanie-nastroika-i-upravlenie-widgetom.md#parametry-khailaita) * [Цвет обводки](/sozdanie-nastroika-i-upravlenie-widgetom.md#cvet-obvodki) * [Стиль подписи](/sozdanie-nastroika-i-upravlenie-widgetom.md#stil-podpisi) * [Редактирование виджета](/sozdanie-nastroika-i-upravlenie-widgetom.md#redaktirovanie-vidzheta) * [Удаление виджета](/sozdanie-nastroika-i-upravlenie-widgetom.md#udalenie-vidzheta) ## Создание виджета {% hint style="info" %} Для создания виджета выберите продукт **Виджет** и в разделе [**Мои виджеты**](https://widget.webstoryz.com/my-widgets) нажмите на кнопку [**Создать виджет**](https://widget.webstoryz.com/my-widgets/create) {% endhint %} ![Нажмите для увеличения](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXkXrsXeFZMiy4hlEmO%2F-MXkYwby52G_r4QPlB5F%2Fimage.png?alt=media\&token=9eda121c-8abd-405e-8333-9870e5e9015a) Далее, введите название виджета в левом верхнем углу.‌ ![Нажмите для увеличения](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXkXrsXeFZMiy4hlEmO%2F-MXkZKPYcBcotYnlohzn%2Fimage.png?alt=media\&token=399c4569-e278-40bd-8c48-590a5f4a51cc) Параметр **Активность виджета** отвечает за показ виджета на сайте. ![](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXkXrsXeFZMiy4hlEmO%2F-MXkZQcjNNcDqze70PdQ%2Fimage.png?alt=media\&token=0218fe1b-dd84-4b9d-a3a6-f3607aa8cdf7) {% hint style="info" %} Если вы временно хотите убрать виджет с сайта, то его не обязательно удалять, достаточно просто **деактивировать виджет**. {% endhint %} В настройках виджета доступно 3 раздела:‌ * [​Параметры виджета​](/sozdanie-nastroika-i-upravlenie-widgetom.md#parametry-vidzheta) * [​Стиль хайлайта​](/sozdanie-nastroika-i-upravlenie-widgetom.md#stil-khailaita) * [​Стиль подписи​](/sozdanie-nastroika-i-upravlenie-widgetom.md#stil-podpisi) ## Настройка виджета ### Параметры виджета В этом разделе можно:‌ * [​Задать виджету заголовок​](/sozdanie-nastroika-i-upravlenie-widgetom.md#zagolovok-vidzheta) * [​Активировать загрузку сторис из Instagram​](/sozdanie-nastroika-i-upravlenie-widgetom.md#avtomaticheskaya-zagruzka-storis-iz-instagram) * [​Выбрать цвет фона​](/sozdanie-nastroika-i-upravlenie-widgetom.md#cvet-fona) * [​Выбрать расположение на сайте​](/sozdanie-nastroika-i-upravlenie-widgetom.md#raspolozhenie-na-saite) ![](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXfwCYLCr5qXu2ZF7hh%2F-MXfy5gWfiY3Omf14Yqx%2Fimage.png?alt=media\&token=0ed5e85a-e971-42be-8fad-f278f4ba0387) #### Заголовок виджета Вы можете активировать заголовок виджета и написать текст, который появится над виджетом.‌ ![](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXkXrsXeFZMiy4hlEmO%2F-MXk_BpK3aruCTwi72zW%2Fimage.png?alt=media\&token=3e8fecfa-a0dc-4cbd-b6df-cc4b4526bc7d) #### Автоматическая загрузка сторис из Instagram При активации этого параметра автоматически будет создан хайлайт виджета, в который будут добавляться ваши сторис из Instagram. Для этого необходимо [**подключить Instagram аккаунт к вашему профилю**](/nastroiki/kak-podkluchit-instagram-k-svoemu-akkaunty.md). Данная функция доступна начиная от [**тарифа Starter**](/nastroiki/tarify-i-oplata.md). ![](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXkXrsXeFZMiy4hlEmO%2F-MXk_OpuHsR23yFK_4TC%2Fimage.png?alt=media\&token=3867fa0f-2afd-4a2e-8b6d-30065318040c) {% hint style="info" %} Сторис добавляются **один раз в час** (12:00, 13:00 и т.д.). {% endhint %} #### Цвет фона Нажмите на кружок, чтобы выбрать цвет фона, который больше всего подходит вашему сайту по дизайну. ![](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXkbtNp9bvuKDAaly34%2F-MXkcWHiJpDeX9o4Thr3%2Fimage.png?alt=media\&token=bd72d232-ca2c-4628-86ff-97780e646913) ![Выбранный цвет сразу отразится в окошке Превью виджета](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXkbtNp9bvuKDAaly34%2F-MXkcfWdXW5I7HI8XX9f%2Fimage.png?alt=media\&token=26a26aba-2e05-4b5a-a049-ccb0ba6aa6c7) {% hint style="info" %} Чтобы сделать фон прозрачным, необходимо удалить все символы из поля **Цвет фона.** {% endhint %} #### Расположение на сайте Выберите расположение виджета на сайте. Доступно 4 варианта:‌ * **Произвольное** - виджет будет располагаться там, где вы вставите его в вашей CMS или в коде * **Снизу** - виджет будет закреплен снизу экрана * **Слева/справа** - виджет будет расположен вертикально и закреплен сбоку экрана, поверх сайта‌ ![Расположение виджета на сайте](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXgAL5_B2ARJ2ns0hLC%2F-MXgDGMr-lOVi1VPnG4X%2Fimage.png?alt=media\&token=a082b9b2-c86c-4c4b-b649-59eeb163d8d8) {% hint style="info" %} При вертикальном отображении (**Слева/Справа**) виджет отображается **поверх остальных элементов** сайта и **остается на экране при прокрутке страницы**. {% endhint %} ### Стиль хайлайта В этом разделе можно:‌ * [​выбрать форму хайлайта​](/sozdanie-nastroika-i-upravlenie-widgetom.md#forma-khailaita) * [​настроить параметры хайлайта​](/sozdanie-nastroika-i-upravlenie-widgetom.md#parametry-khailaita) * [​выбрать цвет обводки​](/sozdanie-nastroika-i-upravlenie-widgetom.md#cvet-obvodki) #### Форма хайлайта Выберите форму хайлайта. Всего доступно 3 варианта:‌ ![](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXkbtNp9bvuKDAaly34%2F-MXkcqkseOXrQ_ebYmUA%2Fimage.png?alt=media\&token=b368ab96-e68d-45b0-8825-99c137964cba) * **Круглый** - является самым привычным для большинства пользователей ![Круглый формат](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXgAL5_B2ARJ2ns0hLC%2F-MXgFOUINO_hejb49TZ3%2Fimage.png?alt=media\&token=f23f378e-021e-4376-b0ed-96ec09325c26) * **Квадратный** - иногда используется в банковских приложениях и информационных сайтах ![Квадратный формат](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXgAL5_B2ARJ2ns0hLC%2F-MXgEgkjVZqJLiKJ99yv%2Fimage.png?alt=media\&token=4ded125f-bd56-490f-8088-e596e5e131f6) * **Прямоугольный** - часто используется в банковских приложениях и информационных сайтах. Особенностью такого формата является то, что подпись расположена внутри хайлайта‌ ![Прямоугольный формат](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXgAL5_B2ARJ2ns0hLC%2F-MXgEZZZXK8tiIuPHXCI%2Fimage.png?alt=media\&token=fa89807a-4c43-4d74-9a4f-ead352aab906) #### Параметры хайлайта Перемещая ползунки, выберите размер хайлайта и толщину обводки. {% hint style="info" %} Рекомендуется сначала [**установить виджет**](/kak-ustanovit-vidzhet-na-sait.md) на тестовую страницу, и уже затем настроить параметры хайлайта. {% endhint %} ![](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXgGS11Bf-gxWPE-eIu%2F-MXgH9uK5D10MLBospke%2Fimage.png?alt=media\&token=e4817b38-fc81-4e1b-bd56-87dfbcefd842) #### Цвет обводки Нажав на кружок, выберите цвет обводки, который больше всего подходит к дизайну вашего сайта и иконкам сторис.‌ ![](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXgK-wyzSwFQ7_Qmf0e%2F-MXgLu4AEpOaS0ZfR60g%2Fimage.png?alt=media\&token=a9235644-d9f4-4539-841f-4e5f5366cc6f) ![](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXkbtNp9bvuKDAaly34%2F-MXkdBzyBh8z5dGRqF6W%2Fimage.png?alt=media\&token=c712add9-c3ed-4f63-bc9c-250410275b09) ### Стиль подписи В этом разделе можно выбрать шрифт, его размер, и выравнивание текста. {% hint style="info" %} Для круглого и квадратного формата хайлайтов рекомендуем использовать **выравнивание по центру**, а для прямоугольного - **выравнивание по левому краю.** {% endhint %} ![Стиль подписи](https://gblobscdn.gitbook.com/assets%2F-MXbF1r5INUqNUhrFY_u%2F-MXgK-wyzSwFQ7_Qmf0e%2F-MXgM91by2pqN3Wn2ONt%2Fimage.png?alt=media\&token=c8010188-fce1-4d6b-bbff-1688cced2aec) {% hint style="success" %} Поздравляем, только что вы создали и настроили ваш виджет!‌ {% endhint %} Теперь необходимо сохранить виджет, нажав на кнопку **Сохранить** в правом верхнем углу экрана.‌ Настало время [добавить виджет на сайт](/kak-ustanovit-vidzhet-na-sait.md). ## Редактирование виджета Для редактирование виджета перейдите в раздел [**Мои виджеты**](https://widget.webstoryz.com/) и нажмите на значок ![Нажмите для увеличения](/files/-MYEXsT0qKb60IJhKWqi) ## Удаление виджета Для редактирование виджета перейдите в раздел [**Мои виджеты**](https://widget.webstoryz.com/) и нажмите на значок ![Нажмите для увеличения](/files/-MYEYS32r7EcG3czGMcJ)