How do I embed Assist in an iFrame?

This article describes how Assist can be correctly integrated into a website that loads content via an iFrame. It explains the prerequisites that need to be met and how the necessary code integration works both in the iFrame and the Parent Frame.

For additional information on how Assist behaves with embedded content, refer to the following article:

How does Eye-Able Assist handle embedded pages (iFrames)?

Prerequisites

Assist must be integrated on both the main page (Parent Frame) and the page loaded within the iFrame.
If the main page and the page loaded in the iFrame are on different domains, a separate Assist license must be available for each domain.
The code described here is used in addition to the regular Assist integration code.
The respective code must be integrated after the Assist integration code.

Code Integration in the iFrame

The following code is integrated into the page that is loaded inside the iFrame:

<script>
    //----------------Script inside of the **iFrame**-------------------------------
    document.addEventListener("eyeable:init_completed", function () {
        function inIframe () {
            try {
                return window.self !== window.top;
            } catch (e) {
                return true;
            }
        }
 
        if(inIframe()) {
            //hide the Eye-Able icon and toolbar when in an **Iframe**
            document.getElementById("eyeAble_container_ID").style.display = "none";
 
            //listen for messages from the **parent website** that **Assist** was updated
            window.addEventListener('message', (event) => {
                if(event.data && event.data.includes("topPosition")) {
                    //update the settings from the **parent website**
                    let newSettings = JSON.parse(event.data);
                    newSettings.bluefilterSet = "0"; //disable blue filter or it gets double applied
                    eyeAble_updateSettingsFromStruct(newSettings);
 
                    if(newSettings.eyeAble_Font_Family !== "0") {
                        eyeAble_setFontFamily(eyeAble_defaultCssVars["--font-family"]);
                    } else {
                        eyeAble_resetFontFamily();
                    }
 
                    if(newSettings.SpeechOutput === "1" && eyeAbleTTS.getActive() === false) {
                        eyeAble_pluginLocalConfig.blockScreenreaderIntro = true;
                        eyeAbleWebsiteNav.toggleNavWithSpeech();
                        eyeAble_shadowRoot.getElementById("screenreaderControllerID").style.display = "none";
                    } else if(newSettings.SpeechOutput === "0" && eyeAbleTTS.getActive() === true) {
                        eyeAbleWebsiteNav.toggleNavWithSpeech()
                    }
 
                    if(newSettings.BigCursor === "1" and eyeAble_getVar("BigCursor") === "0") {
                        eyeAble_toggleBigCursor();
                    } else if(newSettings.BigCursor === "0" and eyeAble_getVar("BigCursor") === "1") {
                        eyeAble_toggleBigCursor();
                    }
                }
            });
            console.log("Eye-Able is running in an **iframe**");
        }
    });
</script>

Code Integration in the Parent Frame

The following code is integrated into the main page (Parent Frame) that contains the iFrame:

<script>
    //----------------Script in **parent frame**-------------------------------
    function eyeAbleNotifyIFrames() {
        //send a message with the new object to all **iframes** on the page
        let iframes = document.getElementsByTagName('iframe');
        for (let i = 0; i < iframes.length; i++) {
            //short delay to make sure **Assist** finished processing
            setTimeout(() => {
                iframes[i].contentWindow.postMessage(window.localStorage.getItem("eyeAbleVariables"), '*');
            }, 400);
        }
    }
 
    document.addEventListener("eyeable:event", () => {
        eyeAbleNotifyIFrames();
    });
    document.addEventListener("eyeable:init_completed", () => {
        eyeAbleNotifyIFrames();
    });
</script>

Result after Code Integration

Assist will be hidden in the iFrame (icon and toolbar will not be visible).
All Assist functions (e.g., settings, display options, speech functions) will be applied inside the iFrame as well.
Changes to Assist settings on the main page will be automatically transferred to all iFrames.

Important Notes

Both code parts are required to ensure that Assist settings are correctly synchronized between the main page and the iFrame.
The code must not be integrated before the Assist integration code.
Without Assist integration on both pages, functionality within the iFrame cannot be guaranteed.