# Встраивание в 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);
      }
  }
}
```


---

# 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://docs.payanyway.ru/marketplace/zaprosy-dlya-registracii-fl/identifikaciya-s-pomoshyu-monetaid/vstraivanie-v-iframe.md?ask=<question>
```

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.