Lightbox in IFrame on landing page

  • 21 January 2016
  • 5 replies
  • 20 views

I am developing a mini site. Site looks great and was easy to develop with unbounce but I am stuck with two issues related to lightbox.

  1. Site has three iframes. Top Iframe for header has lightbox which when launches shows in height much smaller than what it should be because iframe of header is small. how to fix this?
  2. Third Iframe is much larger and is bigger than screen height. It has three buttons for same lightbox. When user clicks lightbox while in lowest part of iframe, it shows up lightbox in middle of iframe which is out of screen bounds. it does not auto scroll to show lightbox on screen. Any ideas on fixing this?

Thanks for helping out 🙂

Sal


5 replies

Sal, can you share a link to the page? It will be a lot easier to help figure it out if I/we can see it.

Here it is…http://try.escapere.com/tickets22/

it’s a work in progress so don’t judge me.🙂

Also, I tried to put one lightbox on 2nd iframe and click it programatically from button on other top iframe .Below code also does not work.

Sal,

Now that I see it it makes a bit more sense. I am going to focus on the iFrames for a moment. Why iFrame in content when you can build it natively in unbounce? That is the true power of the platform? This seems like less of a landing page and more like a micro site. If you build it completely in unbounce you’ll be able to show a mobile page, and that might be very important in this vertical.

With that said the reason the top light box has scroll bars is that it is taller than the page section. If you make the page section taller the lightbox won’t have to compress. However, because that CTA button is so dramatically different from the other two it took me a few minutes to find it.

My suggestion is to try and simplify your message, define your value proposition in the headline (which you have) but move it up and make it the focal point of the top of the page.

If you are really trying to engage with people (offering them the call back) I might skip that and use Olark to live chat with people. It is the best live chat plugin out there.

Lastly, how are you sending traffic to this page?

I bet with some tweaking you will get it dialed in. I might also recommend looking at Oli’s eBook about attention driven design. That could help clear up some of the top of the page issues for you.

Keep it going! 

Joe

Thank for comments and suggestions. I am making a mini-site. Iframes really made all complicated. I have removed them and put things in lightbox. It was easy.

I’ll be hooking up zopIM. also, traffic on this site will be PPC. Most users that will come on the site are expected to browse around and learn the company before they will call or RFQ.

Reply