> For the complete documentation index, see [llms.txt](https://docs.payanyway.ru/marketplace/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.payanyway.ru/marketplace/zaprosy-dlya-registracii-fl/identifikaciya-s-pomoshyu-monetaid/vstraivanie-v-iframe.md).

# Встраивание в iframe

## Код для вставки виджета в iframe

```markup
// DEV окружение
<iframe 
    src="https://mid-ui.dev.mnxsc.tech/?token={PARTNER_TOKEN}"
    style="
    width: 400px; 
    height: 640px; 
    border: 1px solid #CCC; 
    border-radius: 10px">
</iframe>


// PROD окружение
<iframe 
    src="https://mid-ui.prod.mnxsc.tech/?token={PARTNER_TOKEN}"
    style="
    width: 400px; 
    height: 640px; 
    border: 1px solid #CCC; 
    border-radius: 10px">
</iframe>
```

* Рекомендуемые размеры iframe: 400 x 640
* формирование PARTNER\_TOKEN описано в разделе [Аутентификация](https://docs.payanyway.ru/marketplace/zaprosy-dlya-registracii-fl/identifikaciya-s-pomoshyu-monetaid/autentifikaciya)

## Тестовая среда для настройки внешнего вида

Для более точной настройки внешнего вида виджета, можно воспользоваться тестовой средой, где можно регулировать размер iframe и цветовые темы:

{% embed url="<https://mid-api.dev.mnxsc.tech/iframe-test.html>" %}

## Ограничения использования iframe

| Ограничение                                                                                                                                                                                                                                                                          | Решение                                                                                                                                                 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>Не работает вставка <strong>https</strong> iframe в <strong>http</strong> родителя.</p><p></p><p><code>Пример</code>:</p><p>На страницу по адресу <strong>http</strong>://localhost:8080</p><p>Добавлен код \<iframe src="<strong>https</strong>://mid-ui.dev.mnxsc.tech/..."</p> | <p>Браузеры ограничивают возможности таких iframe, поэтому для тестов нужен https родитель:</p><p>Например: <strong>https</strong>://localhost:8080</p> |

## Настройка внешнего вида виджета

Тестировать внешний вид можно в нашей [тестовой среде.](broken://pages/-MNYXB1gkdQc7Tukrucm#testovaya-sreda-dlya-nastroiki-vneshnego-vida)

В урле виджета можно передавать следующие параметры для настройки внешнего вида:

| Параметр         | Описание                              | Значение по-умолчанию | Возможнные значения                                                                                                                       | Пример              |
| ---------------- | ------------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| **t-main-color** | основной цвет кнопок и ссылок виджета | 00C489                | HEX значение цвета                                                                                                                        | `?t-main-color=CCC` |
| **t-font**       | шрифт виджета                         | Roboto                | <p>Пока что только Roboto и системные шрифты браузера.<br></p><p>При необходимости можно будет добавить другие веб-шрифты как Roboto.</p> | `?t-font=arial`     |

## Получение событий из iframe

Виджет отсылает родительской странице результат верификации, который можно обработать в js коде:

```javascript
// код на сайте:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {

  // событие от виджета
  if(event.origin === 'https://mid-ui.prod.mnxsc.tech'){
  
      const data = event.data || {};
      
      const type = data.type;
      const value = data.value;
      
      if(type === 'status'){
      
          // value is "InProgress" | "Verified" | "VerificationFailed"
          console.log('verification status', value);
      }
  }
}
```