# Создание, настройка и управление виджетом **Содержание:** * [Создание виджета](/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) --- # 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://help.webstoryz.com/sozdanie-nastroika-i-upravlenie-widgetom.md?ask= ``` 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.