Rich-text Reply

editing iframe

Femi 11-02-15

editing iframe

I will like to know how possible it is to make copy  change to  a buy button (In an iframe). I currently do not have control of this iframe as it is built by another vendor.

 

The question is how do I bypass this (Iframe) using Optimizely . If this is possible can you guide me on how to achieve this?

Level 1

robertchan 11-02-15
 

Re: editing iframe

Based on my experience working with a number of iFrame products, you can't directly modify anything within an iFrame via Optimizely. A little hack I've used (which might be excessive for the scope of your experiment) has been creating a div that matches the dimensions of the iFrame button you'd like to edit, place it in the area of the current iFrame button, and remove the iFrame. This is definitely not recommended, but if you must modify the button, that'd be one approach. Here's an example of how you'd go about starting with what was mentioned within Optimizely's Variation Code area:

var theNewButton = [
'<div class="optButtonStyle">',
'Click Here',
'</div>'
].join('');

--
//The following changes can be made within the CSS section of Optimizely if your styling's global
$(".optButtonStyle").css({"background-color":"#ff0000","color":"#fff","height":"50px","width":"150px"});

--

Style the button's position to go where the current iFrame is and do something like so with the current iFrame:
$(".youriFrameSelector").remove();

If you're not seeing changes run properly, you can set a timeout.
Robert Chan

David_Orr 11-02-15
 

Re: editing iframe

Hi Femi,

 

That is a great question! Unfortunately, changes cannot be made on an iFrame that is not hosted on the same domain. This is due to the same-origin policy which is a security policy that prevents other sites from editing an iFrame. 

 

 

Is there a way you can host the buy button on your site?

 

David

Senior Technical Support Engineer
Optimizely
robertchan 11-05-15
 

Re: editing iframe

This might also be a useful resource that I received from Optimizely today regarding iFrames:

https://help.optimizely.com/hc/en-us/articles/204338398-Tracking-Views-on-YouTube-and-Vimeo-Videos
Robert Chan

David_Orr 11-06-15
 

Re: editing iframe

Hi Robert,

 

Thank you for your response. Tracking Youtube and Vimeo iFrames according to the article is a bit different. I'm not quite sure how they get around the allow-origin security option. My best guess is that the JS snippet Youtbue and Vimeo requires you to install allows your site to read the iFrame's callbacks events. 

 

David

Senior Technical Support Engineer
Optimizely