lagden/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Agrega</title>
		<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
		<link href="./agrega/main.css" rel="stylesheet" type="text/css">
		<!-- Folha de estilo do iframe do Nimble + FormAgrega -->
		<style>
			#texAppPlace {
				width: 100%;
				position: relative;
				display: block;
				flex: 1 1 100%;
			}

			#agregaAppIframe,
			#nimbleAppIframe {
				width: 100%;
				min-height: 100%;
				display: block;
				margin: 0 auto;
				background: transparent;
			}
		</style>
	</head>
	<body class="grid">
		<header class="grid__head">
			<h1 class="corretora">Corretora</h1>
			<img class="logo" src="./agrega/logo.svg" alt="Liberty">
		</header>

		<!-- Local onde será criado o iframe-->
		<main class="grid__main" id="texAppPlace" data-nimble="https://agrega-dev.nimble.com.br" data-color="#A4C14A"></main>

		<footer class="grid__foot">Copyright © 2018 TEx Tecnologia. All rights reserved.</footer>

		<!-- Snippet -->
		<script src="https://assets.nimble.com.br/snippet/iframeResizer/3.5.7/iframeResizer.min.js"></script>
		<script src="https://agrega-dev.nimble.com.br/snippet.js"></script>

		<!-- Inicializa Form -->
		<script src="./agrega/module.js" type="module"></script>
	</body>
</html>

## main.css
body,
html {
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

.grid {
	width: 100%;
	/*min-height: 100vh;*/
	display: grid;
	grid-gap: 0;
	grid-auto-flow: dense;
	/*grid-template-columns: 1fr;*/
	grid-template-rows: 120px 1fr 70px;
	grid-template-areas: "head head"
                       "main main"
                       "foot foot";
}

.grid__head {
	grid-area: head;
	background-color: #C3C3C3;
	color: white;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.grid__main {
	grid-area: main;
	background-color: #f1f1f1;
	min-height: calc(100vh - 120px - 70px);
}

.grid__foot {
	grid-area: foot;
	background-color: #9F9F9F;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo {
	width: 150px;
	padding: 1em;
}

.corretora {
	padding: 1em;
	margin: 0
}

## module.js
/* globals document, window, iFrameResize, texNimbleSnippet */
'use strict'

const formOrigin = 'https://api.nimble.com.br'
const formUrl = `${formOrigin}/agrega-form/v1`

// Iframe do formulário do Agrega
let iframeAgrega

// Helpers
// Convert obj para querystring
function _obj2qs(obj) {
	const arr = []
	Object.keys(obj).forEach(k => {
		arr.push(`${k}=${obj[k]}`)
	})
	return arr.join('&')
}

// Handler (iframe)
function _formLoad() {
	this.removeEventListener('load', _formLoad, false)
	if ('iFrameResize' in window) {
		iFrameResize({heightCalculationMethod: 'taggedElement'}, '#' + this.id)
	}
}

// Cria iframe
function _criaIframe(id, baseUrl, place, _onLoad) {
	const docFragment = document.createDocumentFragment()
	iframeAgrega = document.createElement('iframe')
	iframeAgrega.id = id
	iframeAgrega.src = baseUrl + '/' + window.location.search
	iframeAgrega.scrolling = 'no'
	iframeAgrega.frameBorder = 0
	docFragment.appendChild(iframeAgrega)
	place.appendChild(docFragment)
	iframeAgrega.addEventListener('load', _onLoad, false)
}

// Carrega o formulário do Agrega no iframe
function initAgrega() {
	const place = document.querySelector('#texAppPlace')
	_criaIframe('agregaAppIframe', formUrl, place, _formLoad)
}

// Helpers do postMessage
// Esconde o form do Agrega
function _removeAgregaForm(cb) {
	iframeAgrega.style.display = 'none'
	cb()
}

// Helpers do postMessage
// Carrega o Nimble se o item Automóvel foi checado
function _carregaNimble(data) {
	data.useFB = 0
	const qs = window.location.search + (window.location.search === '' ? '?' : '&') + _obj2qs(data)
	const place = document.querySelector('#texAppPlace')
	texNimbleSnippet(place, qs)
}

// Handler (postMessage) do FormAgrega
function _postMessageFormAgrega(event) {
	const origin = event.origin || event.originalEvent.origin

	// Valida a origin do postMessage
	if (origin !== formOrigin) {
		return
	}

	// Verifica a existência de dados
	const message = event.data
	if (!message || !message.type) {
		return false
	}

	// Manipuladores
	switch (message.type) {
		case 'agregaForm.nimble':
			_removeAgregaForm(() => _carregaNimble(message.data))
			break

		default:
			console.debug(`message.type(${message.type}) sem manipulador`)
	}
}

// Listener (postMessage)
window.addEventListener('message', _postMessageFormAgrega, false)

// Init
initAgrega()
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Agrega</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
	<link href="./agrega/main.css" rel="stylesheet" type="text/css">
	<!-- Folha de estilo do iframe do Nimble + FormAgrega -->
	<style>
	#texAppPlace {
	width: 100%;
	position: relative;
	display: block;
	flex: 1 1 100%;
	}

	#agregaAppIframe,
	#nimbleAppIframe {
	width: 100%;
	min-height: 100%;
	display: block;
	margin: 0 auto;
	background: transparent;
	}
	</style>
	</head>
	<body class="grid">
	<header class="grid__head">
	<h1 class="corretora">Corretora</h1>
	<img class="logo" src="./agrega/logo.svg" alt="Liberty">
	</header>

	<!-- Local onde será criado o iframe-->
	<main class="grid__main" id="texAppPlace" data-nimble="https://agrega-dev.nimble.com.br" data-color="#A4C14A"></main>

	<footer class="grid__foot">Copyright © 2018 TEx Tecnologia. All rights reserved.</footer>

	<!-- Snippet -->
	<script src="https://assets.nimble.com.br/snippet/iframeResizer/3.5.7/iframeResizer.min.js"></script>
	<script src="https://agrega-dev.nimble.com.br/snippet.js"></script>

	<!-- Inicializa Form -->
	<script src="./agrega/module.js" type="module"></script>
	</body>
	</html>
	body,
	html {
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	}

	.grid {
	width: 100%;
	/min-height: 100vh;/
	display: grid;
	grid-gap: 0;
	grid-auto-flow: dense;
	/grid-template-columns: 1fr;/
	grid-template-rows: 120px 1fr 70px;
	grid-template-areas: "head head"
	"main main"
	"foot foot";
	}

	.grid__head {
	grid-area: head;
	background-color: #C3C3C3;
	color: white;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	}

	.grid__main {
	grid-area: main;
	background-color: #f1f1f1;
	min-height: calc(100vh - 120px - 70px);
	}

	.grid__foot {
	grid-area: foot;
	background-color: #9F9F9F;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.logo {
	width: 150px;
	padding: 1em;
	}

	.corretora {
	padding: 1em;
	margin: 0
	}
	/* globals document, window, iFrameResize, texNimbleSnippet */
	'use strict'

	const formOrigin = 'https://api.nimble.com.br'
	const formUrl = `${formOrigin}/agrega-form/v1`

	// Iframe do formulário do Agrega
	let iframeAgrega

	// Helpers
	// Convert obj para querystring
	function _obj2qs(obj) {
	const arr = []
	Object.keys(obj).forEach(k => {
	arr.push(`${k}=${obj[k]}`)
	})
	return arr.join('&')
	}

	// Handler (iframe)
	function _formLoad() {
	this.removeEventListener('load', _formLoad, false)
	if ('iFrameResize' in window) {
	iFrameResize({heightCalculationMethod: 'taggedElement'}, '#' + this.id)
	}
	}

	// Cria iframe
	function _criaIframe(id, baseUrl, place, _onLoad) {
	const docFragment = document.createDocumentFragment()
	iframeAgrega = document.createElement('iframe')
	iframeAgrega.id = id
	iframeAgrega.src = baseUrl + '/' + window.location.search
	iframeAgrega.scrolling = 'no'
	iframeAgrega.frameBorder = 0
	docFragment.appendChild(iframeAgrega)
	place.appendChild(docFragment)
	iframeAgrega.addEventListener('load', _onLoad, false)
	}

	// Carrega o formulário do Agrega no iframe
	function initAgrega() {
	const place = document.querySelector('#texAppPlace')
	_criaIframe('agregaAppIframe', formUrl, place, _formLoad)
	}

	// Helpers do postMessage
	// Esconde o form do Agrega
	function _removeAgregaForm(cb) {
	iframeAgrega.style.display = 'none'
	cb()
	}

	// Helpers do postMessage
	// Carrega o Nimble se o item Automóvel foi checado
	function _carregaNimble(data) {
	data.useFB = 0
	const qs = window.location.search + (window.location.search === '' ? '?' : '&') + _obj2qs(data)
	const place = document.querySelector('#texAppPlace')
	texNimbleSnippet(place, qs)
	}

	// Handler (postMessage) do FormAgrega
	function _postMessageFormAgrega(event) {
	const origin = event.origin \|\| event.originalEvent.origin

	// Valida a origin do postMessage
	if (origin !== formOrigin) {
	return
	}

	// Verifica a existência de dados
	const message = event.data
	if (!message \|\| !message.type) {
	return false
	}

	// Manipuladores
	switch (message.type) {
	case 'agregaForm.nimble':
	_removeAgregaForm(() => _carregaNimble(message.data))
	break

	default:
	console.debug(`message.type(${message.type}) sem manipulador`)
	}
	}

	// Listener (postMessage)
	window.addEventListener('message', _postMessageFormAgrega, false)

	// Init
	initAgrega()