diff --git a/spine-ts/widget/example/iframe-local.html b/spine-ts/widget/example/iframe-local.html
new file mode 100644
index 000000000..1f470102d
--- /dev/null
+++ b/spine-ts/widget/example/iframe-local.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<script src="../../build/spine-widget.js"></script>
+	<link rel="stylesheet" href="../css/spine-player.css">
+</head>
+
+<style>
+html, body {
+	margin: 0;
+	padding: 0;
+}
+* {
+	box-sizing: border-box;
+}
+</style>
+
+<body>
+	<div id="player"></div>
+</body>
+<script>
+	window.addEventListener("message", function (event) {
+		new spine.SpinePlayer(document.getElementById("player"), event.data);
+	}, false);
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/spine-ts/widget/example/iframe-test.html b/spine-ts/widget/example/iframe-test.html
new file mode 100644
index 000000000..93dcb4ae7
--- /dev/null
+++ b/spine-ts/widget/example/iframe-test.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<style>
+iframe {
+	border: none;
+}
+</style>
+
+<body>
+	<!--<iframe id="player" src="http://esotericsoftware.com/spine-player/3.7/iframe.html" width="600" height="480"></iframe>-->
+	<iframe id="player" src="http://localhost:8000/widget/example/iframe-local.html" width="600" height="480"></iframe>
+</body>
+<script>
+	var player = document.getElementById("player");
+	var playerConfig = {
+		atlasUrl: "http://esotericsoftware.com/files/examples/spineboy/export/spineboy-pma.atlas",
+		jsonUrl: "http://esotericsoftware.com/files/examples/spineboy/export/spineboy-pro.json",
+		premultipliedAlpha: true
+	};
+	player.addEventListener("load", function () {
+		player.contentWindow.postMessage(playerConfig, "*");
+	});
+</script>
+</html>
\ No newline at end of file
diff --git a/spine-ts/widget/example/iframe.html b/spine-ts/widget/example/iframe.html
new file mode 100644
index 000000000..b205f2f5a
--- /dev/null
+++ b/spine-ts/widget/example/iframe.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<script src="./spine-widget.js"></script>
+	<link rel="stylesheet" href="./spine-player.css">
+</head>
+
+<style>
+html, body {
+	margin: 0;
+	padding: 0;
+}
+* {
+	box-sizing: border-box;
+}
+</style>
+
+<body>
+	<div id="player"></div>
+</body>
+<script>
+	window.addEventListener("message", function (event) {
+		new spine.SpinePlayer(document.getElementById("player"), event.data);
+	}, false);
+</script>
+</body>
+</html>
\ No newline at end of file
