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?
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.
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”
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.
I give them an iFrame (Acts as a widget on their website) → This works already
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)
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).
