Working with iFrames : Edit in Inner frames.

What are iFrames?

An iFrame (short for inline frame) is an HTML element that allows one webpage to be embedded within another; essentially, it creates a window or container within a host page, in which another web page can load independently. This technique is commonly used in modern web applications to compartmentalize content, load external modules (such as third-party widgets, document viewers, or dashboards), and improve modularity in large-scale front-end architectures. However, while iFrames offer a powerful way to embed content seamlessly, they also introduce a series of constraints—particularly when it comes to interactivity, security, and cross-domain communication.

How Newired Handles iFrames

Newired is capable of supporting applications that use iFrames, but there are important technical limitations and conditions to be aware of:

1. Same-Origin Policy (Same Domain Requirement)

Newired Journeys and tooltips can only be created and deployed within the same domain. That means:

✅ You can create and display Newired content inside an iFrame if the content and the main page are on the same domain (e.g. app.company.com embedding dashboard.company.com).

❌ You cannot interact across domains — i.e., you cannot create content in Domain A that targets or controls content inside an iFrame from Domain B (e.g., yourportal.com embedding externalapp.com). This is restricted by browser security policies (cross-origin restrictions) and not something Newired can override.

Best Practices

• When designing applications where guidance is needed inside iFrames, aim for a consistent domain structure to ensure Newired compatibility.

• Avoid embedding third-party apps hosted on external domains if in-app guidance is expected.

• Always test Newired Journeys in the real environment to confirm visibility and interaction inside frames.

We have added a way on how to create content in iframe that has a different origin than the main page. We call this feature Edit in Inner frames. This feature is useful for sites where pages in Inner Frames are not working correctly when they are not loaded inside parent/hosting pages.

How to use Edit in Inner Frames

Let's have a page on URL https://example.com. This page uses iframes that load content from https://another.com.
Now, we want to create Journeys that will run inside iframes (using https://another.com).

1. Create new Site A on your portal that has URL https://another.com
2. Open Site A in the Editor.

• Editor automatically opens Site URL https://another.com and the Overlay should be started in the page. But we want to load the parent page https://example.com and have the overlay running inside inner frame with https://another.com.

• Toggle Edit in Inner Frame in menu Editor.

      4. Enter the URL of the parent page, https://example.com.

• If the parent page contains an inner frame loaded from Site URL https://another.com, then the overlay should be started in that iframe. If there is no such iframe, then the overlay will not start.
• Once is Overlay is running inside the inner frame, then all editing actions will be performed inside that frame.

* Notes

• Created content (Journeys etc.) can be published and Snipped should be inserted into inner frame page https://another.com.
• Running Overlay inside inner frame with Web Extension isn't supported yet.