Menu

Post image 1
Post image 2
1 / 2
0

Why We Ditched iFrames for Our Testimonial Widget (And Wrote 1,000 Lines of Vanilla JS Instead)

DEV Community·Touseef Ibn Khaleel·about 1 month ago
#LwnNZ3im
#software#comment#proofly#host#embed#iframe
Reading 0:00
15s threshold

Every embeddable widget tutorial recommends an iFrame. Drop it in, it's isolated, it can't affect the host page, done. We followed that advice for the first version of Proofly 's Wall of Love embed. It lasted about three weeks before we tore it out. The problems weren't subtle. They showed up immediately, in the first round of user testing, on every host site that wasn't a plain white page. What broke Height synchronization. An iFrame doesn't know how tall its content is unless you tell it. Our Wall of Love renders a grid of testimonial cards — the number varies by plan, the cards vary in height based on how long the testimonial text is, and the layout reflows when the viewport changes. Keeping the iFrame height synchronized with its content required a postMessage listener inside the frame, a ResizeObserver watching the content, and a handler outside the frame that updated the height style in response.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More