> For the complete documentation index, see [llms.txt](https://help.fosci.cloud/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fosci.cloud/vidzhet-na-sait.md).

# Виджет на сайт

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

### Настройка в системе:

#### 1. Cписок сайтов

Внесите список URL сайтов на которых вы планируете размещать виджет **Настройка- Настройки виджетов - URL сайта**. 

![](/files/BWIbmgIcQq7GfhAKktBp)

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

#### 2. Настройки отображения

{% hint style="warning" %}
ВАЖНО! при заполнении программ соблюдайте последовательность - сначала Производственные, потом Маркетинговые
{% endhint %}

В Производственных программах **Производство - Справочники - Производственные программы** зайдите в программу, которую планируете опубликовать в виджете, включаете чек бокс «Отображать на сайте» и выбираете нужные сайты из списка, введенные в п1. 

![](/files/uWOdBoqC7FG2Ice56Qja)

В Маркетинговых программах **Клиенты - Настройки - Маркетинговые программы** пройдите те же шаги, что и в Маркетинговых

К программе можно создать небольшое описание 

![](/files/gZXZC0QjJV5ZTQGf1dHb)

#### 3. Настройки дизайна

В **Настройки - Настройки виджетов - Настройки виджетов** загрузите свой логотип и в настройках виджета заказов выбираете фирменный цвет

![](/files/q54xLwvm29X8vVy5w6Am)

#### 4. Встройка на сайт

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

```
<script src="https://client.st1.fosci.cloud/fosci-order/fosci-widget.js"></script> 
<fosci-element
  host="https://client.<ваш_домен>.fosci.cloud/order-widget"
  createHost="https://<ваш_домен>.fosci.cloud/api"
  referer="FosciReferer"
  widget_form_id="адрес_сайта"></fosci-element>
```

<ваш\_домен> замените на имя вашей системы. Его можно увидеть в строке адреса в браузере перед fosci.cloud. Пример, здесь имя системы - demo&#x20;

![](/files/m5nqNasIMvSoJ4fKcdno)

адрес\_сайта замените на название сайта или страницы, на который вставляете виджет, чтобы нам легче было искать ошибки.

В нашем примере получилось так:

```
<script src="https://client.st1.fosci.cloud/fosci-order/fosci-widget.js"></script> 
<fosci-element
  host="https://client.demo.fosci.cloud/order-widget"
  createHost="https://demo.fosci.cloud/api"
  referer="FosciReferer"
  widget_form_id="bestfood.ru"></fosci-element>
```

### Примеры

Вы можете сделать отдельную мобильную страницу, вставить на нее виджет, а ссылку прикрепить в шапке профиля в Инстаграм

![](/files/qfIrd35qMPnPY2s2eskN) ![](/files/clotKn64UqlSfZikVokj)

Или сделать постоянный виджет в полной версии сайта&#x20;

![](/files/iPVB2Kmm2v8bPDO757rp)