Integrating RealEye Tests into Surveys Without redirects

The easiest way to integrate RealEye with any survey tool is by using redirects. This method was described here: https://support-u.realeye.io/connecting-study-with-external-survey

Alternative method of integrating RealEye with survey tool is an iframe

It's possible to embed an eye-tracking test on an external website (ex. Decipher). When the test enters the calibration phase window gets full screen. After the test is finished the iframe is hidden.

In order to embed test you have to nest this iframe:

<iframe id="reioIframe" 
    src="https://www.realeye.io/test/{testId}/run" 
    title="RealEye eye-tracking test" 
    allow="camera;autoplay;fullscreen" 
    style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
</iframe>

where the "src" attribute includes a link to your test (external params and other flags can be added to the link). This embedding feature requires dedicated license so to test it use our study (https://www.realeye.io/test/acdd39be-1fd1-4de9-8de0-bc91113e48f3/run). Then some javascript is needed:

<script>
    /* View in fullscreen */
    function openFullscreen() {
        const elem = document.getElementById("reioIframe")
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) { /* Safari */
            elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { /* IE11 */
            elem.msRequestFullscreen();
        }
    }
    /* Close fullscreen */
    function closeFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) { /* Safari */
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { /* IE11 */
            document.msExitFullscreen();
        }
    }
    /* Intercept message */
    function handleMessage(event) {
        if (event.origin !== 'https://www.realeye.io') return
        if (event.data === 'reio-iframe-test-finished') {
            closeFullscreen()
            document.getElementById("reioIframe").style.display = 'none';
        }
        if (event.data === 'reio-iframe-fullscreen') {
            openFullscreen()
        }
    }
    window.addEventListener('message', handleMessage, false);
</script>

If you have any problems with this method please reach out to us at contact@realeye.io.