diff --git a/scripts/system/fingerPaint/fingerPaint.js b/scripts/system/fingerPaint/fingerPaint.js
index 722e7818fd..11e9169137 100644
--- a/scripts/system/fingerPaint/fingerPaint.js
+++ b/scripts/system/fingerPaint/fingerPaint.js
@@ -12,7 +12,20 @@
     var tablet,
         button,
         BUTTON_NAME = "PAINT",
+        //undo vars
+        UNDO_STACK_SIZE = 5, 
+        undoStack = [];
         isFingerPainting = false,
+        //dynamic brush vars
+        /*9isDynamicBrushEnabled = false,
+        isDynamicBrushRunning = false,
+        DYNAMIC_BRUSH_UPDATE_TIME = 100,
+        lastFrameTime = Date.now(),
+        frameDeltaSeconds = null, //time that passed between frames in milliseconds
+        stopDynamicBrush = false,
+        prevBrushWidth = 0,
+        DYNAMIC_BRUSH_TIME = 50, //inteval in milliseconds to update the brush width
+        DYNAMIC_BRUSH_INCREMENT = 0.01, //linear increment of brush size */
         leftHand = null,
         rightHand = null,
         leftBrush = null,
@@ -22,11 +35,11 @@
         isTabletDisplayed = false,
         HIFI_POINT_INDEX_MESSAGE_CHANNEL = "Hifi-Point-Index",
         HIFI_GRAB_DISABLE_MESSAGE_CHANNEL = "Hifi-Grab-Disable",
-        HIFI_POINTER_DISABLE_MESSAGE_CHANNEL = "Hifi-Pointer-Disable";
+        HIFI_POINTER_DISABLE_MESSAGE_CHANNEL = "Hifi-Pointer-Disable",
+        SCRIPT_PATH = Script.resolvePath('')
+        CONTENT_PATH = SCRIPT_PATH.substr(0, SCRIPT_PATH.lastIndexOf('/')),
+        APP_URL = CONTENT_PATH + "/html/main.html";
 
-        
-        
-    
     // Set up the qml ui
     var qml = Script.resolvePath('PaintWindow.qml');
     var window = null;
@@ -38,8 +51,7 @@
     var LEFT_ANIM_URL = Script.resourcesPath() + 'avatar/animations/touch_point_closed_left.fbx';
 	var RIGHT_ANIM_URL_OPEN = Script.resourcesPath() + 'avatar/animations/touch_point_open_right.fbx';
     var LEFT_ANIM_URL_OPEN = Script.resourcesPath() + 'avatar/animations/touch_point_open_left.fbx'; 
-        
-
+    
     function paintBrush(name) {
         // Paints in 3D.
         var brushName = name,
@@ -60,9 +72,7 @@
             MIN_STROKE_LENGTH = 0.005,  // m
             MIN_STROKE_INTERVAL = 66,  // ms
             MAX_POINTS_PER_LINE = 70;  // Hard-coded limit in PolyLineEntityItem.h.
-        
-        var undo = null;
-        
+                
         function strokeNormal() {
             return Vec3.multiplyQbyV(Camera.getOrientation(), Vec3.UNIT_NEG_Z);
         }
@@ -94,15 +104,21 @@
         }
         
         function undoErasing() {
+            var undo = undoStack.pop();
             if (undo) {
                 Entities.addEntity(undo);
-                undo = null;
             }
         }
 
         function startLine(position, width) {
             // Start drawing a polyline.
-            
+            /*if (isDynamicBrushEnabled) {
+                print("start running the dynamic brush");
+                prevBrushWidth = getStrokeWidth();
+                changeStrokeWidthMultiplier(0.1);
+                isDynamicBrushRunning = true;
+            }*/
+
             width = width * strokeWidthMultiplier;
             
             if (isDrawingLine) {
@@ -134,6 +150,7 @@
         }
 
         function drawLine(position, width) {
+            print("current brush width" + getStrokeWidth());
             // Add a stroke to the polyline if stroke is a sufficient length.
             var localPosition,
                 distanceToPrevious,
@@ -172,7 +189,8 @@
 
         function finishLine(position, width) {
             // Finish drawing polyline; delete if it has only 1 point.
-
+            //stopDynamicBrush = true;
+            print("already stopped drawing");
             width = width * strokeWidthMultiplier;
             
             if (!isDrawingLine) {
@@ -230,7 +248,7 @@
 
             // Delete found entity.
             if (found) {
-                undo = Entities.getEntityProperties(foundID);
+                addElementToUndoStack(Entities.getEntityProperties(foundID));
                 Entities.deleteEntity(foundID);
             }
         }
@@ -288,10 +306,6 @@
         function onTriggerPress(value) {
             // Controller values are only updated when they change so store latest for use in update.
             rawTriggerValue = value;
-            
-            
-            
-            
         }
 
         function updateTriggerPress(value) {
@@ -404,6 +418,29 @@
             }
         }
 
+        /*function runDynamicBrush() {
+            if (isDynamicBrushRunning) {
+                var currentBrush = isLeftHandDominant ? leftBrush : rightBrush;
+            
+                if (currentBrush.getStrokeWidth() < 2.1 && !stopDynamicBrush) {
+                    currentBrush.changeStrokeWidthMultiplier(currentBrush.getStrokeWidth() + ((frameDeltaSeconds * DYNAMIC_BRUSH_INCREMENT)/DYNAMIC_BRUSH_TIME));
+                    print("going up: " + currentBrush.getStrokeWidth());
+                }
+                if (stopDynamicBrush) {
+                    currentBrush.changeStrokeWidthMultiplier(currentBrush.getStrokeWidth() - ((frameDeltaSeconds * DYNAMIC_BRUSH_INCREMENT)/DYNAMIC_BRUSH_TIME));
+                    print("going down: " + currentBrush.getStrokeWidth());
+                }
+                if (currentBrush.getStrokeWidth() <= 0) {
+                    print("stopped: " + currentBrush.getStrokeWidth());
+                    stopDynamicBrush = false;
+                    isDynamicBrushRunning = false;
+                    print("putting back the brush width: " + prevBrushWidth);
+                    currentBrush.changeStrokeWidthMultiplier(prevBrushWidth);
+                    currentBrush.finishLine();
+                }
+            }
+        }*/
+
         function onUpdate() {
             
             //update ink Source
@@ -435,7 +472,9 @@
                 // }
                 // inkSource = Entities.addEntity(inkSourceProps);
             // }
-            
+            /*frameDeltaSeconds = Date.now() - lastFrameTime;
+            lastFrameTime = Date.now();
+            runDynamicBrush();     */     
             updateTriggerPress();
             updateGripPress();
         }
@@ -630,7 +669,9 @@
                 return;
             }
             if (message[0] === "width"){
+                print("changing brush width " + message[1]);
                 var dim = message[1]*2 +0.1;
+                print("changing brush dim " + dim);
                 //var dim2 = Math.floor( Math.random()*40 + 5);
                 leftBrush.changeStrokeWidthMultiplier(dim);
                 rightBrush.changeStrokeWidthMultiplier(dim);
@@ -641,7 +682,8 @@
                 return;
             }
             if (message[0] === "brush"){
-                
+                print("changing brush to qml " + message[1]);
+
                 //var dim2 = Math.floor( Math.random()*40 + 5);
                 leftBrush.changeTexture(message[1]);
                 rightBrush.changeTexture(message[1]);
@@ -723,6 +765,7 @@
         }
 
         if (isFingerPainting) {
+        	tablet.gotoWebScreen(APP_URL);
             enableProcessing();
         }
 
@@ -740,12 +783,89 @@
         updateHandFunctions();
     }
 
+
+    function onWebEventReceived(event){
+        print("Received Web Event: " + event);
+
+        if (typeof event === "string") {
+            event = JSON.parse(event);
+        }
+        switch (event.type) {
+            case "changeColor":
+                print("changing color...");
+                leftBrush.changeStrokeColor(event.red, event.green, event.blue);
+                rightBrush.changeStrokeColor(event.red, event.green, event.blue);
+                Overlays.editOverlay(inkSourceOverlay, {
+                    color: {red: event.red, green: event.green, blue: event.blue} 
+                });
+                break;
+
+            case "changeBrush":
+                if (event.brushName === "content/brushes/paintbrush1.png") {
+                    leftBrush.changeUVMode(false);
+                    rightBrush.changeUVMode(false);
+                } else if (event.brushName === "content/brushes/paintbrush3.png") {
+                    leftBrush.changeUVMode(false);
+                    rightBrush.changeUVMode(false);
+                } else {
+                    leftBrush.changeUVMode(true);
+                    rightBrush.changeUVMode(true);
+                }
+                print("changing brush to " + event.brushName);
+                event.brushName = CONTENT_PATH + "/" + event.brushName;
+                leftBrush.changeTexture(event.brushName);
+                rightBrush.changeTexture(event.brushName);
+                break;
+
+            case "changeLineWidth":
+                var dim = event.brushWidth*2 +0.1;
+                print("changing brush width dim to " + dim);
+                //var dim2 = Math.floor( Math.random()*40 + 5);
+                leftBrush.changeStrokeWidthMultiplier(dim);
+                rightBrush.changeStrokeWidthMultiplier(dim);
+                Overlays.editOverlay(inkSourceOverlay, {
+                    size: dim * 0.06 
+                });
+                break;
+
+            case "undo":
+                print("Going to undo");
+                /**
+                The undo is called only on the right brush because the undo stack is global, meaning that
+                calling undoErasing on both the left and right brush would cause the stack to pop twice.
+                Using the leftBrush instead of the rightBrush would have the exact same effect.
+                */
+                rightBrush.undoErasing();
+                break;
+
+            case "changeBrushHand":
+                isLeftHandDominant = event.DrawingHand == "left";
+                updateHandAnimations();
+                break;
+
+            /*case "switchDynamicBrush":
+                isDynamicBrushEnabled = event.isDynamicBrushEnabled;
+                break;*/
+
+            default:
+                break;
+        }
+    }    
+
+    function addElementToUndoStack(item)
+    {
+        if (undoStack.length + 1 > UNDO_STACK_SIZE) {
+            undoStack.splice(0, 1);
+        }
+        undoStack.push(item);
+    }
+
     function setUp() {
         tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
         if (!tablet) {
             return;
         }
-
+        tablet.webEventReceived.connect(onWebEventReceived);
         // Tablet button.
         button = tablet.addButton({
             icon: "icons/tablet-icons/finger-paint-i.svg",
diff --git a/scripts/system/fingerPaint/html/brushesTab.html b/scripts/system/fingerPaint/html/brushesTab.html
new file mode 100644
index 0000000000..f77387cbe1
--- /dev/null
+++ b/scripts/system/fingerPaint/html/brushesTab.html
@@ -0,0 +1,51 @@
+<!--Note: change the parent postmessage second parameter due to possible security issues-->
+<style>
+.brushButton {
+	max-width: 220px,
+    padding: 10px,
+    background-color: #666666
+}
+.BrushIcon {
+    padding: 10px,
+    width: 130px,
+}
+#dynamicBrush {
+    margin: 20px 0;
+}
+.selectedBrush {
+    background-color: #f4e842
+}
+</style>
+<!--<input onchange="setDynamicBrush(this)" type="checkbox" id="dynamicBrush"> Use Dynamic brush </input>-->
+<div id="brushesCointainer">
+    <button class="brushButton" id="content/brushes/paintbrush1.png" onclick="changePaintBrush(0)"><img width="130px" src="../content/brushes/paintbrush1.png" class="BrushIcon" ></button>
+    <button class="brushButton" id="content/brushes/paintbrush2.png" onclick="changePaintBrush(1)"><img width="130px" src="../content/brushes/paintbrush2.png" class="BrushIcon" ></button>
+    <button class="brushButton" id="content/brushes/paintbrush3.png" onclick="changePaintBrush(2)"><img width="130px" src="../content/brushes/paintbrush3.png" class="BrushIcon" ></button>
+    <button class="brushButton" id="content/brushes/paintbrush4.png" onclick="changePaintBrush(3)"><img width="130px" src="../content/brushes/paintbrush4.png" class="BrushIcon" ></button>
+    <button class="brushButton" id="content/brushes/paintbrush5.png" onclick="changePaintBrush(4)"><img width="130px" src="../content/brushes/paintbrush5.png" class="BrushIcon" ></button>
+    <button class="brushButton" id="content/brushes/paintbrush6.png" onclick="changePaintBrush(5)"><img width="130px" src="../content/brushes/paintbrush6.png" class="BrushIcon" ></button>
+</div>
+
+
+<script type="text/javascript">
+    var currentBrush = 5;
+    function changePaintBrush(brushIndex) {
+        var bruhes = document.getElementById("brushesCointainer").children;
+        bruhes[currentBrush].classList.remove("selectedBrush");
+        currentBrush = brushIndex;
+        bruhes[currentBrush].classList.add("selectedBrush");
+        var changedBrushEvent = {
+            "type"     : "changeBrush",
+            "brushName":  bruhes[currentBrush].id
+        };
+        parent.postMessage(JSON.stringify(changedBrushEvent), "*");
+    }
+
+    /*function setDynamicBrush(checkbox) {
+        var switchBrushEvent = {
+            "type"                 : "switchDynamicBrush",
+            "isDynamicBrushEnabled":  checkbox.checked
+        };
+        parent.postMessage(JSON.stringify(switchBrushEvent), "*");
+    }*/
+</script>
\ No newline at end of file
diff --git a/scripts/system/fingerPaint/html/chooseHandTab.html b/scripts/system/fingerPaint/html/chooseHandTab.html
new file mode 100644
index 0000000000..ac4cae77a3
--- /dev/null
+++ b/scripts/system/fingerPaint/html/chooseHandTab.html
@@ -0,0 +1,35 @@
+<!--Note: change the parent postmessage second parameter due to possible security issues-->
+<style type="text/css">
+    .changeHandButton {
+        width: 200px;
+        height: 200px;
+    }
+    .brushButton {
+        max-width: 220px,
+        padding: 10px,
+        background-color: #666666
+    }
+    .selectedHand {
+        background-color: #f4e842
+    }
+</style>
+
+<div id="handButtonsContainer" >
+    <button class="changeHandButton" id="left" onclick="chooseHand(0)">Left</button>
+    <button class="changeHandButton selectedHand" id="right" onclick="chooseHand(1)">Right</button>
+</div>
+
+<script type="text/javascript">
+    var currentHand = 1;
+    function chooseHand(handIndex) {
+        handButtons = document.getElementById("handButtonsContainer").children;
+        handButtons[currentHand].classList.remove("selectedHand");
+        currentHand = handIndex;
+        handButtons[currentHand].classList.add("selectedHand");
+        var chooseHandEvent = {
+            "type"       : "changeBrushHand",
+            "DrawingHand": handButtons[handIndex].id
+        };
+        parent.postMessage(JSON.stringify(chooseHandEvent), "*");
+    }
+</script>
\ No newline at end of file
diff --git a/scripts/system/fingerPaint/html/colorsTab.html b/scripts/system/fingerPaint/html/colorsTab.html
new file mode 100644
index 0000000000..6b92526570
--- /dev/null
+++ b/scripts/system/fingerPaint/html/colorsTab.html
@@ -0,0 +1,116 @@
+<!--Note: change the parent postmessage second parameter due to possible security issues-->
+<link rel="stylesheet" type="text/css" href="../../html/css/colpick.css">
+<script src="../../html/js/jquery-2.1.4.min.js"></script>
+<style>
+    #color_picker {
+        display: grid;
+    }
+    .color_picker_cell {
+        border: none; 
+        width: 20px; 
+        height: 20px;
+    }
+    #color_picker_table {
+        border-collapse:collapse
+    }
+    #custom_color_picker {
+        height: 50px;
+    }
+</style>
+
+<div id="colorpicker"></div>
+<table id="color_picker_table">
+</table>
+<div id="last_picked_colors"></div>
+<div id="property-color" class="color-picker"></div>
+
+
+<script src="../../html/js/colpick.js">
+    require('jquery-colpick');
+</script>
+<script>
+    $('#colorpicker').colpick({
+        flat:true, 
+        layout:'hex',
+        colorScheme:'dark',
+        onSubmit: function(hsb, hex, rgb, el) {
+            updateColorFromCustomPicker(rgb)
+        }
+    });
+
+    var COLUMNS = 18, ROWS = 10;
+
+    function addColors() {
+        //10-90%
+        var startingColors = [];
+        for (var i = 0; i < COLUMNS; i++) {
+            var hsl = new Object();
+            hsl.hue = 340*i/(COLUMNS-1) + 10;
+            startingColors.push(hsl);
+        }
+        var colorPickerLayout = document.getElementById("color_picker_table");
+        for (var j = 0; j < ROWS; j++) {
+            var row = document.createElement("tr");
+            for (var i = 0; i < startingColors.length; i++) {
+                var colorCell = document.createElement("input");
+                colorCell.type = "button";
+                colorCell.style.backgroundColor = "hsl(" + startingColors[i].hue + ",100%," + ((80-(80*j/(ROWS-1))) + 10) + "%)";
+                colorCell.className  = "color_picker_cell";
+                colorCell.onclick = function() { 
+                    updateColorFromTable(this) 
+                };
+                row.appendChild(colorCell);
+            }
+            colorPickerLayout.appendChild(row);
+        }
+    }
+
+    addColors();
+
+    function update(colorArray) {
+        // 'jscolor' instance can be used as a string
+        var changedColorEvent = {
+            "type" : "changeColor",
+            "red"  : colorArray[0],
+            "green": colorArray[1],
+            "blue" : colorArray[2]
+        };
+        parent.postMessage(JSON.stringify(changedColorEvent), "*");
+    }
+
+    function updateColorFromTable(button) {
+        var colorArray = window.getComputedStyle(button).backgroundColor.match(/\d+/g); 
+        $('#colorpicker').colpickSetColor({'r': colorArray[0], 'g': colorArray[1], 'b': colorArray[2]}, true);
+        update(colorArray);
+    }
+
+    function updateColorFromCustomPicker(rgbColor) {
+        var colorArray = [rgbColor.r, rgbColor.g, rgbColor.b];
+        addCustomColor(colorArray);
+        update(colorArray);
+    }
+
+    function addCustomColor(colorArray) {
+        var lastPickedColorsContainer = document.getElementById("last_picked_colors");
+        var lastPickedColors = lastPickedColorsContainer.children;
+        for (var i = 0; i < lastPickedColors.length; i++) {
+            var lasPickedCellColor = window.getComputedStyle(lastPickedColors[0]).backgroundColor.match(/\d+/g);
+            var equalRgbComponentsCount = 0; 
+            for (var j = 0; j < 3; j++) {
+                if (lasPickedCellColor[j] == colorArray[j])
+                    equalRgbComponentsCount++;
+                if (equalRgbComponentsCount == 3) //the color is the same so we won't add it!
+                    return;
+            }
+        }
+        if (lastPickedColors.length >= COLUMNS) {
+            lastPickedColorsContainer.removeChild(lastPickedColors[lastPickedColors.length-1]);
+        }
+        var colorCell = document.createElement("input");
+        colorCell.type = "button";
+        colorCell.style.backgroundColor = "rgb(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2];
+        colorCell.className  = "color_picker_cell";
+        colorCell.onclick = function() { updateColorFromTable(this) };
+        lastPickedColorsContainer.insertBefore(colorCell, lastPickedColorsContainer.firstChild);
+    }
+</script>
\ No newline at end of file
diff --git a/scripts/system/fingerPaint/html/eraserTab.html b/scripts/system/fingerPaint/html/eraserTab.html
new file mode 100644
index 0000000000..e348b655dc
--- /dev/null
+++ b/scripts/system/fingerPaint/html/eraserTab.html
@@ -0,0 +1,17 @@
+<!--Note: change the parent postmessage second parameter due to possible security issues-->
+<style type="text/css">
+    #undoButton {
+        width: 200px;
+        height: 200px;
+    }
+</style>
+
+<button id="undoButton" onclick="undo()">Undo</button>
+<script type="text/javascript">
+    function undo() {
+        var undoEvent = {
+            "type"     : "undo"
+        };
+        parent.postMessage(JSON.stringify(undoEvent), "*");
+    }
+</script>
\ No newline at end of file
diff --git a/scripts/system/fingerPaint/html/lineWidthTab.html b/scripts/system/fingerPaint/html/lineWidthTab.html
new file mode 100644
index 0000000000..1459b12d1b
--- /dev/null
+++ b/scripts/system/fingerPaint/html/lineWidthTab.html
@@ -0,0 +1,50 @@
+<!--Note: change the parent postmessage second parameter due to possible security issues-->
+<style type="text/css">
+    /*range style: http://danielstern.ca/range.css/#/*/
+    input[type=range] {
+        -webkit-appearance: none;
+        width: 400px;
+    }
+    input[type=range]:focus {
+        outline: none;
+    }
+    input[type=range]::-webkit-slider-runnable-track {
+        width: 100%;
+        cursor: pointer;
+        background: #666;
+        border: 0.1px solid #010101;
+    }
+    input[type=range]::-webkit-slider-thumb {
+        border: 1px solid #000000;
+        height: 24px;
+        width: 24px;
+        background-color: #fff;
+        cursor: pointer;
+        -webkit-appearance: none;
+    }
+    #lineWidthText {
+        padding-left: 12px;
+        padding-top: 6px;
+        position: absolute;
+    }
+    #lineWidthContainer {
+        margin: 12px;
+        margin-top: 48px;
+    }
+</style>
+
+<div id="lineWidthContainer">
+    <input type="range" id="myRange" value=0.25 min=0 max=1 step=0.01 onchange="changeLineWidth(this)">
+    <span id="lineWidthText">0.25</span>
+</div>
+
+<script type="text/javascript">
+    function changeLineWidth(e) {
+        document.getElementById("lineWidthText").innerText = e.value;
+          var changeLineWidthEvent = {
+            "type"     : "changeLineWidth",
+            "brushWidth":  e.value
+        };
+        parent.postMessage(JSON.stringify(changeLineWidthEvent), "*");
+    }
+</script>
\ No newline at end of file
diff --git a/scripts/system/fingerPaint/html/main.html b/scripts/system/fingerPaint/html/main.html
new file mode 100644
index 0000000000..5158905a44
--- /dev/null
+++ b/scripts/system/fingerPaint/html/main.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../html/js/jquery-2.1.4.min.js"></script>
+<style>
+    iframe {
+        height:100%;
+        width:100%;
+        position: absolute;
+    }
+    .tabButton {
+        background-color: #aaaaaa;
+        color: white;
+        font-size: 100%;
+        padding: 12px;
+        margin: 0px;
+        text-align: center;
+        vertical-align: middle;
+         display: inline-block;
+         user-select: none;
+    }
+    .tabIcon {
+        width: 24px;
+        height: 24px;
+        padding-right: 12px;
+    }
+    .selected {
+        background-color: #4286f4
+    }
+</style>
+</head>
+<body style="margin:0px;padding:0px;overflow:hidden">
+    <div id="tabs">
+        <span class="tabButton" onclick="selectTab(0)"><img class="tabIcon" src="../content/tabicons/colorpaletteBtn.png"/>Color</span>
+        <span class="tabButton" onclick="selectTab(1)"><img class="tabIcon" src="../content/tabicons/brushesBtn.png"/>Brushes</span>
+        <span class="tabButton" onclick="selectTab(2)"><img class="tabIcon" src="../content/tabicons/eraser.png"/>Eraser</span>
+        <span class="tabButton" onclick="selectTab(3)"><img class="tabIcon" src="../content/tabicons/linewidthBtn.png"/>Line Width</span>
+        <span class="tabButton" onclick="selectTab(4)"><img class="tabIcon" src="../content/tabicons/pointingfinger128px.png"/>Hand</span>
+    </div>
+    <div id="content">
+        <iframe frameborder="0" src="colorsTab.html" seamless></iframe>
+        <iframe frameborder="0" src="brushesTab.html" seamless style="display: none"></iframe>
+        <iframe frameborder="0" src="eraserTab.html" seamless style="display: none"></iframe>
+        <iframe frameborder="0" src="lineWidthTab.html" seamless style="display: none"></iframe>
+        <iframe frameborder="0" src="chooseHandTab.html" seamless style="display: none"></iframe>
+    </div>
+</body>
+</html>
+
+<script type="text/javascript">
+    var currentTab = 0;
+    selectTab(0);
+    function selectTab(tabIndex) {
+        var tabs = document.getElementById("tabs").children;
+        var contentPanels = document.getElementById("content").children;
+        tabs[currentTab].classList.remove("selected");
+        contentPanels[currentTab].style.display = "none";
+        contentPanels[tabIndex].style.display = "block";
+        tabs[tabIndex].classList.add("selected");
+        currentTab = tabIndex;
+    }
+
+    //Accept events from iframes
+    //https://stackoverflow.com/questions/8822907/html5-cross-browser-iframe-postmessage-child-to-parent
+    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+    var eventer = window[eventMethod];
+    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
+
+    // Listen to message from child window
+    eventer(messageEvent,function(e) {
+        EventBridge.emitWebEvent(e.data);
+    }, false);
+
+</script>
+