How to make an iFrame either function like the normal website or navigate to the original website upon clicks?

To make the example simple, imagine I’m trying to build an A/B testing software. The base website is the clients website, and some of their visitors will see the Bubble modified website (New text, viewed as an iFrame).

When the visitor clicks my iFrame (Ex. Request Demo), it doesn’t navigate them to the customers original website. The iFrame only works as a visual replication, but I need the navigation to work.

Can I either make the iFrame fully function/navigate or can I make it so any click takes them to the proper page on their website?

Very, very simple.

target="_top"

Add this in your links, and bam.

Example:

<a href="http://example.com" target="_top">My link to change the parent window URL</a>

You’re a legend, thank you!

1 additional question: When it doesn’t have a URL, how do I apply this fix to it?

For example:

The examples that include a URL are fixed, but the ones that are not URLs are still broken.

Not sure what you mean. How does a link not have a URL?

a href=“/pricing” class=“nav-link w-nav-link”>Pricing<div data-hover=“false” data-delay=“0”

Rather than having a url it just has /pricing after a href

You’ll need some sort of javascript I believe (if you’re seeing/setting these links within the iFrame) that prepends the host url. You can use “window.origin” I believe, but I may have to refresh myself.

Would I add “window.origin” after the “/pricing” ?

before.

const origin = window.origin

return (<a href=`${origin}/pricing`>Link</a>)

Could you help me correct this, it isn’t working:
<a href=(<a href=${origin}/pricing>https://company.com/pricing) “/pricing” class=“nav-link w-nav-link”>Pricing<div data-hover=“false” data-delay=“0”

How are defining origin? Is there a script file youre loading or header in your page? Also that syntax is incorrect.

To give context: Let’s use Lattice (https://lattice.com/) as a teaching example for me. If you go to their source (view-source:https://lattice.com/), could you do a before/after to demonstrate how I should change the code for places where they have no links?

If you type “pricing” you will see there is nothing that says lattice(dotcom)/pricing

Just to clarify, your bubble is wrapping the external site, right? And you have access to the code of the external site? Like custom head, body, body, etc?

Effectively I work with a company, they give me permission to make the iFrame, then to make it easier for them I am just grabbing the public code. I’m working with non-developers. I’m changing the text on the website, so they can run A/B tests through my iFrame.

That didn’t answer my question, haha.

Unless they are wrapping your site in an iFrame?

Oh, misunderstood lol.

They are adding my page as an iFrame on their website. The iFrame will be their website (modified).

If it helps, this is the general process:

  1. I give them an iFrame (Acts as a widget on their website) → This works already
  2. I give them an iFrame (clone of their website with modifications) → they make a page on their website and it’s the clone iFrame (Which allows for the A/B testing)

I built you an example using my BubbleEssentials plugin.

Hope this helps.

Editor | Demo (Parent page with the iFrame and the links inside of it pointing to the iFrames parent origin url)

The index page is the iFrame content, the “parent” page is the parent.

The resulting javascript was pretty advanced as I queried all links within your frame, then applied the new properties.

You’ll likely need to modify/tweak to work to your advantage.

When you’re using version-test mode, make sure you enable devMode (inside index’s Run Javascript workflow.

What is my plugin doing?

Adding custom css + javascript to the pages.

NOTE: This will only work on things you wrap or use the “Link” element via Bubble Editor. Also, not sure whether or not this will work if the origin is not the same as the parent origin. If it doesn’t, just change a variable on the script to add your own custom origin url instead.

Could you contextualize this based on the Lattice example above?

How would I change the iFrame HTML to fix all the links?

I’m not a developer, so I really am not following what use case your example is solving.

I’m able to turn their website into an editable iFrame. I’m just not able to make sure all the links work on the iFrame I create (that they put on their website).