For Marketplace
Search
K

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

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

// 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 описано в разделе Аутентификация

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

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

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

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

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

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

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

Виджет отсылает родительской странице результат верификации, который можно обработать в js коде:
// код на сайте:
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);
}
}
}