Appetize demo and config

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

    <body>

    <!-- For jsfiddle, must have "No wrap - in <body> under Frameworks & Extensions on the left side of this page.  -->
    
    
    <iframe src="https://appetize.io/embed/bp8h41ey07qv3wp2hfy7vh9wn4?device=iphone5s&orientation=portrait&scale=75&xdocMsg=true&deviceColor=white&debug=true&screenOnly=false" width="600px" height="600px" frameborder="0" scrolling="no"></iframe>
    
    
    
    <hr/>
    
    <button onclick="requestSession()">requestSession</button>
    <button onclick="emitHomeButton()">emitHomeButton</button>
    <button onclick="rotateLeft()">rotateLeft</button>
    <button onclick="rotateRight()">rotateRight</button>
    <button onclick="setScale(30)">setScale to 30%</button>
    <button onclick="setScale(70)">setScale to 70%</button>
    <button onclick="saveScreenshot()">saveScreenshot</button>
    <button onclick="getScreenshot()">getScreenshot</button>
    <button onclick="heartbeat()">heartbeat</button>
    <button onclick="mouseclick(160, 130)">mouseclick 160, 130</button>
    <button onclick="pasteText('hello@appetize.io!')">pasteText hello@appetize.io!</button>
    <button onclick="keypress('c', false)">keypress lowercase c</button>
    <button onclick="keypress('c', true)">keypress uppercase C</button>
    <button onclick="setLanguage('fr')">setLanguage to 'fr'</button>
    <button onclick="setLocation([47.4925, 19.0513])">setLocation to Paris</button>
    <button onclick="setLocation([39.903924, 116.391432])">seation to Beijing</button>
    <button onclick="openUrl('https://appetize.io/')">openUrl Appetize.io</button>
    <button onclick="openUrl('http://nytimes.com/')">openUrl NYTimes.com</button>
    <button onclick="shakeDevice()">shakeDevice</button>
    <button onclick="androidKeycodeMenu()">androidKeycodeMenu</button>
    <button onclick="restartApp()">restartApp</button>
    <button onclick="endSession()">endSession</button>
    <hr/>
    
    <img id="screenshot"/>
    
  </body>

</html>

// Code goes here

// Sending messages to iframe from parent window
var iframe = document.querySelector('iframe');

function requestSession(){
    iframe.contentWindow.postMessage('requestSession', '*');
}

function emitHomeButton(){
    iframe.contentWindow.postMessage('emitHomeButton', '*');
}

function rotateLeft(){
    iframe.contentWindow.postMessage('rotateLeft', '*');
}

function rotateRight(){
    iframe.contentWindow.postMessage('rotateRight', '*');
}

function setScale(number){
    iframe.contentWindow.postMessage({type: 'setScale', value: number}, '*');
}

function saveScreenshot(){
    iframe.contentWindow.postMessage('saveScreenshot', '*');
}

function getScreenshot(){
    iframe.contentWindow.postMessage('getScreenshot', '*');
}

function heartbeat(){
    iframe.contentWindow.postMessage('heartbeat', '*');
}

function mouseclick(x, y){
    iframe.contentWindow.postMessage({type:'mouseclick', x: x, y: y}, '*');
}

function pasteText(textToPaste){
    iframe.contentWindow.postMessage({type:'pasteText', value : textToPaste}, '*');
}

function keypress(key, shiftKey){
    iframe.contentWindow.postMessage({type:'keypress', key : key, shiftKey: shiftKey}, '*');
}

// must be supported by app to work
function setLanguage(language_code){
    alert('App must support language specified to work, default app does not');
    iframe.contentWindow.postMessage({type : 'language', value : language_code}, '*');
}

// updates gps location in app
function setLocation(location){
    iframe.contentWindow.postMessage({type:'location', value:location}, '*');
}

// opens URL
function openUrl(url){
    iframe.contentWindow.postMessage({type:'url', value:url}, '*');
}

// ios only
function shakeDevice(){
    iframe.contentWindow.postMessage('shakeDevice', '*');
}

// android only
function androidKeycodeMenu(){
    iframe.contentWindow.postMessage('androidKeycodeMenu', '*');
}

function restartApp(){
    iframe.contentWindow.postMessage('restartApp', '*');
}

function endSession(){
    iframe.contentWindow.postMessage('endSession', '*');
}


// Receiving messages from iframe in parent window
var messageEventHandler = function(event){
    
    if(event.data == 'userInteractionReceived'){
        console.log(event.data);
    }
    
    if(event.data == 'sessionRequested'){
        console.log(event.data);
    }
    
    else if(event.data == 'userError'){
        console.log(event.data);
    }
    
    else if(event.data == 'sessionQueued'){
        console.log(event.data);
    }
    
    else if(event.data == 'appLaunch'){
        console.log(event.data);
    }
    
    else if(event.data == 'firstFrameReceived'){
        console.log(event.data);
    }
    
    else if(event.data == 'timeoutWarning'){
        console.log(event.data);
    }
    
    else if(event.data == 'sessionEnded'){
        console.log(event.data);
    }
    
    else if(event.data && event.data.type == 'orientationChanged'){
        console.log(event.data);
    }
    
    else if(event.data && event.data.type == 'screenshot'){
        console.log(event.data);
        document.getElementById("screenshot").src = event.data.data;
    }
    
};

window.addEventListener('message', messageEventHandler, false);

/* Styles go here */

button{
    margin-bottom: 10px;
}