Need to use jQuery
Logic needs series of screens
Keeping functionality in mind, I am more inclined to iframe.
What do you say?
100% Iframe so the parent's css and js doesn't interfere.
I agree with you.
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
Wow! That's interesting. Thanks for sharing. :)
Another reason to learn Vue.
Indeed! Vue has been way easier to learn than React for me :)
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>
Thanks for the comment. :)
Sorry to hear about the closure of 3dscene.me. Hoping some miracle happens.
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.
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.
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.
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.
True. Just heard levels podcast here on IH. Not to fall for cool things. Shipping is important.
Thanks for your point. :)
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.
Haha... Confuse the confused. :)
Will surely look into it. Thanks.
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
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.