Creating a widget?
I'm trying to build a product that will include a widget— a block of code that users can paste into any site that will contain a small form. I have plenty of ideas for how to do this, but I'm curious to know if there's any generally-accepted method for including the styles, JavaScript, etc. The best I can come up with now is a <script></script> block that fetches all the necessary styles and tags from an external URL.
Oh boy, when I built the growsurf.com JavaScript SDK/widget, there was a ton I learned. Probably one of the better learning experiences I’ve had programming a vanilla JS widget.
If you’re making network requests, I recommend you read Stripe’s blog post. Their architecture is a really good example for a JS widget:
https://stripe.com/blog/stripejs-and-jsonp
Really quick, here are things you will most likely run into that you should be aware of:
To answer your question, the user-friendly way we chose to go with was modeled off of Stripe. It looks like this:
<script src=“//js.growsurf.com/v1”></script>If you have any questions, feel free to ping me. Happy to help
Wow, what an awesome post, thanks!
Another similar article that I have bookmarked that may help you learn:
https://blog.risingstack.com/on-third-party-javascript-the-principles/
I'd say using an
<iframe>would be the easiest and safest option which is probably why Google uses that option for Youtube and Maps.Using
<script>tags makes it more difficult if that widget has to be used in forums or blogs.We're using an iframe for our widget at snapwidget.com. But sometimes we need to include an external script and style tag when the content from the widget needs to "break out" of the iframe. For example when a photo needs to be displayed in a lightbox.
Would also be happy to help with any questions.
It's most common to include one line of javascript which then generates the widget.
For a previous product of mine, widgets were the core business. It's a big hassle to keep the widget compatible with all browsers and also all frameworks (some javascript/css will affect your widget).
For optimal isolation of external javascript and css it's best to let your javascript code attach a div with an iframe to the page. The widget itself will be visible within the iframe to limit disturbances.
This is an old, but good, article to get you started: http://alexmarandon.com/articles/web_widget_jquery/
Also don't be shy to reverse engineer widgets from relevant products to see how they do it.
Wow that’s a great link. Wish I had that when I was building a widget