<script src="yourDomain/widget_embedder.js?customer_id=1234&customization_options=minimal_content">
note:<script> tag is blocking. (but async can be used IE10+)
You can't control where the Consumer will place the tag
Settings may need an additional script block
solution to above:
<script type="text/javascript"> (function (w, d, s, o, f, js, fjs) { w['MyWidget'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }; js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs); }(window, document, 'script', 'mw', '//SOME_CDN/widget.js')); mw('init', { showButton: true });</script>
or passed via attributes on an element
<a href="http://somehwere/" data-user-id="1234" data-affiliate-id="ABCD">Partnered with Somehwere</a>
-
<iframe name="Framename" src="framepage.htm" width="400" height="200" frameborder="0" scrolling="auto" class="frame-area">
</iframe>
Used by YouTube, Google Maps, Twitter etc.
Remember old browsers: frameborder="0" scrolling="auto"
Links can target an iframe: <a href="new.htm" target="Framename">Link</a>
Links can target parent from inside IFrame: <a href="new.htm" target="_top">Link</a>
consider preloading the iframe content with a <link> in <head>
-
-
-
The preferred solution for widgets with more complex UX and functionality, such as forms, or wizards with multiple steps.
-
-
-
-
Performance: In order to improve speed, it's a good idea to set the iframe's src attribute with JavaScript after the main content is done with loading. This makes your page usable sooner and decreases your official page load time (an important SEO metric.)
Iframe and DOM injection combined (e.g. embedded HTML form with hidden iframe to send the form submission to -- window.postMessage)
(or a new window with window.postmessage instead of an iframe, as a last resort in overly strict environments)