Skip to main content

Full page as Component (IFrame)

This documentation provides a comprehensive guide on utilizing Myop's iFrame components to transform your website pages into dynamic, remotely managed UI elements. By embedding your existing pages within iFrames, you can leverage Myop's capabilities to update and manage them in real-time without redeployment.

📌 Why Use iFrames with Myop?​

Embedding your website pages as iFrame components in Myop offers several advantages:

  • Real-Time UI Updates: Modify the UI dynamically without requiring host application changes or redeployment.

  • Isolation: Keep the embedded content separate from your main application, reducing potential conflicts.

  • Modularization: Treat entire pages as components, enhancing maintainability and scalability.

  • Cross-Framework Compatibility: Integrate with various frontend frameworks seamlessly.

  • Centralized Management: Control and update embedded pages from a central location.

⚙️ How to Embed a Website Page as a Myop iFrame Component​

Set Up Your Environment​

Ensure you have the Myop SDK integrated into your project. You can load the SDK via a script tag or install it using npm:

  • Via Script Tag:
<script src="https://dfdlk2p1m187v.cloudfront.net/myop_sdk.min.js"></script>
<script>
    const init = async () => {
        const {IframeSDK} = (await window.myop.rootSDK.getIframeModule());
        const sdk = new IframeSDK()
        sdk.init();
    }
    init().then();
</script>

Communicate with the Embedded iFrame​

You can use the built-in messaging system, Myop provides over 30 pre-built messages to address common UI needs such as text changes, visibility toggles, and user interactions. These built-in messages are accessible through the MyopMessages module, which is available upon initializing the Root SDK.

For custom communication and data transfer which is not defined as Myop Message,

If the Host side is the one to initiate the action like
change, register or execute some logic on the other side (inside the IFrame) use ExecuteScriptMessage or CustomRefMessage.

If you need the component side to trigger a function with its own data on the Host side use the on-demean execution of custom functions as follows.

On the Host side:

component.myFunction = (data)=> {
    console.log('say hi :', data);
}

On the Iframe side:

window.myop.IframeSDK.messageToHost({
    myop: true,
    messageType : 'ExecuteComponentMethod',
    method : 'myFunction',
    content : {
        name : 'myName'
    }
});