gongstr/hosting_frame.html

## hosting_frame.html
<html>
<script>
  window.addEventListener("message", ({ data }) => {
    const sandbox = document.getElementById("sandbox");
    console.log(data);
    if (data.name === "survey.closed") {
      sandbox.style.height = "0px";
      sandbox.style.width = "0px" ;
      sandbox.style.opacity = 0;
      return;
    } else if (data.name === "survey.height") {
      sandbox.style.height = data.contentFrameHeight+"px";
      sandbox.style.width = "360px" ;
      sandbox.style.opacity = 1;
      return;
    }
  });
</script>
<style>
  #sandbox {
    position: fixed;
    bottom: 0px;
    right: 0px;
    background: gray;
    opacity: 0;
    height: 0px;
    width: 0px;
  }
</style>

<body>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. In fermentum posuere urna nec. Morbi blandit cursus risus at ultrices. Eget nullam non nisi est sit. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Dolor purus non enim praesent elementum facilisis leo. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Risus in hendrerit gravida rutrum quisque non. Scelerisque varius morbi enim nunc faucibus. Nulla facilisi etiam dignissim diam quis.</p>
    <p>Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Enim neque volutpat ac tincidunt. Porttitor lacus luctus accumsan tortor posuere ac ut. Semper quis lectus nulla at volutpat diam ut. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Tellus id interdum velit laoreet. Vel pharetra vel turpis nunc eget. Ultrices neque ornare aenean euismod elementum nisi. Natoque penatibus et magnis dis parturient. Aliquet lectus proin nibh nisl condimentum id venenatis. Aenean vel elit scelerisque mauris pellentesque. Urna nunc id cursus metus aliquam. Habitant morbi tristique senectus et netus. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Lacinia at quis risus sed vulputate odio ut enim. Arcu ac tortor dignissim convallis aenean et. Nunc id cursus metus aliquam eleifend mi. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Augue interdum velit euismod in pellentesque massa placerat duis. Elementum tempus egestas sed sed risus pretium.</p>
    <p>Ut aliquam purus sit amet luctus. Tortor vitae purus faucibus ornare. Gravida cum sociis natoque penatibus et magnis dis parturient montes. Augue ut lectus arcu bibendum at varius vel pharetra vel. Proin sed libero enim sed faucibus turpis in eu. Ornare lectus sit amet est placerat in egestas erat. Tempus egestas sed sed risus pretium quam vulputate dignissim. Pulvinar pellentesque habitant morbi tristique senectus et. Elementum eu facilisis sed odio morbi quis. In mollis nunc sed id semper. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Vitae ultricies leo integer malesuada. Consequat interdum varius sit amet mattis vulputate enim. In pellentesque massa placerat duis. Quis viverra nibh cras pulvinar mattis nunc sed blandit. Sagittis vitae et leo duis ut diam quam nulla. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Nisl pretium fusce id velit ut tortor pretium viverra. Nec tincidunt praesent semper feugiat nibh sed pulvinar.</p>
    <p>Feugiat in ante metus dictum at tempor commodo. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Ut sem viverra aliquet eget sit amet tellus cras. Amet tellus cras adipiscing enim eu turpis egestas pretium. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Velit laoreet id donec ultrices tincidunt arcu. Nunc lobortis mattis aliquam faucibus purus in massa tempor. Nec ullamcorper sit amet risus nullam. Vel risus commodo viverra maecenas accumsan lacus. Mattis molestie a iaculis at erat pellentesque adipiscing. Nibh tellus molestie nunc non. Tortor consequat id porta nibh venenatis cras sed felis eget. Scelerisque eu ultrices vitae auctor eu. Donec pretium vulputate sapien nec. Ut morbi tincidunt augue interdum velit euismod.</p>
    <p>Felis bibendum ut tristique et egestas. Sit amet tellus cras adipiscing enim. Pellentesque elit eget gravida cum sociis natoque. Auctor elit sed vulputate mi sit. Ornare massa eget egestas purus viverra accumsan. Pellentesque id nibh tortor id. In egestas erat imperdiet sed euismod nisi porta. Nibh mauris cursus mattis molestie a iaculis. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Morbi leo urna molestie at elementum eu facilisis sed. Sagittis purus sit amet volutpat consequat mauris nunc. Est sit amet facilisis magna etiam tempor orci eu lobortis. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Pharetra sit amet aliquam id diam maecenas. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque. Eu facilisis sed odio morbi quis commodo odio aenean sed.</p>
  </div>
</body>

<iframe id="sandbox" src="sandbox_frame.html" frameborder="0" />

</html>

## sandbox_frame.html
<html>
  <script>
    // load the Sprig SDK via snippet configured to Sprig's sandbox environment
    (function (l, e, a, p) {
      if (window.Sprig) return;
      window.Sprig = function () {
        S._queue.push(arguments);
      };
      var S = window.Sprig;
      S.appId = a;
      S.config = {
        envId: a,
    };
      S._queue = [];
      window.UserLeap = S;
      a = l.createElement("script");
      a.src = e;
      a.async = 1;
      p = l.getElementsByTagName("script")[0];
      p.parentNode.insertBefore(a, p);
    })(document, "https://cdn.sprig.com/shim.js", "eehOZKXYNPyh");
    // set the survey to occupie the sandbox frame
    Sprig.maxHeight = "100vh";
    Sprig('addListener', 'survey.height', (e) => {
        window.parent.postMessage(e, "*");
      });
    Sprig('addListener', 'survey.closed', (e) => {
      window.parent.postMessage(e, "*");
    });
    Sprig('track', 'Sandbox Test');
  </script>
  <body></body>
</html>
	<html>
	<script>
	window.addEventListener("message", ({ data }) => {
	const sandbox = document.getElementById("sandbox");
	console.log(data);
	if (data.name === "survey.closed") {
	sandbox.style.height = "0px";
	sandbox.style.width = "0px" ;
	sandbox.style.opacity = 0;
	return;
	} else if (data.name === "survey.height") {
	sandbox.style.height = data.contentFrameHeight+"px";
	sandbox.style.width = "360px" ;
	sandbox.style.opacity = 1;
	return;
	}
	});
	</script>
	<style>
	#sandbox {
	position: fixed;
	bottom: 0px;
	right: 0px;
	background: gray;
	opacity: 0;
	height: 0px;
	width: 0px;
	}
	</style>

	<body>
	<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. In fermentum posuere urna nec. Morbi blandit cursus risus at ultrices. Eget nullam non nisi est sit. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Dolor purus non enim praesent elementum facilisis leo. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Risus in hendrerit gravida rutrum quisque non. Scelerisque varius morbi enim nunc faucibus. Nulla facilisi etiam dignissim diam quis.</p>
	<p>Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Enim neque volutpat ac tincidunt. Porttitor lacus luctus accumsan tortor posuere ac ut. Semper quis lectus nulla at volutpat diam ut. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Tellus id interdum velit laoreet. Vel pharetra vel turpis nunc eget. Ultrices neque ornare aenean euismod elementum nisi. Natoque penatibus et magnis dis parturient. Aliquet lectus proin nibh nisl condimentum id venenatis. Aenean vel elit scelerisque mauris pellentesque. Urna nunc id cursus metus aliquam. Habitant morbi tristique senectus et netus. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Lacinia at quis risus sed vulputate odio ut enim. Arcu ac tortor dignissim convallis aenean et. Nunc id cursus metus aliquam eleifend mi. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Augue interdum velit euismod in pellentesque massa placerat duis. Elementum tempus egestas sed sed risus pretium.</p>
	<p>Ut aliquam purus sit amet luctus. Tortor vitae purus faucibus ornare. Gravida cum sociis natoque penatibus et magnis dis parturient montes. Augue ut lectus arcu bibendum at varius vel pharetra vel. Proin sed libero enim sed faucibus turpis in eu. Ornare lectus sit amet est placerat in egestas erat. Tempus egestas sed sed risus pretium quam vulputate dignissim. Pulvinar pellentesque habitant morbi tristique senectus et. Elementum eu facilisis sed odio morbi quis. In mollis nunc sed id semper. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Vitae ultricies leo integer malesuada. Consequat interdum varius sit amet mattis vulputate enim. In pellentesque massa placerat duis. Quis viverra nibh cras pulvinar mattis nunc sed blandit. Sagittis vitae et leo duis ut diam quam nulla. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Nisl pretium fusce id velit ut tortor pretium viverra. Nec tincidunt praesent semper feugiat nibh sed pulvinar.</p>
	<p>Feugiat in ante metus dictum at tempor commodo. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Ut sem viverra aliquet eget sit amet tellus cras. Amet tellus cras adipiscing enim eu turpis egestas pretium. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Velit laoreet id donec ultrices tincidunt arcu. Nunc lobortis mattis aliquam faucibus purus in massa tempor. Nec ullamcorper sit amet risus nullam. Vel risus commodo viverra maecenas accumsan lacus. Mattis molestie a iaculis at erat pellentesque adipiscing. Nibh tellus molestie nunc non. Tortor consequat id porta nibh venenatis cras sed felis eget. Scelerisque eu ultrices vitae auctor eu. Donec pretium vulputate sapien nec. Ut morbi tincidunt augue interdum velit euismod.</p>
	<p>Felis bibendum ut tristique et egestas. Sit amet tellus cras adipiscing enim. Pellentesque elit eget gravida cum sociis natoque. Auctor elit sed vulputate mi sit. Ornare massa eget egestas purus viverra accumsan. Pellentesque id nibh tortor id. In egestas erat imperdiet sed euismod nisi porta. Nibh mauris cursus mattis molestie a iaculis. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Morbi leo urna molestie at elementum eu facilisis sed. Sagittis purus sit amet volutpat consequat mauris nunc. Est sit amet facilisis magna etiam tempor orci eu lobortis. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Pharetra sit amet aliquam id diam maecenas. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque. Eu facilisis sed odio morbi quis commodo odio aenean sed.</p>
	</div>
	</body>

	<iframe id="sandbox" src="sandbox_frame.html" frameborder="0" />

	</html>
	<html>
	<script>
	// load the Sprig SDK via snippet configured to Sprig's sandbox environment
	(function (l, e, a, p) {
	if (window.Sprig) return;
	window.Sprig = function () {
	S._queue.push(arguments);
	};
	var S = window.Sprig;
	S.appId = a;
	S.config = {
	envId: a,
	};
	S._queue = [];
	window.UserLeap = S;
	a = l.createElement("script");
	a.src = e;
	a.async = 1;
	p = l.getElementsByTagName("script")[0];
	p.parentNode.insertBefore(a, p);
	})(document, "https://cdn.sprig.com/shim.js", "eehOZKXYNPyh");
	// set the survey to occupie the sandbox frame
	Sprig.maxHeight = "100vh";
	Sprig('addListener', 'survey.height', (e) => {
	window.parent.postMessage(e, "*");
	});
	Sprig('addListener', 'survey.closed', (e) => {
	window.parent.postMessage(e, "*");
	});
	Sprig('track', 'Sandbox Test');
	</script>
	<body></body>
	</html>