> 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/kak-ustanovit-vidzhet-na-tilda.md).

# Как установить Webstoryz виджет на Tilda?

![](/files/-MXkiAh11PsAmHuOVmNL)

{% hint style="warning" %}
Перед установкой виджета на сайт вы должны [прикрепить к виджету хотя бы одну сторис](/sozdanie-i-nastroyka-stories/kak-prikrepit-storis-k-vidzhetu.md).
{% endhint %}

Установить Webstoryz виджет на сайт, сделанный с помощью [Tilda](https://tilda.cc/ru/) можно двумя способами:

* [Используя блок **HTML-код (T123)**](/kak-ustanovit-vidzhet-na-tilda.md#ustanovka-vidzheta-s-pomoshyu-bloka-html-kod)
* [С помощью **Нулевого блока (Zero-block)**](/kak-ustanovit-vidzhet-na-tilda.md#ustanovka-vidzheta-s-pomoshyu-nulevogo-bloka)

## Установка виджета с помощью блока HTML-код

Данным способом можно установить виджет как на конкретной странице сайта, так и сразу на всех страницах, используя **Header** и **Footer** в Tilda.

### Установка на одной странице

1 .Откройте нужную страницу в Tilda

2\. Добавьте новый блок  

![Значок + появляется при наведении на пунктирную линию](/files/-MXkogfPouObRkZ2FHDG)

3\. Пролистайте Библиотеку блоков вниз, и нажмите на **Другое**

![](/files/-MXkpL4LlxvqatVOWBs6)

4\. Выберите блок **(Т123) HTML-код**

![](/files/-MXksQGhQYz77EKqwKSi)

5**.** В появившемся блоке нажмите на красную кнопку **Контент**

![](/files/-MXksmtzWoEYvO-Ffng-)

6\. В открывшимся окне вставьте скопированный код виджета (его можно получить в разделе [**Мои виджеты**](https://widget.webstoryz.com/my-widgets), нажав на кнопку **Код виджета**) и нажмите **Сохранить и закрыть**

![](/files/-MXktBzD-HzliFqWfTCE)

7\. Нажмите **Опубликовать**

![](/files/-MXkta7GPQogmSuJ_LGu)

### Установка на всех страницах

Для установки виджета на всех страницах вам необходимо [создать отдельную страницу в Tilda и указать ее как **Header** сайта](https://tilda.cc/ru/answers/a/header/).

## Установка виджета с помощью Нулевого блока

{% hint style="info" %}
Рекомендуем использовать этот способ, если вы хотите вручную настроить расположение виджета на странице, а размещение по центру вам не подходит.
{% endhint %}

1 .Откройте нужную страницу в Tilda

2\. Добавьте новый блок  

![Значок + появляется при наведении на пунктирную линию](/files/-MXkogfPouObRkZ2FHDG)

3**.** Пролистайте Библиотеку блоков вниз, и нажмите на **Нулевой блок**

![](/files/-MXku_YKWoyrgrTdWQTS)

4\. В появившемся блоке нажмите на красную кнопку **Редактировать блок**

![](/files/-MXkuku9Rv6ZvOdPXm4R)

5\. В левом верхнем углу нажмите на значок **+**

![](/files/-MXkut4oTm4Un0oWvOeK)

6\. В открывшимся окне выберите **Add HTML**

![](/files/-MXkv7POlOuZygQC2eN_)

7\. Дважды нажмите на появившийся блок

![](/files/-MXkvG8BRX8rZr-wxs-_)

8\. В открывшимся окне вставьте скопированный код виджета (его можно получить в разделе [**Мои виджеты**](https://widget.webstoryz.com/my-widgets), нажав на кнопку **Код виджета**) и нажмите **Close & Update**

![](/files/-MXkvUPvyhIqzuwRG1y2)

9\. Настройте расположение и размер блока на свое усмотрение. Не забудьте изменить версии для мобильных и планшетов нажав на соответствующие значки сверху <img src="/files/-MXgiZbLA1_8t3EN3E08" alt="" data-size="original">&#x20;

10\. Нажмите **Save,** затем **Close**

![](/files/-MXkyiA2Jqt2U6cqouqb)

11\. Нажмите **Опубликовать**

![](/files/-MXkyqrGLA6xOsVvYfKZ)

{% hint style="success" %}
**Вы добавили Webstoryz виджет на свой сайт!**

Если вы испытываете трудности с установкой виджета на сайт, то напишите нам в Telegram [@webstoryz\_support](https://t.me/webstoryz_support)
{% endhint %}