{"id":267,"date":"2014-04-20T10:23:30","date_gmt":"2014-04-20T10:23:30","guid":{"rendered":"http:\/\/www.ramandv.com\/blog\/?p=267"},"modified":"2014-04-20T10:25:05","modified_gmt":"2014-04-20T10:25:05","slug":"developing-embeddable-javascript-widget","status":"publish","type":"post","link":"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/","title":{"rendered":"Developing Embeddable Javascript Widget"},"content":{"rendered":"\n<!-- Quick Adsense WordPress Plugin: http:\/\/quickadsense.com\/ -->\n<div class=\"e9e85ee105af8a6a4a383deebf1fa216\" data-index=\"1\" style=\"float: none; margin:10px 0 10px 0; text-align:center;\">\n<script type=\"text\/javascript\"><!--\r\ngoogle_ad_client = \"ca-pub-4917982260456644\";\r\n\/* ramandv.com-ad1 *\/\r\ngoogle_ad_slot = \"9226290554\";\r\ngoogle_ad_width = 728;\r\ngoogle_ad_height = 90;\r\n\/\/-->\r\n<\/script>\r\n<script type=\"text\/javascript\"\r\nsrc=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\r\n<\/script>\n<\/div>\n<p>For creating Embeddable Javascript widget, the important components in designing a widget are<\/p>\n<ul>\n<li>Widget Loader<\/li>\n<li>Iframe vs inline<\/li>\n<li>Analytics<\/li>\n<\/ul>\n<h2>Widget Loader:<\/h2>\n<p>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<\/p>\n<p><a href=\"http:\/\/shootitlive.com\/2012\/07\/developing-an-embeddable-javascript-widget\/\">http:\/\/shootitlive.com\/2012\/07\/developing-an-embeddable-javascript-widget\/<\/a><\/p>\n<p><a href=\"http:\/\/blog.swirrl.com\/articles\/creating-asynchronous-embeddable-javascript-widgets\/\">http:\/\/blog.swirrl.com\/articles\/creating-asynchronous-embeddable-javascript-widgets\/<\/a><\/p>\n<h2>Iframe vs Inline:<\/h2>\n<p><strong>widget HTML as part of parent page (not using iframe):<\/strong><\/p>\n<p>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.<\/p>\n<p>Drawbacks of having widget HTML as part of parent page:<\/p>\n<ul>\n<li>\n<p>Your widget styles should not affect the parent page<\/p>\n<ul>\n<li>Check out the following project for one way of implementing it <a href=\"https:\/\/github.com\/premasagar\/cleanslate\">https:\/\/github.com\/premasagar\/cleanslate<\/a><\/li>\n<\/ul>\n<\/li>\n<li>\n<p>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.<\/p>\n<\/li>\n<\/ul>\n<p>If you are using this approach, try to use plain vanilla javascript to write your widget.<\/p>\n<p><strong>Iframe:<\/strong><\/p>\n<p>This approach is pretty simple except handling cookies part. You dont need to worry about parent site styles and javascript.,.<\/p>\n<h2>Analytics:<\/h2>\n<p>Using google analytics within Iframe widget, it won\u2019t track your analytics properly, because most of the browser blocks third party cookies<\/p>\n<p>Read more information about third party cookies<\/p>\n<p><a href=\"http:\/\/www.opentracker.net\/article\/third-party-cookies-vs-first-party-cookies\">http:\/\/www.opentracker.net\/article\/third-party-cookies-vs-first-party-cookies<\/a><\/p>\n<p>Check the following article for Google universal analytics for your widget<\/p>\n<p><a href=\"https:\/\/shootitlive.com\/2013\/08\/cross-site-google-analytics-for-an-embedded-widget\/\">https:\/\/shootitlive.com\/2013\/08\/cross-site-google-analytics-for-an-embedded-widget\/<\/a><\/p>\n\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[6],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Developing Embeddable Javascript Widget - Articles for Developers\" \/>\n<meta property=\"og:description\" content=\"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 &hellip; Continue reading &rarr;\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Articles for Developers\" \/>\n<meta property=\"article:published_time\" content=\"2014-04-20T10:23:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-04-20T10:25:05+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ramandv\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.ramandv.com\/blog\/#website\",\"url\":\"http:\/\/www.ramandv.com\/blog\/\",\"name\":\"Articles for Developers\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.ramandv.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/#webpage\",\"url\":\"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/\",\"name\":\"Developing Embeddable Javascript Widget - Articles for Developers\",\"isPartOf\":{\"@id\":\"http:\/\/www.ramandv.com\/blog\/#website\"},\"datePublished\":\"2014-04-20T10:23:30+00:00\",\"dateModified\":\"2014-04-20T10:25:05+00:00\",\"author\":{\"@id\":\"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658\"},\"breadcrumb\":{\"@id\":\"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Developing Embeddable Javascript Widget\"}]},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658\",\"name\":\"ramandv\",\"url\":\"http:\/\/www.ramandv.com\/blog\/author\/ramandv\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/","og_locale":"en_US","og_type":"article","og_title":"Developing Embeddable Javascript Widget - Articles for Developers","og_description":"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 &hellip; Continue reading &rarr;","og_url":"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/","og_site_name":"Articles for Developers","article_published_time":"2014-04-20T10:23:30+00:00","article_modified_time":"2014-04-20T10:25:05+00:00","twitter_misc":{"Written by":"ramandv","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"http:\/\/www.ramandv.com\/blog\/#website","url":"http:\/\/www.ramandv.com\/blog\/","name":"Articles for Developers","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.ramandv.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/#webpage","url":"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/","name":"Developing Embeddable Javascript Widget - Articles for Developers","isPartOf":{"@id":"http:\/\/www.ramandv.com\/blog\/#website"},"datePublished":"2014-04-20T10:23:30+00:00","dateModified":"2014-04-20T10:25:05+00:00","author":{"@id":"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658"},"breadcrumb":{"@id":"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.ramandv.com\/blog\/developing-embeddable-javascript-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Developing Embeddable Javascript Widget"}]},{"@type":"Person","@id":"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658","name":"ramandv","url":"http:\/\/www.ramandv.com\/blog\/author\/ramandv\/"}]}},"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6YZCe-4j","_links":{"self":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/267"}],"collection":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/comments?post=267"}],"version-history":[{"count":2,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/267\/revisions"}],"predecessor-version":[{"id":269,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/267\/revisions\/269"}],"wp:attachment":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/media?parent=267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/categories?post=267"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/tags?post=267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}