October 11, 2018

Ask IH: Implementing a widget? What's your way? inline or iframe?

Some pointers

  • Need to use jQuery

  • Logic needs series of screens

Keeping functionality in mind, I am more inclined to iframe.

What do you say?

  1. 4

    100% Iframe so the parent's css and js doesn't interfere.

    1. 1
  2. 1

    Had the same choice for the current project. I think in your case iframe is a better option. In my case, I am working on a recommendation widget for blogs and decided to go with plain javascript. But that's because I don't need much interactivity (no series of screens, jquery), just html and css.

    1. 1

      Thanks :)

      I agree with you.

  3. 1

    Came across this recently too with the widget I'm making.

    Decided to go 100% iFrame but with VueJS as logic inside it to pass parameters into it.

    This article helped me loads: https://medium.com/@mstrlaw/embedding-and-customizing-a-vuejs-component-through-an-iframe-a492e6e5ff70

    1. 1

      Wow! That's interesting. Thanks for sharing. :)

      Another reason to learn Vue.

      1. 2

        Indeed! Vue has been way easier to learn than React for me :)

  4. 1

    Off course, iframe for better separation of CSS and JavaScript resources.

    1. 1
  5. 1

    I built a site a year or so ago, https://3dscene.me (not self-promoting, I plan to shut it down soon haha). I used iframes for the widgets because it was pretty complex -- 3D/VR photo albums. There's an example on the home page and one in the blog as well.

    I assume most use iframes because of the separation. But if you're making them very customizable (css classes, geared towards devs and designers), a non-iframe option would be good because it can integrate very cleanly into an existing site and give them more power.

    You could always start with iframes for simplicity and add a power user option later that requires them to include jquery and stuff if necessary.

    Even with my VR albums, the iframe snippet was so short and worked pretty much anywhere:

    <iframe src="https://3dscene.me/albums/1" allowfullscreen="true" allowvr="true" style="border: 1px solid black; width: 100%; height: 400px"></iframe>

    1. 2

      Thanks for the comment. :)

      I really need to ship faster, so iframes is the way to go for me. There is also a way to incorporate the parent CSS into iframe content using javascript.

      Sorry to hear about the closure of 3dscene.me. Hoping some miracle happens.

      1. 2

        I think you're making the right choice :)

        And no big deal about 3dscene. It was a fun project, but was probably doomed from the start.

  6. 1

    Hey @shree thanks for asking this! I just started working on a project that adds widgets to users' sites (https://usehoney.io) and was going to put a similar question out to the community here.

    I'm currently using iframes as well, but I'm really curious to hear from people in this community on how they're approaching this. I would imagine there is a pretty good amount of knowledge collectively around here on the topic of creating js/iframe widget based products.

    Some of the things I'd love to hear about on top of pros/cons of iframe vs javascript for widget is how people are approaching resizing widgets based off user interactions (for example maybe using window.postMessage() or some other way), and for people who are creating widgets with js as oppose to iframes, I'm curious about things like how you approach setting cookies or how you go about adding your custom css for the widget.

    1. 1

      Resizing iframes is tricky but possible. For me the functionality of the widget is key. Would be using the <iframe> in the snippet code itself.

      Thanks for your note. :) All the best with with your widget.

  7. 1

    I been working on widget part for my product InterstateHQ for the past few week and I strongly suggest iframe will be the easier way to do it.

    1. 1

      True. Just heard levels podcast here on IH. Not to fall for cool things. Shipping is important.

      Thanks for your point. :)

  8. 1

    I'll throw a curve ball: Web Components and Shadow DOM.

    These are new browser standards that are pretty well suited for widget-like things.

    1. 1

      Haha... Confuse the confused. :)

      Will surely look into it. Thanks.

  9. 1

    iframes definitely. Being independent of the host's JS/CSS is the major factor.

    The downside is resizing/responsiveness and security settings if you need to pass data back and forth from host to iframe. But passing data and events is much easier these days with post message API

    I use a javascript loader script hosted on a CDN so that its really easy for the users to add the iframe, and it handles the iframe - parent messaging too.

    1. 1

      Thanks 😃

  10. 1

    If you don't have to worry about responsive resizing of the widget, iFrame is definitely the way to go like @jesbitt mentioned. Resizing is possible, but tricky.

    1. 1

      Thanks 😃