For creating Embeddable Javascript widget, the important components in designing a widget are

• Widget Loader
• Iframe vs inline
• Analytics

Widget Loader:

The embeddable snippet for our widget should not affect page load time of parent site. Our widget should not wait for entire page load, because if there is any other widget hogging the page load time, then your widget will suffer too. The following articles explains in details about creating the embeddable javascript snippet

http://shootitlive.com/2012/07/developing-an-embeddable-javascript-widget/

http://blog.swirrl.com/articles/creating-asynchronous-embeddable-javascript-widgets/

Iframe vs Inline:

widget HTML as part of parent page (not using iframe):

Your widget can be in a iframe or it can be part of the parent HTML. I would strongly suggest to use iframe approach, unless you have valid reason to have widget HTML as part of parent HTML.

Drawbacks of having widget HTML as part of parent page:

• Your widget styles should not affect the parent page

  • Check out the following project for one way of implementing it https://github.com/premasagar/cleanslate

• The javascript libraries necessary for your widget should be compatible with parent site. For example, you might need JQuery 1.9 but parent site has jQuery 1.6. You should be able to handle all these library issues.

If you are using this approach, try to use plain vanilla javascript to write your widget.

Iframe:

This approach is pretty simple except handling cookies part. You dont need to worry about parent site styles and javascript.,.

Analytics:

Using google analytics within Iframe widget, it won’t track your analytics properly, because most of the browser blocks third party cookies

Read more information about third party cookies

http://www.opentracker.net/article/third-party-cookies-vs-first-party-cookies

Check the following article for Google universal analytics for your widget

https://shootitlive.com/2013/08/cross-site-google-analytics-for-an-embedded-widget/