> 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 сайта**. 

![](https://3776302887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdOUy5z6bFR2lVbnY-R%2Fuploads%2FSGBUFKo6slI2ZBjbFr4m%2Fimage.png?alt=media\&token=007b1d15-c65d-4673-8386-c0210c0d5c92)

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

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

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

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

![](https://3776302887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdOUy5z6bFR2lVbnY-R%2Fuploads%2F0qF6C0QXV2cbPxvJYqAR%2Fimage.png?alt=media\&token=e41d527b-8d86-40f0-8782-309e2d411aea)

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

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

![](https://3776302887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdOUy5z6bFR2lVbnY-R%2Fuploads%2FWCn3WsIaCo2I97935mCa%2Fimage.png?alt=media\&token=27496c8d-a652-416a-afcd-69740296e7db)

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

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

![](https://3776302887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdOUy5z6bFR2lVbnY-R%2Fuploads%2FDG10DQkPnfRtuKUHOV7X%2Fimage.png?alt=media\&token=aff6884e-d5f0-40d6-ad0b-d868167ee68e)

#### 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;

![](https://3776302887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdOUy5z6bFR2lVbnY-R%2Fuploads%2F09nfe4AkkC7EdHhKjwcG%2Fimage.png?alt=media\&token=a24f38b0-55d6-4ae2-b3b3-ab44e8f52115)

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

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

```
<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>
```

### Примеры

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

![](https://3776302887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdOUy5z6bFR2lVbnY-R%2Fuploads%2FmRDHqOcHVHAx3QWsYgSG%2F%D1%81%D1%81%D1%81%D1%81.png?alt=media\&token=9390366f-0991-4f3b-9454-87adaf3ad409) ![](https://3776302887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdOUy5z6bFR2lVbnY-R%2Fuploads%2F67Qq0Yu6CjOxHsPVvi8H%2F%D0%BF%D1%80%D0%BF.png?alt=media\&token=99e97da8-c4b0-4c6c-98b3-83d6646f835a)

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

![](https://3776302887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdOUy5z6bFR2lVbnY-R%2Fuploads%2Ffr9k0weXOmMgS8DkOKy2%2Fimage.png?alt=media\&token=56b2e16b-c458-49c7-a8fd-e105070a88df)