I just spent a couple of hours trying to have a rails app in the Optimizely Editor looks good,
but the CSS and images were not showing up. Apparently, if Optimizely cannot load your
website in the editor iframe, it uses a proxy,
www.optimizelyedit.com to load the HTML.
Fine. A rails application uses helpers (
image_tag) for CSS ang images which generate relative links.
So basically it tried to download the CSS here:
Of course it does not exist…
By default, Rails is secure and prevents other website to load yours in an iframe. It’s done with the following HTTP header:
You can override this behavior to allow Optimizely to load your site, and just them.
# app/controllers/application_controller class ApplicationController < ActionController::Base after_action :allow_optimizely_editor private def allow_optimizely_editor response.headers['X-Frame-Options'] = 'ALLOW-FROM https://www.optimizely.com' end end
That’s it! The Optimizely editor should now work. Oh, and of course, use ngrok
to expose your port
3000 on the Internet and run Optimizely experiment on your development environment.